vue + echarts实现国省市三级下钻联动-阿里云开发者社区

vue + echarts实现国省市三级下钻联动

2024-02-29 72

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： vue + echarts实现国省市三级下钻联动

说在前面

🎈最近在捣鼓自己的个人博客网站，在管理统计页中想要加入地区用户访问数量统计图📈，原本准备使用饼图进行呈现，但是最后还是选择了呈现效果更好地地图🌎来进行展示。在这里对此功能进行总结，也给大家分享一下在vue中echarts地图的使用，以及如何实现省市下钻联动📝

前面给大家分享过一篇国到省的地图联动demo👉vue + echarts实现中国地图省份下钻联动，现在我将收集来的市级地图资源也整合到了该demo里面，完成了从国到省，再从省到市的三级地图下钻联动。

体验

体验地址：http://jyeontu.xyz/JDemo/#/china

介绍

关于国到省的下钻这里就不在重复一遍了，想了解的可以看这里👉[vue + echarts实现中国地图省份下钻联动]。

地图资源

首先画出地图的第一步也是最重要一步就是要有对应的地图资源，这里我将所有的地图资源都放在了项目里，具体位置如下：

城市地图数据是这样子的👇

具体代码与城市名的映射关系表可以看这里👇

省级地图跳转事件

我们需要监听省级地图的区域点击事件：

this.echartObj.on("click", (params) => {
    this.$router.push({
      path: "/city",
      query: { city: params.name },
    });
});

市级地图页面

接收参数
首先我们要先看看省级地图跳转传递过来的参数是什么

我们可以看到传递过来的是城市的名字。
引入城市代码映射表

import {cityMap} from '@/utils/城市数据/china-main-city-map.js'

因为我们拿到的参数是城市的中文名字，而我们的地图资源是根据城市代码命名，所以我们要根据代码映射表来拿到城市的对应代码。

引入地图资源
根据城市代码加载对应的城市地图资源

initDate(){
  const city = this.$route.query.city
  this.option.title.text = city;
  this.cityName = city;
  const cityId = cityMap[city];
  this.cityJSON = require('../../utils/城市数据/' + cityId + '.json')
  this.option.geo.map = city
  this.echartObj = echarts.init(document.getElementById(this.id))
  echarts.registerMap(city, this.cityJSON)
  this.echartObj.setOption(this.option);
},

完整代码

<template>
  <div>
    <div @click="goBack()">返回</div>
    <div :id="id" class="cityCharts"></div>
  </div>
</template>
<script>
import {cityMap} from '@/utils/城市数据/china-main-city-map.js'
export default {
  name: 'city',
  data () {
    return {
      id: 'echarts_' + new Date().getTime() + Math.floor(Math.random() * 1000),
      echartObj: null,
      option: {
        title: {
          text: '',
          top: '8%',
          left: '8%',
          textStyle: {
            fontSize: 14,
            fontWeight: 300,
            color: '#000'
          }
        },
        tooltip: {
          padding: 0,
          // 数据格式化
          formatter: function (params, callback) {
            return params.name + '：' + (params.value || 0)
          }
        },
        legend: {
          orient: 'vertical',
          top: '9%',
          left: '5%',
          icon: 'circle',
          data: [],
          selectedMode: 'single',
          selected: {},
          itemWidth: 12,
          itemHeight: 12,
          itemGap: 30,
          inactiveColor: '#b6d7ff',
          textStyle: {
            color: '#ec808d',
            fontSize: 14,
            fontWeight: 300,
            padding: [0, 0, 0, 15]
          }
        },
        visualMap: {
          min: 0,
          max: 500,
          left: 'left',
          top: 'bottom',
          text: ['高', '低'], // 取值范围的文字
          inRange: {
            color: ['#e0ffff', 'blue'] // 取值范围的颜色
          },
          show: true // 图注
        },
        geo: {
          map: '',
          roam: false, // 不开启缩放和平移
          zoom: 0.6, // 视角缩放比例
          label: {
            normal: {
              show: true,
              fontSize: 10,
              color: '#000'
            },
            emphasis: {
              show: true,
              color: 'blue',
            }
          },
          itemStyle: {
            normal: {
              borderColor: 'rgba(0, 0, 0, 0.2)'
            },
            emphasis: {
              areaColor: 'skyblue', // 鼠标选择区域颜色
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 20,
              borderWidth: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          },
          left: '5%',
          right: '5%',
          top: '5%',
          bottom: '5%'
        },
        series: [
          {
            name: '城市数据',
            type: 'map',
            geoIndex: 0, // 不可缺少，否则无tooltip 指示效果
            data: []
          }
        ],
        cityJSON: {},
        cityName: ''
      }
    }
  },
  mounted () {
    this.initDate();
    this.resizeListener();
  },
  methods: {
    initDate(){
      const city = this.$route.query.city
      this.option.title.text = city;
      this.cityName = city;
      const cityId = cityMap[city];
      this.cityJSON = require('../../utils/城市数据/' + cityId + '.json')
      this.option.geo.map = city
      this.echartObj = echarts.init(document.getElementById(this.id))
      echarts.registerMap(city, this.cityJSON)
      this.echartObj.setOption(this.option);
    },
    resizeListener(){
      window.addEventListener('resize', () => {
        if (this.echartObj && this.echartObj.resize) {
          this.echartObj.resize()
        }
      })
    },
    goBack () {
      this.$router.go(-1)
    },
  }
}
</script>
<style lang="scss">
.cityCharts {
  height: 400px;
  width: 600px;
  margin: auto;
}
</style>

源码地址

Gitee: gitee.com/zheng_yongt…

说在后面

🎉本文意在分享，有需要地图资源的可以直接到Gitee上自取，地图的相关配置可以到官网看详细的配置表，这里只是粗略的记录一下，希望可以帮到部分有需要的人。

🎉这里是JYeontu，现在是一名前端工程师，有空会刷刷算法题，平时喜欢打羽毛球🏸 ，平时也喜欢写些东西，既为自己记录📋，也希望可以对大家有那么一丢丢的帮助，写的不好望多多谅解🙇，写错的地方望指出，定会认真改进😊，在此谢谢大家的支持，我们下文再见🙌。