在echarts裏在geojson繪製的地圖上展現散點圖（氣泡）、線集。

先來要實現的效果圖：html

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

下圖2是展現氣泡類型爲pin的效果：api

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

因此要實如今geojson繪製的地圖上展現散點圖就不能在series裏設置geojson的地圖在series的type爲map裏：測試

若是將註冊的地圖放在這裏啦，那麼在series裏設置的scatter沒法正常的顯示，因此要將註冊的geojson地圖在echarts的geo裏配置，series裏的scatter設置coordinateSystem: 'geo',才能實現效果。spa

下面貼出實現的代碼：.net

用到的geojson文件能夠在世界各國以及中國各區縣的JSON數據下載免費下載code

<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';orm

{ 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 來更改。htm

具體能夠看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>