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, '浙江')
},
}
}
?
效果圖:
總結
以上是生活随笔為你收集整理的echarts地图省市两级下钻的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 弘辽科技：淘宝店铺装修多少钱一个月？总共
- 下一篇： 警方通报西北工业大学遭境外黑客攻击，敲响