vue中使用Echarts map图实现下钻至县级的思路详解

今天给大家分享echarts map地图下钻至县级，因为项目需求需要实现 map 图下钻至县级，也找了很多博客，但是基本都是同一篇博客。

好在最终还是实现了，先上动图：

基本思路都是一致的，获取鼠标点击的参数跳转至指定的 json

需要注意的是，因为我是直接从 vue-cli2 直接跳到 vue-cli4 ，还奇怪怎么读取不到json，查找后才知道 vue-cli3 往后的项目基础架构对比旧版本有些区别。

以前大家都习惯在根目录下的 static文件夹下创建 json 文件，vue-cli3、4没有 static文件夹了，创一个 static文件夹在下面也不行，结果会报错，请求 404找不到文件。

正确的路径是在 public 文件夹下引入

话不多说，步骤如下：

　　1 – 首先初始化全国 map

initecharts("china");
      function initecharts(map) {
        let option = {
          geo: {
            map: map,
            roam: false,
            scalelimit: {
              min: 1.2,
              max: 3
            },
            zoom: 1.2,
            //图形上的文本标签，可用于说明图形的一些数据信息
            label: {
              normal: {
                show: true,
                fontsize: "10",
                color: "rgba(0,0,0,0.7)"
              }
            },
            //地图区域的多边形 图形样式，有 normal 和 emphasis 两个状态
            itemstyle: {
              //normal 是图形在默认状态下的样式；
              normal: {
                bordercolor: "rgba(0, 0, 0, 0.2)"
              },
              //emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时。
              emphasis: {
                areacolor: "#f3b329",
                shadowoffsetx: 0,
                shadowoffsety: 0,
                shadowblur: 20,
                borderwidth: 0,
                shadowcolor: "rgba(0, 0, 0, 0.5)"
              }
            }
          },
          series: [
            {
              name: "信息量",
              type: "map",
              //这里是'china',及因为js中注册的名字，如果是上海市，则该出需pname 指的是'shanghai'
              maptype: map,
              geoindex: 0
              // data: datalist
            }
          ]
        };
        mychart.setoption(option);
      }

　　2 – 定义省份及市区数组，由于太长了我就不放了 （后面需要引用对应的json，这些 json 和源码 我会打包到 github ，需要自取）

　　3 – 点击事件

// 点击触发
      mychart.on("click", param => {
        if (param.name in provinces) {
          // 处理省模块
          let names = param.name;
          for (let key in provinces) {
            if (names == key) {
              showprovince(provinces[key], key);
              break;
            }
          }
        } else if (param.name in citymap) {
          // 处理市模块
          let names = param.name;
          for (let key in citymap) {
            if (names == key) {
              showcitys(citymap[key], key);
              break;
            }
          }
        }
      });

　　4 – 渲染 map

//展示对应的省
      function showprovince(ename,param) {
        console.log(ename, param)
        $.getjson(`/map/province/${ename}.json`, data=>{
          that.$echarts.registermap(param, data);
          alert("省")
          initecharts(param);
        })
      }
      //展示对应市
      function showcitys(cname, param) {
        console.log(cname, param)
        // 显示县级地图
        $.getjson(`/map/city/${cname}.json`, data=>{
          that.$echarts.registermap(param, data);
          alert("县")
          initecharts(param);
        })
      }

写在最后：

　　代码有很多还需要优化的地方，但是暂解了我的燃眉之急，毕竟我还是个毕业不久的切图仔，源码放在下面，希望能帮到大家 —-https://github.com/ruanchon/mapchart

到此这篇关于vue中使用echarts map图实现下钻至县级的文章就介绍到这了,更多相关vue echarts map图下钻至县级内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章希望大家以后多多支持www.887551.com！