在echarts里在geojson繪制的地圖上展示散點圖（氣泡）、線集。

先來要實現的效果圖：

下方圖1是官網的案例：http://www.echartsjs.com/gallery/editor.html?c=scatter-map

下圖2是展示氣泡類型為pin的效果：

---

繪制散點圖（氣泡）是echarts的一種series:

所以要實現在geojson繪制的地圖上展示散點圖就不能在series里設置geojson的地圖在series的type為map里：

如果將注冊的地圖放在這里啦，那么在series里設置的scatter無法正常的顯示，所以要將注冊的geojson地圖在echarts的geo里配置，series里的scatter設置coordinateSystem: 'geo',才能實現效果。

下面貼出實現的代碼：

用到的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';

{
         name: '地區測試數據',
         type: 'map',
         mapType: 'china', // 自定義擴展圖表類型
         geoIndex: 0,
         // aspectScale: 0.75, // 長寬比
         itemStyle:{
           normal:{label:{show:true}},
           emphasis:{label:{show:true}}
         },
         data: areaValue
       }

其中的geoIndex很關鍵，如果不設置為option里的對應的geo，map series 會自己生成內部專用的 geo 組件，但是也可以用這個 geoIndex 指定一個 geo 組件。這樣的話，map 和 其他 series（例如散點圖）就可以共享一個 geo 組件了。並且，geo 組件的顏色也可以被這個 map series 控制，從而用 visualMap 來更改。

具體可以看api：http://echarts.baidu.com/option.html#series-map.geoIndex

 

修改：實現上面的代碼后，發現在scatter上顯示label數據時，默認顯示的是我們處理后的value里索引為1的經緯度數據，並不是我們要的真實value數據，官網上的很多案例都沒有體現該項的配置，

我們需要自己去設置標簽內容，使用echarts的formatter：

http://echarts.baidu.com/option.html#series-scatter.label.formatter

{
         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: {
             // formatter: '{@score}',
             formatter: '{@[2]}',
             show: true,
             textStyle: {
               color: '#fff',
               fontSize: 9
             }
           }
         },
         itemStyle: {
           normal: {
             color: '#F62157' // 標志顏色
           }
         },
         zlevel: 6,
         data: convertData(data)
       }

其中formatter: '{@[2]}'里的@[2]表示獲取value里的第三項。具體參數可看上方給的鏈接

 

注：這里是使用的geojson文件繪制的地圖，可以直接獲取到里面的數據，也可以使用echarts給的地圖js來繪制地圖，但是沒辦法獲取到文件里的數據，也無法在上面展示散點圖，可以在3Dmap里使用。

比如中國的地圖js可以引入：

<script src="http://echarts.baidu.com/asset/map/js/china.js"></script>

世界地圖：

<script src="http://echarts.baidu.com/asset/map/js/world.js"></script>