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

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

目录
相关文章
|
10天前
|
存储 数据可视化 前端开发
Echarts+vue+java+mysql实现数据可视化
Echarts+vue+java+mysql实现数据可视化
|
11天前
|
JavaScript
如何在vue添加echarts图表
如何在vue添加echarts图表
21 0
|
11天前
|
SQL JavaScript 分布式数据库
使用Vue+ ECharts进行动态图表展示
Vue是一个用于构建用户界面的渐进式JavaScript框架,可以轻松构建单页面应用程序(SPA)。ECharts是一个基于JavaScript的数据可视化库,可以通过简单的配置实现各种图表的展示和交互。
103 0
|
11天前
|
JavaScript
Vue引入Echarts图表的使用
Vue引入Echarts图表的使用
|
11天前
|
Web App开发 前端开发 JavaScript
Spring Boot整合 mybatisplus(后端) Vue+echarts+Element UI+axios(前端)---前后端项目实例demo
Spring Boot整合 mybatisplus(后端) Vue+echarts+Element UI+axios(前端)---前后端项目实例demo
38 1
|
11天前
|
JavaScript 数据可视化 前端开发
Vue整合HighCharts和ECharts实现数据可视化
Vue整合HighCharts和ECharts实现数据可视化
31 0
|
11天前
|
JSON JavaScript 定位技术
Vue中使用echarts@4.x中国地图及AMap相关API的使用
Vue中使用echarts@4.x中国地图及AMap相关API的使用
204 0
Vue中使用echarts@4.x中国地图及AMap相关API的使用
|
11天前
|
JavaScript 容器
vue echarts图表自适应屏幕变化
vue echarts图表自适应屏幕变化
75 0
|
11天前
|
数据可视化
echarts图表坐标轴数据标签添加下划线
echarts图表坐标轴数据标签添加下划线
75 0
|
11天前
|
前端开发 JavaScript BI
Django教程第5章 | Web开发实战-数据统计图表(echarts、highchart)
使用echarts和highcharts图表库实现折线图、柱状图、饼图和数据集图
74 2