一站式解决echarts实现区域地图

近期项目中有个大屏展现的需求，须要显示行政区的地图。苦苦寻找的过程当中发现此方面资料不多且大部分在CSDN上付费下载，着实麻烦，特此总结，供你们参考。

直接上图

关键知识点

geo数据

geo是echarts渲染数据的格式，geo是数据基础，有基础数据就很容易实现上图效果了。

visualMap

visualMap 是视觉映射组件，用于进行『视觉编码』，也就是将数据映射到视觉元素（视觉通道），地图的渲染依赖于此配置。

<script type="text/javascript">
      // 基于准备好的dom，初始化echarts实例
      $.get("../geo/市含县/320800_full.json", function(huaianJson) {
        echarts.registerMap("huaian", huaianJson);
        var chart = echarts.init(document.getElementById("echartMap"));
        chart.setOption({
          backgroundColor: "#404a59",
          visualMap: {
            type: "continuous",
            min: 0,
            max: 100,
            text: ["High", "Low"],
            realtime: false,
            calculable: true,
            color: ["#3ADEF1", "#0089FC", "#0057FE"],
            show: false
          },
          series: [
            {
              type: "map",
              mapType: "huaian",
              roam: false,
              label: {
                normal: {
                  show: true,
                  color: "#fff"
                },
                emphasis: {
                  show: true
                }
              },
              itemStyle: {
                emphasis: { label: { show: true } }
              },
              data: [
                { name: "金湖县", value: 80 },
                { name: "盱眙县", value: 50 },
                { name: "涟水县", value: 80 },
                { name: "洪泽区", value: 70 },
                { name: "淮阴区", value: 80 },
                { name: "淮安区", value: 40 },
                { name: "清江浦区", value: 50 }
              ]
            }
          ]
        });
      });
    </script>
复制代码

如何拿到geo数据

不得不感谢阿里提供的便利点击。你能够得到2种json数据，xxx.json和xxx_full.json。区别在于xxx.json只有当前行政区的轮廓数据，xxx_full.json包含子行政区的数据。

批量下载

手动下载着实麻烦，特提供下载工具。 点此传送门获取全部行政区域的数据。或执行npm run create 从新下载最新数据。