vue+eacharts实现三级地图下钻与对应数据显示

首先导入相对应的省市区json文件 与 js文件

<template>
  <div>
    <el-row>
      <el-col :span="16">
        <div id="mapChart"
             class="chart"
             style="width: 100%;height:500px;"></div>
      </el-col>
      <el-col :span="8">
        <el-table :data="tableData">
          <el-table-column label="名称"
                           prop="name"></el-table-column>
          <el-table-column label="个数"
                           prop="value"></el-table-column>
        </el-table>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import * as echarts from 'echarts'
import axios from 'axios'
import cityMap from '../../../public/map/cityMap'
import provinces from '../../../public/map/provinces'
//中国地图（第一级地图）的ID、Name、Json数据
// var chinaId = 100000;
var chinaName = "china";
var chinaJson = null;
//Echarts地图全局变量，主要是在返回上级地图的方法中会用到
var myChart = null;
var provincesName = null;
export default {
  components: {},
  data () {
    return {
      mapChartOption1: {
      },
      tableData: [],
      mapChinaOptions: [
        {
          areaCode: "新疆",
          total: 88
        },
        {
          areaCode: "辽宁",
          total: 1199
        }
      ],
      mapProvincesOptions: [
        {
          areaCode: "大连市",
          total: 3243
        },
        {
          areaCode: "沈阳市",
          total: 33333
        },
      ],
      mapCityOptions: [
        {
          areaCode: "庄河市",
          total: 999999
        },
        {
          areaCode: "瓦房店市",
          total: 7778678
        },
      ]
    };
  },
  computed: {},
  // 监听图表数据的变化
  watch: {
    mapChartOption1: {
      handler (newVal, oldVal) {
        if (myChart) {
          // 如何有变化 就获取最新的数据 并且渲染
          myChart.setOption(newVal);
        } else {
          // 如何无变化 还是老数据
          myChart.setOption(oldVal);
        }
      },
      deep: true,
    },
  },
  methods: {
    mapChart (divid) {
      this.mapData = [];
      var that = this;
      //chinaId 为上边定义的变量 值为100000
      axios({
        url:
          "/map/china.json",
        withCredentials: false,
      }).then((response) => {
        //进入页面后 传递的参数为全国的id 然后向json文件发起请求 找到文件名为100000的json文件
        //获取到全国的地图文件 渲染出来
        const mapJson = response.data;
        for (var i = 0; i < mapJson.features.length; i++) {
          //mapData为定义的变量  获取到当前所以省份地图json文件中的省份名和区域划代码
          this.mapData.push({
            name: mapJson.features[i].properties.name,
            id: mapJson.features[i].id,
            value: 0,
          });
        }
        //   //让json地图文件中的区域划代码和请求返回的行政编码作比较 如果相等 
        //   // 进获取数据进行赋值
        console.log(this.mapData);
        this.mapData.forEach((item) => {
          this.mapChinaOptions.forEach((item1) => {
            if (item.name == item1.areaCode) {
              item.value = item1.total;
            }
          });
        });
        console.log(this.mapData);
        //省份的json数据赋值
        chinaJson = mapJson;
        // console.log(chinaJson);
        //生成图表
        myChart = echarts.init(document.getElementById(divid));
        //把上边的数据 都当做参数传递给 函数中
        this.registerAndsetOption(myChart, chinaName, mapJson);
        const list1 = []
        this.mapData.forEach(item => {
          console.log(item);
          if (item.value !== 0) {
            list1.push({
              name: item.name,
              value: item.value
            })
          }
        })
        this.tableData = list1
        this.mapChartOption1.series[0].data = this.mapData;

        // //这里为当点击某个省份或城市的时候的点击事件
        myChart.on("click", function (param) {
          that.show = 0;
          that.mapData2 = [];
          provincesName = provinces.provinces[param.name]
          // 获取到当前点击的这个城市的 code
          //如果有这个城市的id 就可以请求json 获取子级地图信息
          if (provincesName) {
            if (provincesName) {
              //代表有下级地图
              axios({
                url:
                  "/map/province/" +
                  provincesName +
                  ".json",
                withCredentials: false,
              }).then((response) => {
                // 获取到城市新的json数据
                const mapJson = response.data || response;
                that.mapData2 = [];
                //重新获取相同的数据 给 that.mapData2赋值
                for (var i = 0; i < mapJson.features.length; i++) {
                  that.mapData2.push({
                    name: mapJson.features[i].properties.name,
                    value: 0,
                  });
                }
                that.mapData2.forEach((item) => {
                  that.mapProvincesOptions.forEach((item1) => {
                    if (item.name == item1.areaCode) {
                      item.value = item1.total;
                    }
                  });
                });
                const list2 = []
                that.mapData2.forEach(item => {
                  console.log(item);
                  if (item.value !== 0) {
                    list2.push({
                      name: item.name,
                      value: item.value
                    })
                  }
                })
                that.tableData = list2
                //重新调用 生成新的地图
                that.registerAndsetOption(myChart, param.name, mapJson);
                that.mapChartOption1.series[0].data = that.mapData2;

              });
            } else {
              that.show = 1;
              // 如果没有就在最后一级 再次点击返回中国地图
              //把上边的数据 都当做参数传递给 函数中
              that.registerAndsetOption(myChart, chinaName, mapJson);
              //返回中国地图 并且把数据重新赋值 给data 防止返回的时候 data数据为空了
              that.tableData = that.list1
              that.mapChartOption1.series[0].data = that.mapData;
            }
          } else {
            let cityId = cityMap.cityMap[param.name]
            that.mapData3 = [];
            if (cityId) {
              //代表有下级地图
              axios({
                url:
                  "/map/city/" +
                  cityId +
                  ".json",
                withCredentials: false,
              }).then((response) => {
                // 获取到城市新的json数据
                const mapJson = response.data
                console.log(mapJson);
                for (var i = 0; i < mapJson.features.length; i++) {
                  that.mapData3.push({
                    name: mapJson.features[i].properties.name,
                    id: mapJson.features[i].id,
                    value: 0,
                  });
                }
                that.mapData3.forEach((item) => {
                  that.mapCityOptions.forEach((item1) => {
                    if (item.name == item1.areaCode) {
                      item.value = item1.total;
                    }
                  });
                });
                const list3 = []
                that.mapData3.forEach(item => {
                  console.log(item);
                  if (item.value !== 0) {
                    list3.push({
                      name: item.name,
                      value: item.value
                    })
                  }
                })
                that.tableData = list3
                //重新调用 生成新的地图
                that.registerAndsetOption(myChart, param.name, mapJson);
                that.mapChartOption1.series[0].data = that.mapData3;
                //把数据传递给图表data
              });
            } else {
              that.show = 1;
              // 如果没有就在最后一级 再次点击返回中国地图
              //把上边的数据 都当做参数传递给 函数中
              that.registerAndsetOption(myChart, chinaName, mapJson);
              //返回中国地图 并且把数据重新赋值 给data 防止返回的时候 data数据为空了
              that.tableData = list1
              that.mapChartOption1.series[0].data = that.mapData;
            }
          }

        });
      });
    },


    registerAndsetOption (myChart, name, mapJson) {
      //把获取到的城市name和 城市地图json 用来注册地图
      echarts.registerMap(name, mapJson);
      // console.log(name, mapJson);

      //图表的配置文件
      this.mapChartOption1 = {
        //鼠标放置在地图上的显示
        tooltip: {
          trigger: "item",
          formatter: (p) => {
            // console.log('guo');
            // console.log(p);
            //这里p可以获取到所有的数据
            let val = p.value;
            if (window.isNaN(val)) {
              val = 0;
            }
            let txtCon =
              "<div style='text-align:center'>" +
              p.name +
              ":<br />总数：" +
              val +
              "</div>";
            return txtCon;
          },
        },
        series: [
          {
            type: "map",
            map: name,
            itemStyle: {
              normal: {
                //未选中样式
                //背景颜色
                areaColor: "#909399",
                //边框颜色
                borderColor: "#fbfdfe",
                //边框宽度
                borderWidth: 1,
              },
              emphasis: {
                // 选中样式
                borderWidth: 1,
                //高亮颜色
                areaColor: "#2062e6",
                label: {
                  //显示文字
                  show: true,
                  textStyle: {
                    //鼠标移入的字体颜色
                    color: "black",
                  },
                },
              },
            },

            data: [],
          },
        ],
      };
      // console.log("111");
      // console.log(this.mapChartOption1);
      // option && myChart.setOption(this.mapChartOption1);
      myChart.setOption(this.mapChartOption1, true);
      // alert('1')
    },
  },
  created () {
  },
  //  图表宽度自适应
  mounted () {
    this.mapChart("mapChart");
    // 自适应
    window.onresize = () => {
      myChart.resize();
    };
  },
}
</script>
<style scoped>
</style>