vue+echarts实现省市县三级联动、以及类似地图的聚合功能

一、效果图如下：

 

 

 二、数据准备：

1、全国、各省份以及区县的Json数据（具体视业务而定）

三、实现方式：

1、联动的实现是比较简单的，我这边是根据点击行政区域来跳转到，然后根据按钮来回到上一级。

2、其次是聚合，这里echarts实现的聚合跟传统leaflet、openlayer等Gis框架有所不同，后者是根据缩放比例来控制聚合点的个数和内部数量显示；  而我这里实际上就是根据数量的差异来控制显示大小，不是根据缩放来动态改变，而是在改变显示区域等级时由后端返回区域显示数据。

3、总体实现步骤如下：

（1）data:

 data1、2、3用来存储省市县三级数据，毕竟每次加载都走请求的话也是毕竟较慢的

mychart是图表对象

products是数据集合，单个包含areaId和count两个字段

[{

    "areaId": 410000,

    "count": 1

},{

    "areaId": 420000

    "count": 5

},{

    "areaId": 430000,

    "count": 8

}]

stop_level是否当前区域级别，对应关系如data

（2）代码：

mounted() {
    let _this = this;
    this.myChart = echarts.init(document.getElementById("echartMap"));
    axios
      .get("../geoJson/100000.json")
      .then((res) => {
        _this.data1 = res.data
        _this.activeAdcode = 0
        _this.drawEchart(res.data);
      })
      .catch((err) => {
        console.log(err);
      });
  },
  destroyed() {
    this.myChart.dispose()
  },
  watch: {
    stop_level(newV,oldV) {
      if (newV === 2 || newV === 3) {
        this.$emit('btnControl',true)
      } else if (newV ===1) {
        this.$emit('btnControl',false)
      }
    },
    activeAdcode(newV) {
      this.ready = false
      let param = {
        "code": newV,
        "level": this.stop_level-1
      }
      this.getPointsData(param)
    }
  },
  methods: {
    drawEchart(data) {
      let _this = this
      echarts.registerMap("全国", data);  // 注册地图数据
          const option = {
            geo: {
              map: "全国",
              roam: true, //控制拖动及缩放
              zoom: 2,
              scaleLimit: {
                min: 1,
                max: 18,
              },
              label: { show: true },
              // silent: true, // 关闭悬浮事件
              itemStyle: {
                // 定义样式
                normal: {
                  // 普通状态下的样式
                  areaColor: "#f8f8f8",
                  borderColor: "#a4a4a4",
                },
              },
            },
            color: ["#FF7B16"],
            legend: {
              show: true,
              orient: "vertical",
              y: "bottom",
              x: "left",
              data: [
                {
                  name: "项目",
                },
              ],
            },
            tooltip: {
              trigger: "item",
              formatter: function (params) {
                return params.name;
              },
            },
            series: [
              {
                name: "项目",
                type: "scatter",
                coordinateSystem: "geo",
                data: _this.products,
                symbolSize: (value,param) => {
                  let px = param.data.childrenNum*5 + 5
                  return px>60? 60: px
                },
                tooltip: {
                    formatter: (param) => {
                      return `地点： ${param.data.name};`+ '\n' + `项目数：${param.data.childrenNum};`
                    },
                    extraCssText:'width:120px; white-space:pre-wrap'
                },
                label: {
                    show: true,
                    formatter: (param) => {
                      return param.data.childrenNum
                    },
                    emphasis: {
                        show: true,
                    },
                },
              },
            ],
          };
          // 使用刚指定的配置项和数据显示图表。
          this.myChart.setOption(option, true);
          this.myChart.off('click');// 这里使用off避免重复调用
          this.myChart.on('click', (param,value) => {
            let data,url;
            switch(this.stop_level) {
              case 1:
                data = this.data1
                break
              case 2:
                data = this.data2
                break
              case 3:
                data = this.data3
            }
            const item = this.getItemByName(data.features,param.name)
            if(this.stop_level === 1) {
              url = `../geoJson/${item.properties.adcode}/province.json`
            } else {
              url = `../geoJson/${item.properties.parent.adcode}/${item.properties.adcode}.json`
            }
            axios
            .get(url)
            .then((res) => {
              if(this.stop_level<3) this.stop_level += 1
              if(this.stop_level === 2) {
                this.data2 = res.data
              } else if (this.stop_level === 3) {
                this.data3 = res.data
              } else if (this.stop_level === 1) {
                this.data1 = res.data
              }
              this.activeAdcode = item.properties.adcode
              //取消加过渡效果
              // this.myChart.dispose()
              this.myChart.clear()
              this.drawEchart(res.data);
            })
            .catch((err) => {
              this.$message.warning('暂无行政区划数据！')
            });
          })
        }
    },
    goBack() {
      if(this.stop_level === 3) {
        this.drawEchart(this.data2)
        this.stop_level = 2
        this.activeAdcode = this.data2.features[0].properties.parent.adcode
      } else if(this.stop_level === 2) {
        this.drawEchart(this.data1)
        this.stop_level = 1
        this.activeAdcode = 0
      }
    },

结束！如果对您有帮助，可以点赞加关注，欢迎各位道友在评论区留言讨论