代码很简单,就是不会的时候死活不知道怎么写的,而且百度类似的比较详细的不多,不过我最想要的效果是点击放大下钻,有没有知道怎么写的朋友,留个言,感谢啦
1,官网下载echarts,命令就不贴了
2, main.js
import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts
3 ,index.vue
<template>
<div id="main" style="width: 100%;height:800px;"></div>
</template>
<script>
//引入省、市 json文件,后面要通过这个json文件请求指定getjson文件
import shengJSON from '../../../../public/static/mapJSON/sheng.json'
import shiJSON from '../../../../public/static/mapJSON/shi.json'; // 引入 JSON 文件
import china from '../../../../public/static/mapJSON/china.json'; // 引入 JSON 文件
// 34个省、市、自治区的名字拼音映射数组
var provinces = shengJSON //省
var cityMap = shiJSON // 市
// 直辖市和特别行政区没有三级地图
var special = ['北京市', '天津市', '上海市', '重庆市', '香港特别行政区', '澳门特别行政区']
export default {
data() {
return {
myMapChart: undefined,
// 初始化绘制全国地图配置
option: {
backgroundColor: '#404a59',
title: {
left: 'center',
textStyle: {
color: '#fff',
fontSize: 16,
fontWeight: 'normal',
fontFamily: 'Microsoft YaHei'
},
subtextStyle: {
color: '#ccc',
fontSize: 13,
fontWeight: 'normal',
fontFamily: 'Microsoft YaHei'
}
},
// 鼠标悬停显示信息
tooltip: {
trigger: 'item',
formatter: function(params) {
return (
params.seriesName + "<br />" + params.name + ":" + params.value
)
}
},
animationDuration: 1000,
animationEasing: 'cubicOut',
animationDurationUpdate: 1000,
visualMap: {
min: 0,
max: 1000,
text: ['High', 'Low'],
calculable: true,
inRange: {
color: ['#e0ffff', '#006edd']
}
},
}
}
},
mounted() {
// 获取容器初始化echarts并接收echarts对象
this.myMapChart = this.$echarts.init(document.getElementById('main'))
// 初始化地图
this.init()
},
methods: {
/* 初始化地图 */
init() {
// 这是组件开始初始化时需要拉去的数据--中国地图的数据
// 获取所有省份bv
let shengAll = this.getChildMap(china)
// 注册大地图
this.$echarts.registerMap('china', china)
// 绘制地图
this.renderMap('china', shengAll)
// 绑定点击地图区域事件
this.myMapChart.on('click', this.clickMap)
// })
},
/* 地区区域点击事件 */
async clickMap(params) {
let origin=window.location.origin
let centerCoord=''
if (params.name in provinces) {
let res=await this.$axios.get(`${origin}/static/mapJSON/province/${provinces[params.name]}.json`);
centerCoord = res.data.features[0].properties.center; // 替换为实际的中心点坐标字段
if(res.data.features[0].properties.childrenNum==0){
let shengAll = this.getChildMap(china)
this.renderMap('china',shengAll,centerCoord)
return
}
this.$echarts.registerMap(params.name, res.data)
let shiAll = this.getChildMap( res.data)
this.renderMap(params.name, shiAll,centerCoord)
} else if (params.seriesName in provinces) {
console.log("市:" + params.name)
if (special.indexOf(params.seriesName) >= 0) { //直辖市和特别行政区没有下级了,返回大图
this.renderMap('china')
} else {
let res1=await this.$axios.get(`${origin}/static/mapJSON/city/${cityMap[params.name]}.json`);
debugger
centerCoord = res1.data.features[0].properties.center;
this.$echarts.registerMap(params.name, res1.data)
let xianAll = this.getChildMap(res1.data)
this.renderMap(params.name, xianAll,centerCoord)
return
}
} else {
centerCoord = china.features[0].properties.center; // 替换为实际的中心点坐标字段
let shengAll = this.getChildMap(china)
this.renderMap('china',shengAll,centerCoord)
}
},
getChildMap(data) {
let childMapAll = []
for (var i = 0; i < data.features.length; i++) {
childMapAll.push({
name: data.features[i].properties.name,
value: 0
})
}
return childMapAll
},
renderMap(map, data,centerCoord) {
// 标题
this.option.title.subtext = map
this.option.series = [
{
name: map,
type: 'map',
mapType: map,
roam: true, //禁止缩放平移,开启缩放平移下钻时会出现显示问题
data: data,
center: centerCoord,//让地图每次都居中,不跑偏
nameMap: {
china: '中国'
},
// 显示区域地名
label: {
normal: {
show: true,
textStyle: {
color: '#999',
fontSize: 10
}
},
emphasis: {
show: true,
textStyle: {
color: '#fff',
fontSize: 13
}
}
},
itemStyle: {
normal: {
areaColor: '#323c48',
borderColor: 'dodgerblue'
},
// 高亮显示设置
emphasis: {
areaColor: 'darkorange', 鼠标选择区域颜色
}
},
}
]
this.myMapChart.setOption(this.option)
},
}
}
</script>
<style>
html,
body {
height: 100%;
padding: 0px;
margin: 0px;
}
</style>
4,需要把省,市,区,的json文件放到静态文件夹里,用来引用,
用的json文件https://wwk.lanzout.com/iwZ531p52e7a5,效果图
省
点击省,下钻到市
点击市下钻到区