记忆一隅

使用echarts.js生成足迹地图（优化版）

2024-08-30 · 3 min read
折腾

较pyecharts可无缝集成至主题中，无需手动生成更新

之前使用pyecharts制作生成足迹地图过于简陋繁琐，如果需要更新地图，需要手动填写再更新生成，最后替换原有地图，过于繁琐麻烦。最近又好好研究了一番echarts.js，算是让足迹地图的嵌入变得稍微优雅了一些。

地图数据

echarts.js绘图需要GeoJson数据作为绘图数据源，搜索网上，主要都是依赖阿里云的altas平台提供的数据源，不过这里提供的数据都是按照省份分割存储的，没有市级的，又不想做地图的下穿等更复杂的操作，索性写了个小脚本，将GeoJson数据做了下重新拼合，制作了一个按照市级分割的GeoJson数据源。制作好的数据放到的github仓库：https://github.com/wherelse/GeoMapData_ChinaCityProcess 需要市级分割地图的朋友可以下载或者调用china_city.json。

主题修改

  • 在header中引入echarts.js:
<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script>
  • 在需要渲染出地图的位置渲染标签：
<body onresize="resizeFresh()">
<div id="footmap" style="width:95%; height:500px; margin:auto; top:30px"></div>
</body>
  • 在主题文件尾部添加echarts初始化及刷新script：
    <script type="text/javascript">
      var chartDom = document.getElementById("footmap");
      var myChart = echarts.init(chartDom);
      var option;

      myChart.showLoading();
      fetch(
        "https://raw.githubusercontent.com/wherelse/GeoMapData_ChinaCityProcess/master/china_city.json",
        {
          method: "get",
        }
      )
        .then((response) => response.json())
        .then(function (ChinaCityJson) {
          myChart.hideLoading();
          echarts.registerMap("China", ChinaCityJson, {});

          option = {
            title: {
              text: "我的足迹",
              subtext:
                "FootPrint in China\n\n感谢来源于阿里云altas平台的地图数据",
              sublink: "http://datav.aliyun.com/tools/atlas/",
              left: "right",
            },

            visualMap: [
              {
                min: 0,
                max: 1,
                show: false,
                inRange: {
                  // 选中范围中的视觉配置
                  color: ["white","#00AAFF"], // 定义了图形颜色映射的颜色列表，
                },
              },
            ],

            series: [
              {
                name: "China Footprint",
                type: "map",
                map: "China",
                roam: true,
                emphasis: {
                  label: {
                    show: true,
                  },
                },
                data:[
                  {name:"北京市", value: 1},
                  {name:"天津市", value: 1},
                  {name:"南京市", value: 1},
                  //在这里添加更新足迹城市
                ]
              },
            ],
          };
          myChart.setOption(option);
        });

     //窗口大小变化时候，进行刷新页面操作，防止样式混乱
     var x=window.innerWidth;
     function resizeFresh(){
         if(x!=window.innerWidth)
             location.reload();
     }
    </script>
  • 根据自己的足迹更新echarts初始化中的series data中的城市目录即可。渲染效果可参考本博客关于页面

本网站文章版权均为本人所有，未经同意不得私自搬运复制，欢迎注明引用出处的合理转载，图片转载请留言。文章内容仅用于技术研究和探索，不得用于违法目的。

📋阅读量: 0