echarts地图省市两级下钻

地图下钻分四步：

          1.参考echarts画地图，将初始地图显示在界面

          2.封装方法发送请求获取本地静态资源json，文件名通过mapCode进行拼接，以此来获取不同的地图数据

          3.点击地图区域时可以获取到当前区域的名称，将名称与定义的data数据做对比，当名称相同时获取当前区域的mapCode，将获取的值传入方法中去调用方法获取地图数据。

         4.通过@contextmenu.prevent绑定鼠标右击事件，调用方法返回到上一级

<template>

<div class="area"

id="map"

@contextmenu.prevent="backMap"

>

</div>

</template>

//引入axios来请求本地静态资源json

import axios from 'axios'

export default {

data() {

return {

city: [

{

"name": "浙江省",

"id": 33

},

{

"name": "杭州市",

"id": 330100

},

{

"name": "宁波市",

"id": 330200

},

{

"name": "温州市",

"id": 330300

},

{

"name": "嘉兴市",

"id": 330400

},

{

"name": "湖州市",

"id": 330500

},

{

"name": "金华市",

"id": 330600

},

{

"name": "绍兴市",

"id": 330700

},

{

"name": "衢州市",

"id": 330800

},

{

"name": "舟山市",

"id": 330900

},

{

"name": "台州市",

"id": 331000

},

{

"name": "丽水市",

"id": 331100

}

],

mapStack: [],

curMap: {},

cityMap: {},

mapCode: 33,

name: '浙江省',  //最初显示浙江省地图

mapId: '',

}

},

mounted() {

this.getMapId()

this.getCitys()

},

},

methods: {

//根据地区名称获取当前地图json编号，页面第一次加载时为浙江省

getMapId() {

this.city.forEach(e => {

if (this.name == e.name) {

this.mapId = e.id

}

})

//调用地图加载方法，加载地图

this.loadMap(this.mapId, this.name)

},

//地图加载，根据点击的名称对应的mapcode来加载相应区域的地图数据

loadMap(mapCode, mapName) {

axios.get('contents/mock/' + mapCode + '.json').then(res => {

let data = res.data

if (data) {

let myChart = this.$echarts.init(this.$refs.map)

this.cityMap = Object.assign({}, data)

console.log(this.cityMap, data)

this.$echarts.registerMap(mapName, data)

var option = {

tooltip: {

trigger: 'item',

formatter: '{b}'

},

dataRange: {

min: 0,//值域控件最小值

max: 10,//值域控件最大值

calculable: true,//默认为false,设置为true时值域显示为线性渐变

precision: 0,//小数精度，默认为0

color: ['#45A7FF', '#91D5FF', '#0A73DA', '#69C0FF', '#004599', '#0A73DA'],//值域颜色，最少两个

show: false

},

series: [

{

name: '',

type: 'map',

mapType: mapName,

selectedMode: 'single',

zoom: 1.2,

itemStyle: {

normal: { //默认状态

areaColor: '#BAE7FF', //地图本身的颜色

borderColor: '#fff', //省份的边框颜色

borderWidth: 1, //省份的边框宽度

opacity: 0.8, //图形透明度

},

emphasis: { //高亮状态

areaColor: '#91D5FF', //高亮时候地图显示的颜色

borderWidth: 0 //高亮时候的边框宽度

},

},

label: {

normal: {

show: true

},

emphasis: {

show: true

}

},

}

]

};

myChart.setOption(option);

//存储当前地图的信息

this.curMap = {

mapCode: this.mapCode,

mapName: mapName

};

} else {

// alert('无法加载该地图');

}

});

},

 

//点击地图获取的params的值

//克隆后cityMap的值（当前区域地图的json）

//下钻，点击地图区域获取的params与获取到的json数据做比较，如果名称相同则取id

getCitys() {

let myChart = this.$echarts.init(this.$refs.map);

console.log(this.cityMap)

myChart.on('click', (params) => {

let name = params.name;

this.cityMap.features.map((item) => {

console.log(name, item)

if (item.properties.name == name) {

this.mapCode = item.id

}

})

if (!this.mapCode) {

// alert('缺失地图数据');

return;

}

console.log(this.mapCode, name)

this.loadMap(this.mapCode, name);

//将上一级地图信息压入mapStack

this.mapStack.push({

mapCode: this.curMap.mapCode,

mapName: this.curMap.mapName

})

})

},

//鼠标右击返回省级

backMap() {

this.loadMap(33, '浙江')

},

}

}

 

效果图: