利用 json 做区县 echart 地图

 

润乾自带的 echart 地图都是到省一级的. 有很多情况都是需要做区县一级的地图, 一般都是从世界各国以及中国各区县的 JSON 数据下载的 json 数据来获取最新的区县信息. 这里下载的是 genjson 数据. 在润乾里使用主要是添加 $.get(json 文件,function(map) 方法加载 genjson 文件.
下面贴出实现的代码和示例

用到的 geojson 文件可以在世界各国以及中国各区县的 JSON 数据下载免费下载

复制代码

<script>
 var myChart = echarts.init(document.getElementById('container'));
 $.get('china.json',function(geoJson){
   echarts.registerMap('china',geoJson); var mapData = geoJson.features.map(function(item){ return {
       name: item.properties.name,
       value: item.properties.childNum,
       cp: item.properties.cp,
     }
   }); var data = \[
     {name: '四川', value: 20057.34},
     {name: '重庆', value: 15477.48},
     {name: '云南', value: 31686.1},
     {name: '贵州', value: 6992.6},
     {name: '湖南', value: 44045.49},
     {name: '湖北', value: 40689.64},
     {name: '陕西', value: 37659.78}
   \];
   const max = 100000,
     min = 900; // todo
   const maxSize4Pin = 100,
     minSize4Pin = 20; var areaValue = data; var convertData = function (areaValue) { var res = \[\]; for (var i = 0; i < areaValue.length; i++) { // var geoCoord = geoCoordMap\[data\[i\].name\];
       mapData.forEach((v) => { if(v.name == areaValue\[i\].name){
             res.push({
               name: areaValue\[i\].name,
               value: v.cp.concat(areaValue\[i\].value)
             });
         }
       });
     }
     console.log(res); return res;
   }; var option = {
     title: {
       text: '测试地图',
       left: 'center',
     },
     tooltip: {
       trigger: 'item',
       formatter: '{b}<br/>{c}' },
     geo: {
       show: true,
       map: 'china',
       label: {
         normal: {
           show: false },
         emphasis: {
           show: true }
       },
       roam: true,
       itemStyle: {
         normal: {
           areaColor: '#031525',
           borderColor: '#3B5077' },
         emphasis: {
           areaColor: '#2B91B7' }
       },
       zoom: 1.2 },
     series: \[ /*{
         name: '地区测试数据',
         type: 'map',
         mapType: 'china', // 自定义扩展图表类型
         // geoIndex: 0,
         // aspectScale: 0.75, // 长宽比
         itemStyle:{
           normal:{label:{show:true}},
           emphasis:{label:{show:true}}
         },
         data: areaValue
       },*/ {
         name: 'pm2.5',
         type: 'scatter',
         coordinateSystem: 'geo',
         data: convertData(data),
         symbolSize: function (val) { return val\[2\] / 2000;
         },
         label: {
           normal: {
             formatter: '{b}',
             position: 'right',
             show: false },
           emphasis: {
             show: true }
         },
         itemStyle: {
           normal: {
             color: '#ddb926' }
         }
       },
       {
         name: '点',
         type: 'scatter',
         coordinateSystem: 'geo',
         symbol: 'pin',
         symbolSize: function(val) {
           const a = (maxSize4Pin - minSize4Pin) / (max - min);
           let b = minSize4Pin - a * min;
           b = maxSize4Pin - a * max; return a * val\[2\] + b;
         },
         label: {
           normal: {
             show: true,
             textStyle: {
               color: '#fff',
               fontSize: 9 }
           }
         },
         itemStyle: {
           normal: {
             color: '#F62157' // 标志颜色
 }
         },
         zlevel: 6,
         data: convertData(data)
       }
     \]
   }
   myChart.setOption(option);
 }); </script>

复制代码

上面的方法,当鼠标经过地图时不会触发 echarts 的提示框组件 tooltip,只有经过 scatter 才会有,如果地图也要触发 tooltip 组件,那就必须在 series 里添加一个 type 为 map 的 serise,type 的值为注册的地图比如 type=‘china’;

复制代码