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

一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第9天,点击查看活动详情

说在前面

🎈最近在捣鼓自己的个人博客网站,在管理统计页中想要加入地区用户访问数量统计图📈,原本准备使用饼图进行呈现,但是最后还是选择了呈现效果更好地地图🌎来进行展示。在这里对此功能进行总结,也给大家分享一下在vue中echarts地图的使用,以及如何实现省市下钻联动📝 前面给大家分享过一篇国到省的地图联动demo👉vue + echarts实现中国地图省份下钻联动,现在我将收集来的市级地图资源也整合到了该demo里面,完成了从国到省,再从省到市的三级地图下钻联动。

市级.gif

体验

体验地址:jyeontu.xyz/JDemo/#/chi…

介绍

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

地图资源

首先画出地图的第一步也是最重要一步就是要有对应的地图资源,这里我将所有的地图资源都放在了项目里,具体位置如下: 1649495972(1).png 城市地图数据是这样子的👇 1649496011(1).png 具体代码与城市名的映射关系表可以看这里👇 1649496096(1).png

省级地图跳转事件

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

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

市级地图页面

  • 接收参数 首先我们要先看看省级地图跳转传递过来的参数是什么 1649496452(1).png 我们可以看到传递过来的是城市的名字。
  • 引入城市代码映射表
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);
},

1649496668(1).png

完整代码

<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>

往期精彩

为了学(mo)习(yu),我竟开发了这样一个插件

程序员的浪漫之——情侣日常小程序

JavaScript双向链表实现LRU缓存算法

JavaScript双向链表实现LFU缓存算法

JavaScript实现前缀树

vue简单实现词云图组件

源码地址

Gitee: gitee.com/zheng_yongt…

说在后面

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

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