使用echarts完成中国省市区县镇地图展示

前言

很长时间没有写博客了，最近在做一个大数据面板，记录一下如何使用echarts完成地图特效展示，此篇详细介绍书写过程；
首先说明：

• echarts提供了解析地图的方法，但是没有地图json数据，尤其是区县地图；
• 此篇主要解析如何获得地图数据及代码应用，样式并不在意；
• 如果对样式或功能有要求的可以参考案例： Echarts 实现可视化数据大屏展示页面
• 考虑到github关于数据国内下载缓慢，特附上码云上的中国各省份地图下载接口，git地址：https://gitee.com/jcat/ecahrts-map.git；
• 坐标拾取器：百度地图坐标拾取器
• 案例浏览：http://jcat.gitee.io/ecahrts-map/cityMap/index.html

一、中国地图

1.1 地图数据-china.js

获取全国数据，

• 可以在echatrs官方github下载china.js，
• 也可以直接下载我的文件中国各省份地图下载接口；
• 也可以使用命令行，npm install echarts -s 里面的node包中直接使用；

1.2 代码应用

html

    <div id="chinaMap"></div>
    <script src="js/china.js"></script>

js

 function chinaMap() {
   
    let myChart = echarts.init(document.getElementById('chinaMap'))
    option = {
   
      geo: {
   
        map: 'china',//这里的名称需要和china.js: echarts.registerMap('china',{})中的名称一致
        label: {
    show: true }, //显示省份
        roam: true, //缩放
      },
      series: [], //地图上二开点线特效数组，按需添加
    }
    myChart.setOption(option)
    window.addEventListener('resize', function () {
   
      myChart.resize()//地图自适应
    })
  }

二、省份地图——以山东为例，其他省份同理

2.1 地图数据-shandong.js

获取省份数据

• 可以在echatrs官方github下载shandong.js，
• 也可以直接下载我的文件中国各省份地图下载接口；
• 也可以使用命令行，npm install echarts -s 里面的node包中直接使用shandong.js；

2.2 代码应用

html

    <div id="shandongMap"></div>
	<script src="js/shandong.js"></script>

js

  function shandongMap() {
   
    let myChart = echarts.init(document.getElementById('shandongMap'))
    option = {
   
      geo: {
   
        map: 'shandong', //这里的名称需要和shandong.js: echarts.registerMap('shandong',{})中的名称一致
        label: {
    show: true }, //显示地点
        roam: true, //缩放
      },
      series: [], 
    }
    myChart.setOption(option)
    window.addEventListener('resize', function () {
   
      myChart.resize()
    })
  }

三、市级地图——以山东临沂市为例

3.1 地图数据——linyi.json

获取市县级地图时和国省不同，没有官方的提供坐标，需要自行下载，这里推荐：

• datav地图选择器：http://datav.aliyun.com/tools/atlas
  
  拿到json数据后就可以使用

3.2 应用

html

<div id="linyiMap"></div>
<script src="js/city.js"></script>

city.js，将下载的json数据命名，方便js调用

tips：
这里下载下来的json文件也可以使用getJson()的方式请求本地json文件，但必须部署到服务端，才可以请求，不然谷歌浏览器就会报跨域。为了方便本地调用，使用的是命名成变量后调用。

var linyiMap = {
   
  type: 'FeatureCollection',
  features: [
    {
   
      type: 'Feature',
      properties: {
   
        adcode: 371302,
        name: '兰山'