通过Echarts3结合百度地图，对全国省分进行着色。
起因
由于Echarts3中，不再使用china.js文件：
ECharts 之前提供下载的矢量地图数据来自第三方，由于部分数据不符合国家《测绘法》规定，目前暂时停止下载服务。
建议大家使用以百度地图为底图的形式，参考实例：http://echarts.baidu.com/demo.html#map-polygon
学习百度地图使用方法，先用各省分着色练手。
百度地图 API
可参考官方文档：
Echarts结合百度地图官方实例
流程
- 在首页中引入bmap.js与百度地图的api
<script src="./js/echarts/bmap.js"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您自己的ak"></script>
- 初始化echarts图表，并
setOption百度地图的参数
var bmapCharts = echarts.init(document.getElementById('chinaProvMap'));
var option = {
bmap: {} // 此处为空，各类参数后面通过百度地图api进行设置
}
- 获取bmap并进行地图设置
var map = bmapCharts.getModel().getComponent('bmap').getBMap();
百度地图配置代码
let provList = new Array(["黑龙江","#F09ABD"],["吉林省","#01933F"],["辽宁","#FAC300"],["内蒙古","#FCF502"],["河北","#F09ABD"],["北京","#FCF502"],["天津","#01933F"],["山东省","#FCF502"],["江苏","#D8EDDA"],["上海","#B9B4C8"],["浙江","#FCF502"],["福建","#FAC300"],["台湾","#F09ABD"],["广东","#FCF502"],["香港","#F09ABD"],["澳门","#F09ABD"],["海南","#F09ABD"],["广西","#FAC300"],["云南","#FCF502"],["西藏","#B9B4C8"],["新疆","#FAC300"],["甘肃","#01933F"],["青海","#F09ABD"],["四川","#FAC300"],["贵州","#01933F"],["重庆","#B9B4C8"],["湖南","#F09ABD"],["江西","#01933F"],["湖北","#FCF502"],["安徽","#FAC300"],["河南","#B9B4C8"],["陕西","#F09ABD"],["山西","#01933F"],["宁夏","#FAC300"]); //通过取色器获取各省颜色
map.centerAndZoom("兰州", 5); //取兰州作为中心点
map.addControl(new BMap.NavigationControl()); // 缩放控件
map.addControl(new BMap.ScaleControl()); // 比例尺
map.enableScrollWheelZoom();
function getBoundary(provItem){
// console.log(provItem);
var bdary = new BMap.Boundary();
bdary.get(provItem[0], function(rs){ //获取行政区域
var count = rs.boundaries.length; //行政区域的点有多少个
if (count === 0) {
alert('未能获取当前输入行政区域');
return ;
}
var pointArray = [];
for (var i = 0; i < count; i++) {
let ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 1, strokeColor: "#aaaaaa", fillColor: provItem[1]}); //建立多边形覆盖物
map.addOverlay(ply); //添加覆盖物
pointArray = pointArray.concat(ply.getPath());
}
});
}
setTimeout(function(){
provList.forEach(function(item){
getBoundary(item);
});
}, 20);
效果
局部图
整体图
