百度地圖API能夠直接劃分區級別的行政劃分：
如果是在線訪問的系統可以參考鏈接https://blog.csdn.net/myfmyfmyfmyf/article/details/69382618#comments；
如果是離線的系統，可以通過這個echarts地址下載實現離線地圖https://gallery.echartsjs.com/editor.html?c=x4snrWXFGe
但是對於鄉鎮級別的行政劃分，百度地圖無法直接獲取，這時可能通過三種方式實現：
1、使用靜態圖片和Dreamweaver做map area，因爲是圖片所以適應性差，可以參考這個地址下載“”各區、地級市的圖片“
接下來使用Dreamweaver或者其他工具來做map area，選擇一張地圖，我點 我點 我點 很快把各個熱點點出來
最後增加click事件，或者其他事件
這樣就完成了，把代碼複製到自己工程
2、使用AI（AdobeIllustratorCS） 畫svg圖，通過svg的path增加click事件
使用曲率工具畫出來的，導出svg時是path，path直接增加onclick事件就行；使用鋼筆工具畫出的svg，導出是polygon，polygon無法直接增加onclick事件；
3、使用GeoJson數據做echarts或者百度 高德 圖，適應性強。但是GeoJson獲取麻煩，獲取方式可能自己通過工具畫，或者購買shp文件實現。
這裏介紹下不專業的自己畫，通過http://geojson.io/#map=10/31.3396/120.9718繪製地圖邊界
通過地圖畫多邊形，然後在右側得到GeoJson數據，將GeoJson放入ECharts中，得到離線地圖
/**
此版本通過設置geoindex && seriesIndex: [1] 屬性來實現geo和map共存，來達到hover散點和區域顯示tooltip的效果
默認情況下，map series 會自己生成內部專用的 geo 組件。但是也可以用這個 geoIndex 指定一個 geo 組件。這樣的話，map 和 其他 series（例如散點圖）就可以共享一個 geo 組件了。並且，geo 組件的顏色也可以被這個 map series 控制，從而用 visualMap 來更改。
當設定了 geoIndex 後，series-map.map 屬性，以及 series-map.itemStyle 等樣式配置不再起作用，而是採用 geo 中的相應屬性。
http://echarts.baidu.com/option.html#series-map.geoIndex
並且加了pin氣泡圖標以示數值大小
*/
var uploadedDataURL = "/asset/get/s/data-1509940365453-SkScnUTCW.json";
myChart.showLoading();
$.getJSON(uploadedDataURL, function(geoJson) {
geoJson = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
120.67520141601561,
31.22337141316801
],
[
120.66970825195312,
31.213975956122024
],
[
120.6683349609375,
31.1634593819847
],
[
120.67245483398438,
31.123496964067325
],
[
120.67245483398438,
31.067050772707812
],
[
120.68069458007814,
31.04705137289917
],
[
120.78369140624999,
31.04705137289917
],
[
120.86746215820314,
31.05058098421751
],
[
120.94161987304686,
31.071755902820133
],
[
121.01028442382812,
31.089398067100554
],
[
121.05285644531249,
31.11526731701526
],
[
121.04873657226561,
31.142304905845737
],
[
121.025390625,
31.196356957735073
],
[
120.90316772460938,
31.225720131523712
],
[
120.8441162109375,
31.258596058801725
],
[
120.67520141601561,
31.22337141316801
]
]
]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
120.84548950195312,
31.260943901385993
],
[
120.84686279296874,
31.256248157815243
],
[
120.90042114257812,
31.22337141316801
],
[
121.025390625,
31.196356957735073
],
[
121.0638427734375,
31.11879439598953
],
[
121.07208251953125,
31.12702373719877
],
[
121.1077880859375,
31.21867380136463
],
[
121.12701416015624,
31.30084828737045
],
[
121.08993530273438,
31.347772997537877
],
[
120.9649658203125,
31.380606373669693
],
[
120.87432861328125,
31.361845848762645
],
[
120.84548950195312,
31.260943901385993
]
]
]
}
},
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[
120.87295532226562,
31.365363732463518
],
[
121.08581542968751,
31.525873333239655
],
[
120.97869873046875,
31.590234076606844
],
[
120.77270507812499,
31.60544012595478
],
[
120.60791015625,
31.577365480690492
],
[
120.54336547851562,
31.46381099222185
],
[
120.63400268554689,
31.380606373669693
],
[
120.65185546875,
31.27268223818717
],
[
120.79330444335938,
31.267987078700706
],
[
120.83999633789062,
31.26329168556556
],
[
120.87020874023438,
31.347772997537877
],
[
120.84548950195312,
31.258596058801725
],
[
120.87295532226562,
31.365363732463518
]
]
]
}
}
]
};
echarts.registerMap('jiangxi', geoJson);
myChart.hideLoading();
var geoCoordMap = {
'AAA市': [120.84548950195312, 31.258596058801725],
'BBB市': [121.08581542968751, 31.258596058801725],
'CCC市': [120.79330444335938,31.347772997537877]
}
var data = [{
name: 'AAA市',
value: 199
},
{
name: 'BBB市',
value: 152
},
{
name: 'CCC市',
value: 299
}
];
var max = 480,
min = 9; // todo
var maxSize4Pin = 100,
minSize4Pin = 20;
var convertData = function(data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value)
});
}
}
return res;
};
option = {
title : {
text : '“崑山” - 江蘇省',
subtext : '',
x : 'center',
textStyle: {
color : '#ccc'
}
},
tooltip: {
trigger: 'item',
formatter: function(params) {
if (typeof(params.value)[2] == "undefined") {
return params.name + ' : ' + params.value;
} else {
return params.name + ' : ' + params.value[2];
}
}
},
legend: {
orient: 'vertical',
y: 'bottom',
x: 'right',
data: ['credit_pm2.5'],
textStyle: {
color: '#fff'
}
},
visualMap: {
show: false,
min: 0,
max: 500,
left: 'left',
top: 'bottom',
text: ['高', '低'], // 文本，默認爲數值文本
calculable: true,
seriesIndex: [1],
inRange: {
// color: ['#3B5077', '#031525'] // 藍黑
// color: ['#ffc0cb', '#800080'] // 紅紫
// color: ['#3C3B3F', '#605C3C'] // 黑綠
color: ['#0f0c29', '#302b63', '#24243e'] // 黑紫黑
// color: ['#23074d', '#cc5333'] // 紫紅
// color: ['#00467F', '#A5CC82'] // 藍綠
// color: ['#1488CC', '#2B32B2'] // 淺藍
// color: ['#00467F', '#A5CC82'] // 藍綠
// color: ['#00467F', '#A5CC82'] // 藍綠
// color: ['#00467F', '#A5CC82'] // 藍綠
// color: ['#00467F', '#A5CC82'] // 藍綠
}
},
// toolbox: {
// show: true,
// orient: 'vertical',
// left: 'right',
// top: 'center',
// feature: {
// dataView: {readOnly: false},
// restore: {},
// saveAsImage: {}
// }
// },
geo: {
show: true,
map: 'jiangxi',
label: {
normal: {
show: false
},
emphasis: {
show: false,
}
},
roam: true,
itemStyle: {
normal: {
areaColor: '#031525',
borderColor: '#3B5077',
},
emphasis: {
areaColor: '#2B91B7',
}
}
},
series: [{
name: 'credit_pm2.5',
type: 'scatter',
coordinateSystem: 'geo',
data: convertData(data),
symbolSize: function(val) {
return val[2] / 10;
},
label: {
normal: {
formatter: '{b}',
position: 'right',
show: true
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: '#05C3F9'
}
}
},
{
type: 'map',
map: 'jiangxi',
geoIndex: 0,
aspectScale: 0.75, //長寬比
showLegendSymbol: false, // 存在legend時顯示
label: {
normal: {
show: false
},
emphasis: {
show: false,
textStyle: {
color: '#fff'
}
}
},
roam: true,
itemStyle: {
normal: {
areaColor: '#031525',
borderColor: '#3B5077',
},
emphasis: {
areaColor: '#2B91B7'
}
},
animation: false,
data: data
},
{
name: '點',
type: 'scatter',
coordinateSystem: 'geo',
symbol: 'pin',
symbolSize: function(val) {
var a = (maxSize4Pin - minSize4Pin) / (max - min);
var 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),
},
{
name: 'Top 5',
type: 'effectScatter',
coordinateSystem: 'geo',
data: convertData(data.sort(function(a, b) {
return b.value - a.value;
}).slice(0, 5)),
symbolSize: function(val) {
return val[2] / 10;
},
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
label: {
normal: {
formatter: '{b}',
position: 'right',
show: true
}
},
itemStyle: {
normal: {
color: '#05C3F9',
shadowBlur: 10,
shadowColor: '#05C3F9'
}
},
zlevel: 1
},
]
};
myChart.setOption(option);
});