简述功能概要

最近有需求做一个数据可视化的功能 会具体显示全国各地区的买家分布情况 

鼠标放置在地图上会显示当前城市的分布人数 点击当前省份会下钻到城市地图 会显示当前省市下各个城市的买家数和分布情况

如果遇到没有下一级再次点击会进行返回到国家地图(目前该示例图是两级下钻 省>区市 )(还可以实现点击按钮返回到上一级)

右侧数据表会跟随城市的切换而进行动态切换(无视数据的准确性) 

准备工作

首先需要所有城市地图的json文件和一个城市行政区域划代码的js文件(本文件请求使用)(如有需要可跟与我联系) 

获取到当前json和js文件之后需要把json文件放置在服务器中 进行请求回去当前某个城市的json地图文件,亦可放置在static中进行axios请求获取,js文件放置在本地的assets中进行获取

准备好这两项工作后 我们可以开始进行书写代码 生成echarts地图图表

生成地图图表

import cityMap from "../../../assets/map/china-main-city-map.js";
import echarts from "echarts";

首先在vue文件中引入echarts和区域代码js文件.

//中国地图（第一级地图）的ID、Name、Json数据
var chinaId = 100000;
var chinaName = "china";
var chinaJson = null;
//Echarts地图全局变量，主要是在返回上级地图的方法中会用到
var myChart = null;
var cityId = null;

定义变量使用

具体实现代码(以及实现步骤)

 <div id="mapChart" class="chart"></div>

  mapChart(divid) {
      this.mapData = [];
      var that = this;
        //chinaId 为上边定义的变量 值为100000
      Vue.axios({
        url:
          "https://gdsoft-/echart/map/" +
          chinaId +
          ".json",
        withCredentials: false,
      }).then((response) => {
        //进入页面后 传递的参数为全国的id 然后向json文件发起请求 找到文件名为100000的json文件
         //获取到全国的地图文件 渲染出来
        const mapJson = response.data;
        //调用数据获取省份数据
        let data = {
          from: this.allStartDate,
          to: this.allEndDate,
          areaCode: chinaId,
        };

        Vue.axios({
          method: "POST",
          serviceId: "mall",
          url: "123456789",
          data,
        }).then((res) => {
        //这里为右侧的table数据展示   
        //发起请求 获取到全国的省市的json数据
          this.mapChinaOptions = res.result;
          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地图文件中的区域划代码和请求返回的行政编码作比较 如果相等 
            // 进获取数据进行赋值
          this.mapData.forEach((item) => {
            this.mapChinaOptions.forEach((item1) => {
              if (item.id == item1.areaCode) {
                item.value = item1.buyerCount;
              }
            });
          });
        });

        //省份的json数据赋值
        chinaJson = mapJson;
        //生成图表
        myChart = echarts.init(document.getElementById(divid));
        //把上边的数据 都当做参数传递给 函数中
        this.registerAndsetOption(myChart, chinaName, mapJson);
        this.mapChartOption.series[0].data = this.mapData;

        //这里为当点击某个省份或城市的时候的点击事件
        myChart.on("click", function (param) {
          that.show = 0;
          that.mapData2 = [];
          cityId = cityMap[param.name];
          // 获取到当前点击的这个城市的 code
          //如果有这个城市的id 就可以请求json 获取子级地图信息
          if (cityId) {
            //代表有下级地图
            Vue.axios({
              url:
                "https://gds/echart/map/" +
                cityId +
                ".json",
              withCredentials: false,
            }).then((response) => {
              // 获取到城市新的json数据
              const mapJson = response.data || response;
              this.getCityData = response.data || response;

              let data = {
                from: that.allStartDate,
                to: that.allEndDate,
                areaCode: cityId,
              };
              Vue.axios({
                method: "POST",
                serviceId: "mall",
                url: "123456789",
                data,
              })
                .then((res) => {
                  if (res.success) {
                    that.mapData2 = [];
                    this.mapCityOptions = res.result;
                    that.payDataList = res.result;
                    //重新获取相同的数据 给 that.mapData2赋值
                    for (var i = 0; i < this.getCityData.features.length; i++) {
                      that.mapData2.push({
                        name: this.getCityData.features[i].properties.name,
                        id: this.getCityData.features[i].id,
                        value: 0,
                      });
                    }
                    that.mapData2.forEach((item) => {
                      this.mapCityOptions.forEach((item1) => {
                        if (item.id == item1.areaCode) {
                          item.value = item1.buyerCount;
                        }
                      });
                    });

                    //重新调用 生成新的地图
                    that.registerAndsetOption(myChart, param.name, mapJson);
                    //把数据传递给图表data
                    that.mapChartOption.series[0].data = that.mapData2;
                  } else {
                    Message.error("获取买家地域分布数据失败,请稍后重试!");
                  }
                })
                .catch((err) => {
                  Message.error("获取买家地域分布数据失败,请稍后重试!");
                });
            });
          } else {
            that.show = 1;
            // 如果没有就在最后一级 再次点击返回中国地图
            //把上边的数据 都当做参数传递给 函数中
            that.registerAndsetOption(myChart, chinaName, mapJson);
            //返回中国地图 并且把数据重新赋值 给data 防止返回的时候 data数据为空了
            that.mapChartOption.series[0].data = that.mapData;
          }
        });
      });
    },
    

    registerAndsetOption(myChart, name, mapJson) {
      //把获取到的城市name和 城市地图json 用来注册地图
      echarts.registerMap(name, mapJson);
      //图表的配置文件
      this.mapChartOption = {
        //鼠标放置在地图上的显示
        tooltip: {
          trigger: "item",
          formatter: (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: "#e8effd",
                //边框颜色
                borderColor: "#fbfdfe",
                //边框宽度
                borderWidth: 1,
              },
              emphasis: {
                // 选中样式
                borderWidth: 1,
                //高亮颜色
                areaColor: "#2062e6",
                label: {
                  //显示文字
                  show: false,
                  textStyle: {
                    //鼠标移入的字体颜色
                    color: "black",
                  },
                },
              },
            },

            data: [],
          },
        ],
      };
      myChart.setOption(this.mapChartOption, true);
    },

图表宽度自适应
  mounted() {
    this.mapChart("mapChart");
    // 自适应
    window.onresize = () => {
      myChart.resize();
    };
  },

  // 监听图表数据的变化
  watch: {
  
    mapChartOption: {
      handler(newVal, oldVal) {
        if (myChart) {
          // 如何有变化 就获取最新的数据 并且渲染
          myChart.setOption(newVal);
        } else {
          // 如何无变化 还是老数据
          myChart.setOption(oldVal);
        }
      },
      deep: true,
    },
  },

具体的实现步骤可以看代码有步骤的具体实现和业务代码

简述具体思路

当前有一个本地的行政区域划代码的js文件  和 一个地图城市信息的json文件

初始化的时候会获取全国的区域代码 然后和 json文件中的区域代码匹配 然后请求匹配的json文件

会获取到全国的地图信息 通过 echarts渲染出来

当点击具体省份的时候 会获取当前省份的 区域代码 和 json文件的区域代码匹配 然后请求匹配的json文件

会获取到省市的地图信息 通过 echarts渲染出来

三级下钻同理

如果点击没有下一级城市 会重新获取全国的地图文件 相当于返回 

具体有问题可以与我联系 新人一个 勿喷

因为文章别其他人和平台转载抄袭 所以需要打赏发地图JSON文件哦 

谢谢 写文章不易 谢谢打赏