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