示例简介echarts官方只提供全国地图，但是实际项目过程中，经常需要精确到镇区；本文通过实例介绍两种实现镇区地图效果的方法。自定义地图第一种的实现过程：1、打开网址“http://datav.aliyun.com/tools/atlas”，显示如下图的效果；2、左上角输入要生成的区域名字，比如“揭阳市”，输入“揭阳市”后，输入框下面会出现揭阳市的信息，点击后下面的信息和地图会更新为揭阳市的内容；3、根据项目实际情况，下载相对应类型的文件，该实例选择“geojson”，包含子区域。第二种的实现过程：1、使用工具“BIGEMAP”生成每个区域的kml文件，选择行政区域后点击红色框的箭头就可以保存该区域的kml文件；延伸：如果需要实现镇区以下，可以选择到第四个下拉框。2、打开网址“http://geojson.io”，点击“open-file”选择生成的kml文件，地图显示对应的区域，右边json自动生成数据；3、重复步骤1-2，把其它区域全部导入，最终效果如下；4、图中“json”就是我们需要的数据，另存为json文件到本地。注意：引用后经常会出现错误“echarts.min.js:45 Uncaught Error: Invalid geoJson format”，这个错误是部分区域的格式不对；下图为正确的格式，且错误的格式一般都是红色框的位置；比如第二种方法生成的json，就报了上面的问题，只需要修改下图地方就可以解决（错误的格式是数组，删掉前面，只保存最后一个值）；在自定义地图上实现图表效果实现代码如下，主要分析几个重点：1、series下的data的属性“name”要跟json的“name”对应；2、有时候区域名称未显示在该区域的最中间，可以修改json里面的字段“cp”，如果没有该字段可自己添加。Tips：“jy.json”即为上面两种方法生成的数据。<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%; background-color: #eee;"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
var option;
myChart.showLoading();
$.get('jy.json', function(geoJson) {
myChart.hideLoading();
echarts.registerMap('jy', geoJson);
myChart.setOption(option = {
title: {
text: '全市办件量分布图'
},
tooltip: {
trigger: 'item',
formatter: '{b}<br/>{c} (件)'
},
toolbox: {
show: true,
orient: 'vertical',
left: 'right',
top: 'center',
feature: {
dataView: { readOnly: false },
restore: {},
saveAsImage: {}
}
},
visualMap: {
min: 800,
max: 50000,
showLabel: !0,
left: 26,
bottom: 40,
text: ['高', '低'],
pieces: [{
gt: 2000,
label: "> 2000",
color: "#7f1100"
}, {
gte: 1500,
lte: 2000,
label: "1500 – 2000",
color: "#ff5428"
}, {
gte: 1000,
lt: 1500,
label: "1000 – 1500",
color: "#ff8c71"
}, {
value: 0,
color: "#ffffff"
}]
},
series: [{
name: '全市办件量分布图',
type: 'map',
mapType: 'jy', // 自定义扩展图表类型
label: {
show: true,
color: '#fff'
},
data: [
{ name: '榕城区', value: 2000 },
{ name: '揭东区', value: 2500 },
{ name: '揭西县', value: 1200 },
{ name: '惠来县', value: 1600 },
{ name: '普宁市', value: 1300 }
]
}]
});
});
if (option && typeof option === 'object') {
myChart.setOption(option);
}
</script>
</body>
</html>注意事项可使用网站“http://api.map.baidu.com/lbsapi/getpoint/index.html”进行坐标拾取。