Echarts世界地图中国分区显示

需求：在报表显示世界地图，国外显示到国家，国内显示到省份。

分析：由于之前系统中所有的报表都是用Echarts做的，所以决定世界地图也用Echarts来做，查了一下Echarts网方网站，貌似和地图有关的Demo都已关闭（API尚在）；查了一些资料，发现Echarts支持的地图大都只显示到国家，如下图。很明显不符合我们的需求，对于我这个半屌子前端，着实费了好大精力，好在查到了Echarts是可以支持自定义，这里记录一下，供有需求同学参考。

w-m-0.png

1、简述地图坐标加载的两种方式

第一种：通过动态从后台加载，这里可以参考Echarts API文档，这里后台的数据要以JSON格式返回

$.get('map/json/china.json', function (chinaJson) {
    echarts.registerMap('china', chinaJson);
    var chart = echarts.init(document.getElementById('main'));
    chart.setOption({
        series: [{
            type: 'map',
            map: 'china'
        }]
    });
});
//https://echarts.baidu.com/option.html#geo.map

第二种：比较简单，就是直接在页面上引入js文件，这里改造前用的是world.js，改造后用的是world_new.js文件。

<script type="text/javascript" src="js/echarts.min.js"></script>
<script type="text/javascript" src="js/world.js"></script>
//<script type="text/javascript" src="js/world_new.js"></script>

这里采用引入JS的方式作示例说明，后面我会把两个JS都附上。

2、改造world.js

大家可以自行下载world.js文件打开看一下源码，这里只拿出一行核心代码说明，registerMap里面的world.json就是我们要自定义的json（原world.js中world.json参数位置坐标是不包含中国省份的），这里我们要做的就是把中国省份地理坐标加入，因为registerMap支持的是标准的geo坐标系（不了解的可自行搜索），关于中国省份的坐标，大家可以从网上自行下载china.js，很容易找到，记得要稍微转换一下格式。

&emsp;&emsp;echarts.registerMap('world', world.json);
&emsp;&emsp;改造后
&emsp;&emsp;echarts.registerMap('world', world_new.json);

改造后的效果如下：

w-m-1.png

3、打包下载

链接：https://pan.baidu.com/s/1xazTcjHyGOKQsi-jyRe6eA 
提取码：kapq

若链接莫名失效，可以留言联系，也可以按照上述的方式自行改造一下，包中有一份世界地图中的中国坐标供参考。

最后编辑于：2019.08.13 17:16:26