阅读 5939

一站式解决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包含子行政区的数据。

xxx.json xxx_full.json

批量下载

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