说在前面
🎈最近在捣鼓自己的个人博客网站，在管理统计页中想要加入地区用户访问数量统计图📈，原本准备使用饼图进行呈现，但是最后还是选择了呈现效果更好地地图🌎来进行展示。在这里对此功能进行总结，也给大家分享一下在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，现在是一名前端工程师，有空会刷刷算法题，平时喜欢打羽毛球🏸 ，平时也喜欢写些东西，既为自己记录📋，也希望可以对大家有那么一丢丢的帮助，写的不好望多多谅解🙇，写错的地方望指出，定会认真改进😊，在此谢谢大家的支持，我们下文再见🙌。
