代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>echarts 地图</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/echarts/3.8.0/echarts.min.js"></script>
</head>
<body>
<div id="map" style="width: 800px; height: 800px;"></div>
<script type="text/javascript">
var myChart;
$.get("扬州市.json", function(huaianJson) {
echarts.registerMap("yangzhou", huaianJson);
myChart = echarts.init(document.getElementById("map"));
var option = {
animation: false,
backgroundColor: "#404a59",
tooltip: {
trigger: 'axis'
},
geo: {
map: 'yangzhou',
// silent: true,
roam: true,
zoom: 1.155, // 地图初始大小
label: {
emphasis: {
show: false,
areaColor: '#eee'
}
},
// 地区块儿颜色
itemStyle: {
normal: {
areaColor: '#55C3FC',
borderColor: '#fff'
},
emphasis: {
areaColor: '#21AEF8'
}
}
}
};
function renderEachCity() {
var option2 = {
xAxis: [],
yAxis: [],
grid: [],
series: []
};
echarts.util.each(rawData, function(dataItem, idx) {
var geoCoord = geoCoordMap[dataItem[0]];
var coord = myChart.convertToPixel('geo', geoCoord);
idx += '';
var inflationData = [30,50,20];
option2.xAxis.push({
id: idx,
gridId: idx,
type: 'category',
name: dataItem[0],
nameLocation: 'middle',
nameGap: 3,
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
axisLine: {
onZero: false,
lineStyle: {
color: '#666'
}
},
data: ["数据A","数据B","数据C"],
z: 100
});
option2.yAxis.push({
id: idx,
gridId: idx,
splitLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
show: false
},
axisLine: {
show: false,
lineStyle: {
color: '#1C70B6'
}
},
z: 100
});
option2.grid.push({
id: idx,
width: 30,
height: 40,
left: coord[0] + 10,
top: coord[1] - 30,
z: 100
});
option2.series.push({
id: idx,
type: 'bar',
xAxisId: idx,
yAxisId: idx,
barGap: 0,
barCategoryGap: 0,
data: inflationData,
z: 100,
itemStyle: {
normal: {
color: function(params){
// 柱状图每根柱子颜色
var colorList = ['#F75D5D','#59ED4F','#4C91E7'];
return colorList[params.dataIndex];
}
}
}
});
});
console.time('a');
myChart.setOption(option2);
console.timeEnd('a');
}
setTimeout(renderEachCity, 0);
myChart.on('geoRoam', renderEachCity);
myChart.setOption(option);
});
// 市区坐标
var geoCoordMap = {
"广陵区": [119.442267,32.392154],
"邗江区": [119.397777,32.377899],
"江都区": [119.567481,32.426564],
"宝应县": [119.321284,33.23694],
"仪征市": [119.182443,32.271965],
"高邮市": [119.443842,32.785164],
};
var rawData = [
["广陵区",10,20,30],
["邗江区",10,20,30],
["江都区",10,20,30],
["宝应县",10,20,30],
["仪征市",10,20,30],
["高邮市",10,20,30],
];
</script>
</body>
</html>
地图JOSN数据下载地址:http://datav.aliyun.com/tools/atlas/index.html#&lat=33.50475906922609&lng=104.2822265625&zoom=4
参考文章: