vue+echarts实现省市区地图下钻

vue+echarts实现省市区地图下钻

<div>
  <div id="china-pic" style="width:100vw,height:100vh">
  </div>
</div>

import * as echarts from "echarts";
import "echarts/map/js/china";
import $ from "jquery";
import {
  provinces,
  cityMap,
  special,
} from "../../../../../public/map/nameList";
require("echarts/theme/macarons"); // echarts theme
data() {
   return {
     chart: null,
     option: {},
     chinaData: [],
     mapStack: [],
   };
 },

getChinaPic 方法在生命周期调用

  getChinaPic() {
      this.chart = echarts.init(document.getElementById("china-pic"));
      let _that = this;
      var mapdata = [];
      $.getJSON("/map/china.json", function (data) {
        let d = [];
        for (var i = 0; i < data.features.length; i++) {
          d.push({
            name: data.features[i].properties.name,
          });
        }
        mapdata = d;
        _that.chinaData = d;
        // 注册地图
        echarts.registerMap("china", data);
        // 绘制地图
        _that.renderMap("china", d, "china", 0, false);
      });
      _that.chart.on("click", function (params) {
        _that.getDownInfo(params, true);
      });
        tooltip: {
          formatter: function (params) {
          },
        },
        animationDuration: 1000, // 这里加上有过度效果
        animationEasing: "cubicOut",// 这里加上有过度效果
        animationDurationUpdate: 1000,// 这里加上有过度效果
      };
    },
     renderMap(map, data, seriesName, level, flag) {
      this.option.geo = { 
      // 这里定义地图 下面series写了 会有两个地图 可以实现大屏伪3D效果
        show: false,
        map: map,
        roam: false,
        zoom: 1, // 地图缩放
        height: "480px",
        width: "100%",
        label: {
          normal: {
            show: false,
        	}
        }，
        // 南海诸岛隐藏 下面的series也要写一份
        // regions: [
        //   {
        //     name: "南海诸岛",
        //     show: false,
        //     itemStyle: {
        //       // 隐藏地图
        //       normal: {
        //         opacity: 0, // 为 0 时不绘制该图形
        //       },
        //     },
        //     label: {
        //       show: false, // 隐藏文字
        //     },
        //   },
        // ],
        itemStyle: {
          normal: {
            show: false,
          },
        },
      };
      this.option.series = [
        {
          name: map,
          type: "map",
          mapType: map,
          zoom: 1,
          map: map,
          height: "480px",
          width: "100%",
          center: ["36%", "50%"],
          roam: false,
          data: data,
          layoutCenter: ["50%", "50%"], //地图位置
          label: {
            show: true,
            color: "red",
          },
        },
      ];
      // 渲染地图
      this.chart.setOption(this.option);
      if (flag) {
        this.mapStack.push({ // 这里是返回上一级做处理
          level: level,
          name: seriesName,
          seriesName: seriesName,
        });
      }
    },
     getDownInfo(params, flag) {
      var _that = this;
      if (params.name in provinces) {
        // 如果点击的是34个省、市、自治区，绘制选中地区的二级地图
        $.getJSON(
          "/map/province/" + provinces[params.name] + ".json",
          function (data) {
            echarts.registerMap(params.name, data);
            var d = [];
            for (var i = 0; i < data.features.length; i++) {
              d.push({
                name: data.features[i].properties.name,
              });
            }
            _that.areaCount = {
              flag: 2,
              province: params.name,
              city: "",
            };
            if (flag) {
              _that.renderMap(params.name, d, params.seriesName, 1, true);
            } else {
              _that.renderMap(params.name, d, params.seriesName, 1, false);
            }
          }
        );
      } else if (params.seriesName in provinces) {
        // 如果是【直辖市/特别行政区】只有二级下钻
        if (special.indexOf(params.seriesName) >= 0) {
          // _that.renderMap('china', mapdata)
        } else {
          // 显示县级地图
          if (typeof cityMap[params.name] != "undefined") {
            $.getJSON(
              "/map/city/" + cityMap[params.name] + ".json",
              function (data) {
                echarts.registerMap(params.name, data);
                var d = [];
                for (var i = 0; i < data.features.length; i++) {
                  d.push({
                    name: data.features[i].properties.name,
                  });
                }
                _that.areaCount = {
                  flag: 3,
                  province: params.seriesName,
                  city: params.name,
                };
                _that.renderMap(params.name, d, params.seriesName, 2, true);
              }
            );
          }
        }
      } else {
        // console.log(params)
        // 点击县级时是否返回
        // _that.renderMap('china', mapdata)
      }
    },