通过Echarts3结合百度地图，对全国省分进行着色。

起因

由于Echarts3中，不再使用china.js文件：

ECharts 之前提供下载的矢量地图数据来自第三方，由于部分数据不符合国家《测绘法》规定，目前暂时停止下载服务。

建议大家使用以百度地图为底图的形式，参考实例：

学习百度地图使用方法，先用各省分着色练手。

百度地图 API

可参考官方文档：

Echarts结合百度地图官方实例

流程

1. 在首页中引入bmap.js与百度地图的api

2. 初始化echarts图表，并setOption百度地图的参数

   var bmapCharts = echarts.init(document.getElementById('chinaProvMap'));var option = {  bmap: {} // 此处为空，各类参数后面通过百度地图api进行设置}

3. 获取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);

效果

参考文章