Echarts中国和省份地图(个人笔记)
2022-07-26 本文已影响0人
kevision
<template>
<div>
<div id="myChart" style="width: 100vw;height:100vh;"></div>
</div>
</template>
<script>
// 现在下载Echarts好像没有json文件了,需要自己去下载
import chinaJson from 'echarts/map/json/china.json'
export default {
data() {
return {
myChart: '',
province: '',
province: {
"北京": "beijing",
"天津": "tianjin",
"上海": "shanghai",
"重庆": "chongqing",
"河北": "hebei",
"河南": "henan",
"云南": "yunnan",
"辽宁": "liaoning",
"黑龙江": "heilongjiang",
"湖南": "hunan",
"安徽": "anhui",
"山东": "shandong",
"新疆": "xinjiang",
"江苏": "jiangsu",
"浙江": "zhejiang",
"江西": "jiangxi",
"湖北": "hubei",
"广西": "guangxi",
"甘肃": "gansu",
"山西": "shanxi",
"内蒙古": "neimenggu",
"陕西": "shanxi1",
"吉林": "jilin",
"福建": "fujian",
"贵州": "guizhou",
"广东": "guangdong",
"青海": "qinghai",
"西藏": "xizang",
"四川": "sichuang",
"宁夏": "ningxia",
"海南": "hainan",
"台湾": "taiwan",
"香港": "xianggang",
"澳门": "aomen"
},
}
},
created() {
},
mounted() {
this.initMap('china', chinaJson)
this.myChart.on('click', (e) => {
this.handleGetProvince(e)
})
},
methods: {
// 初始化地图
initMap(name, json) {
this.myChart = this.$echarts.init(document.getElementById('myChart'))
this.$echarts.registerMap(name, json)
var option = { // 配置option.geo才能显示地图
geo: {
map: name,
itemStyle: {
areaColor: 'skyblue',
color: '#fff',
borderColor: '#fff',
},
selectedMode: 'single',
label: {
show: true, // 显示省份名称
position: 'left',
},
emphasis: {
label: {
color: '#fff'
},
itemStyle: {
color: '#1e90ff'
}
},
roam: true, // 滚轮缩放
scaleLimit: { // 缩放大小限制
min: 1,
max: 3
}
},
tooltip: {
triggerOn: "mousemove",
formatter: function (e) {
return e.name
}
},
series: [{ // 配置series后tooltip才能生效
name: "省份",
type: "map",
geoIndex: 0,
data: []
}],
}
this.myChart.resize()
// 使用刚指定的配置项和数据显示图表。
this.myChart.setOption(option);
},
},
}
</script>
点击切换省份地图
// 点击地图生成省份地图——根据name匹配相应省份json文件
handleGetProvince(val) {
chinaJson.features.forEach(i => {
if (i.properties.name === val.name) {
let json = require('echarts/map/json/province/'+this.province[val.name]+'.json')
this.myChart.clear()
this.initMap(this.province[val.name], json)
}
})
}