漏刻有时数据可视化Echarts组件开发(16):乡镇街道下辖村级或社区级别的行政区域边界轮廓划分的svg解决方案

上图，是在echarts中通过svg图片格式，实现村级行政区域的边界轮廓的划分。

功能说明

1.svg格式必须严格按照格式生成，其中name字段，为必须; 2.支持svg自定义样式表的颜色和边框，但是在加载入echarts后，以echarts属性优先； 3.支持文本标签的组件属性； 4.支持区域颜色的个性化设置； 5.支持区域跳转链接的单击事件属性； 6.需要http服务，实现ajax加载SVG：$.get('country.svg', function (svg)； 7.散点图、路径线、3D下过，目前无法实现（未测试）； 8.在echarts 5.x版本下测试通过；

区域统一颜色的设置

  itemStyle: {areaColor: '#009688',//地图区域的颜色},

不同区域颜色的设置

 data: [
 {name: 'A村', value: getNum(),itemStyle: {areaColor: '#FF5722'}},
 {name: 'B村', value: getNum(),itemStyle: {areaColor: '#FFB800'}},
  ]

视觉映射设置

            visualMap: {
                left: 'center',
                bottom: '10%',
                min: 5,
                max: 200,
                orient: 'horizontal',
                //text: [null, 'Price'],
                //realtime: true,
                calculable: true,
                inRange: {
                    color: ['#dbac00', '#db6e00', '#cf0000']
                }
            },

单击区域跳转链接事件设置

      //链接-单击事件;
        myChart.on('click', function (params) {
            console.log(params);
            if (params.componentIndex == '0') {
                window.open('https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&tn=baidu&wd=' + params.name)
            }
        });

SVG数据格式

  
    
      .cls-1 {
        fill: #FF5722;
        stroke: #000;
        stroke-width: 10px;
        fill-rule: evenodd;
      }
    
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

lockdatav Done !