摘要：最近公司要求开发大屏大数据展示界面，其中有个需求是迁徙图，以下是自己的相关总结，如有些的不好的地方请大家多多指教，我会虚心学习并修改不足的地方。
思考：1、迁徙图实现的第一步是引入中国地图，那如何引入中国地图呢？
2、地图引入后在实现迁徙图的相关动效（这个会在接下来的文章中总结，今天先总结下如何在Echarts中引入中国地图）
实现：
一、下载echarts.js以及china.js文件
1、echarts.js文件下载地址：百度云提取码：cpt0
2、china.js文件下载地址：百度云提取码：jbc3（如果失效了请与我联系）
二、开始我们的代码之旅啦
1、引入 ECharts以及china.js
2、在绘图前我们需要为 ECharts 准备一个具备高宽的 DOM 容器。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>echarts中国地图</title>
<style>
.centerItem {
width: 856px;
height: 640px;
background-color: #003077;
margin: 110px auto 0 auto;
}
</style>
</head>
<body>
<!-- 中国地图展示，为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="mapBox" class="centerItem"></div>
<!-- 引入相关文件 -->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- 引入 ECharts 文件 -->
<script src="js/echarts.js"></script>
<script src="js/china.js"></script>
</body>
</html> 运行后的效果如下：（给地图的容器一个深色背景颜色）
3、写相关配置（下面是完整的代码，并且还有相关的备注，大家可以自己调整修改成自己想要的颜色）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>echarts中国地图</title>
<style>
.centerItem {
width: 856px;
height: 640px;
background-color: #003077;
margin: 110px auto 0 auto;
}
</style>
</head>
<body>
<!-- 中国地图展示 -->
<div id="mapBox" class="centerItem"></div>
<!-- 引入相关文件 -->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- 引入 ECharts 文件 -->
<script src="js/echarts.js"></script>
<script src="js/china.js"></script>
<script>
// 基于准备好的dom，初始化echarts实例
var mapBoxEchart = echarts.init(document.getElementById('mapBox'));
// 指定相关的配置项和数据
var mapBoxOption = {
series: [{
type: 'map',
mapType: 'china',
label: {
normal: {
show: true, //显示省份标签
textStyle: {
color: "blue"
} //省份标签字体颜色
},
emphasis: { //对应的鼠标悬浮效果
show: false,
textStyle: {
color: "#800080"
}
}
},
aspectScale: 0.75,//这个参数用于 scale 地图的长宽比。最终的 aspect 的计算方式是：geoBoundingRect.width / geoBoundingRect.height * aspectScale
zoom: 1.2,//当前视角的缩放比例。
itemStyle: {
normal: {
borderWidth: .5, //区域边框宽度
borderColor: '#009fe8', //区域边框颜色
areaColor: "#ffefd5", //区域颜色
},
emphasis: {//鼠标滑过地图高亮的相关设置
borderWidth: .5,
borderColor: '#4b0082',
areaColor: "#ffdead",
}
}
}]
};
// 使用制定的配置项和数据显示图表
mapBoxEchart.setOption(mapBoxOption);
// echart图表自适应
window.addEventListener("resize", function() {
mapBoxEchart.resize();
});
</script>
</body>
</html>运行后的结果如图：
这样地图就引入成功啦
