1、首先需要准备一个HTML和一个地图的json文件。
HTML文件自己新建一个即可。
地图的json文件可以去阿里云下载。
下载地址:阿里云 DataV - 数据可视化平台
进入这个网页之后,选择自己需要的地图。然后在右边下载json文件。
2、HTML中需要引入jQuery和ECharts
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
3、想要地图显示,就需要盛放地图的盒子,进行初始化。
<div id="main" style="width: 1000px; height: 1000px"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById("main"));
</script>
4、最后就需要读取json文件,将地图显示出来
$get()可以解析json文件
5、查看全部代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>中国地图</title>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 1000px; height: 1000px"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById("main"));
//各省份的地图json文件
var provinces = [];
//初始化全国地图
loadMap("./china.json", "china");
function loadMap(mapCode, name) {
$.get(mapCode, function (data) {
//使用 HTTP GET 请求从服务器加载数据
echarts.registerMap(name, data); //注册可用地图
var option = {
series: [
{
name: "MAP",
type: "map",
mapType: name,
selectedMode: false, //是否允许选中多个区域
data: provinces,
},
],
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
});
}
</script>
</body>
</html>
最终效果