1。下载地图，里面提供了各个地区的jeo.json数据，链接：datav.aliyun.com/tools/atlas…
根据项目需求下载指定的文件。
2.引用echarts.根据官网示例引用，并引用你下载的deo.json文件，完整代码如下：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="echarts.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jq.js" type="text/javascript" charset="utf-8"></script>
<title></title>
</head>
<body>
<div id="main" style="width: 400px;height:900px;"></div>
<div id="mains" style="width: 400px;height:900px;"></div>
<script type="text/javascript">
var dom = document.getElementById("main");
//得到echarts的实例对象
var mapChart= echarts.init(dom);
$.getJSON("geo.json", function(geoJson) {//#1
echarts.registerMap('济南', geoJson);//#2
let option = {
series: [
{
name: '济南地图',
type: 'map',
mapType: '济南',//#3
itemStyle:{
normal:{label:{show:true},
areaStyle: {
color: '#CCFFFF',
},
},
emphasis:{label:{show:true},
areaStyle: {
color: '#CCFFFF',
},
},},
data:[{name: '历下区', value: 100,selected:true}],//地图数据。name对应geo.json中的name,
nameMap: {'历下区': '历下区'}//更改地图中的name 名称
}
]
}
mapChart.setOption(option);
})
// echarts图点击事件
mapChart.on('click', function (params) {
// 控制台打印数据的名称
console.log(params.name)
});
</script>
</body>
</html>
引用的文件如下图所示：
3.geo.json文件数据格式如下图所示：
具体配置项参考echarts配置参考
4.如果地图显示区域不完整，需自行描点绘制所需区域图：描点坐标工具如下： geojson.io/#map=2/20.0… 5，代码效果图：
