2023-11-22
2023-11-21 本文已影响0人
passerbyli
<template>
<div>
<div class="title">Echarts中国地图三级钻取</div>
<div class="box">
<button class="backBtn" @click="back()">返回上级</button>
<div id="mapChart" class="chart"></div>
</div>
<div class="myBlog">
<a href="https://dongkelun.com" target="_blank" title="伦少的博客">
<img src="https://dongkelun.com/img/favicon.ico" alt="伦少的博客">
伦少的博客
</a>
</div>
<div class="bottom">
<a href="https://github.com/dongkelun/vue-echarts-map" target="_blank" title="点我查看源码">
<svg height="26" viewBox="0 0 16 16" version="1.1" width="26" aria-hidden="true">
<path
fill-rule="evenodd"
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47
7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72
1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18
1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54
1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"
></path>
</svg>
</a>
</div>
</div>
</template>
<script>
import cityMap from "@/js/china-main-city-map.js";
import echarts from "echarts";
import axios from "axios";
import Vue from "vue";
// import registerAndsetOption from '@/js/echarts-map'
//中国地图（第一级地图）的ID、Name、Json数据
var chinaId = 100000;
var chinaName = "china";
var chinaJson = null;
//记录父级ID、Name
var mapStack = [];
var parentId = null;
var parentName = null;
let arr =
[{name: "北京", area: "华北"},
{name: "天津", area: "华北"},
{name: "河北", area: "华北"},
{name: "山西", area: "华北"},
{name: "内蒙古", area: "华北"},
{name: "辽宁", area: "东北"},
{name: "黑龙江", area: "东北"},
{name: "吉林", area: "东北"},
{name: "上海", area: "华东"},
{name: "安徽", area: "华东"},
{name: "山东", area: "华东"},
{name: "台湾", area: "华东"},
{name: "浙江", area: "华东"},
{name: "福建", area: "华东"},
{name: "江苏", area: "华东"},
{name: "云南", area: "西南"},
{name: "重庆", area: "西南"},
{name: "贵州", area: "西南"},
{name: "西藏", area: "西南"},
{name: "四川", area: "西南"},
{name: "广西", area: "中南"},
{name: "河南", area: "中南"},
{name: "湖南", area: "中南"},
{name: "湖北", area: "中南"},
{name: "广东", area: "中南"},
{name: "甘肃", area: "西北"},
{name: "陕西", area: "西北"},
{name: "青海", area: "西北"},
{name: "宁夏", area: "西北"},
{name: "新疆", area: "西北"},
{name: "江西", area: "中南"},
{name: "海南", area: ""},
{name: "香港特别行政区", area: ""},
{name: "澳门特别行政区"}
]
//Echarts地图全局变量，主要是在返回上级地图的方法中会用到
var myChart = null;
export default {
name: "chinaMap",
props: {
msg: String
},
mounted: function () {
this.mapChart("mapChart");
},
methods: {
/**
* 返回上一级地图
*/
back() {
if (mapStack.length != 0) {
//如果有上级目录则执行
var map = mapStack.pop();
axios
.get("./static/json/map/" + map.mapId + ".json", {})
.then(response => {
const mapJson = response.data;
registerAndsetOption(
myChart,
map.mapId,
map.mapName,
mapJson,
false
);
//返回上一级后，父级的ID、Name随之改变
parentId = map.mapId;
parentName = map.mapName;
});
}
},
/**
* Echarts地图
*/
mapChart(divid) {
axios.get("./static/json/map/" + chinaId + ".json", {}).then(response => {
const mapJson = response.data;
chinaJson = mapJson;
myChart = echarts.init(document.getElementById(divid));
registerAndsetOption(myChart, chinaId, chinaName, mapJson, false);
parentId = chinaId;
parentName = "china";
myChart.on("click", function (param) {
var cityId = cityMap[param.name];
if (cityId) {
//代表有下级地图
axios
.get("./static/json/map/" + cityId + ".json", {})
.then(response => {
const mapJson = response.data;
registerAndsetOption(
myChart,
cityId,
param.name,
mapJson,
true
);
});
} else {
//没有下级地图，回到一级中国地图，并将mapStack清空
registerAndsetOption(myChart, chinaId, chinaName, chinaJson, false);
mapStack = [];
parentId = chinaId;
parentName = chinaName;
}
// $.get('./asset/json/map/'+param.data.id+'.json', function (mapJson,status) {
// registerAndsetOption(myChart,param.data.id,param.name,mapJson,true)
// }).fail(function () {
// registerAndsetOption(myChart,chinaId,'china',chinaJson,false)
// });
});
myChart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
name: '四川'
})
myChart.on("mouseover", function (params) {
// console.log(params)
if (params.data && params.data.selected) {
myChart.dispatchAction({
type: 'select',
seriesIndex: 0,
name: params.data.name
})
} else {
myChart.dispatchAction({
type: "unselect",
seriesIndex: 0,
name: params.data.name
})
}
let area = {}
let _temp = arr.filter(item => item.name === params.name)
let areaList = []
let noareaList = []
if (_temp.length > 0) {
area = _temp[0]
}
areaList = arr.filter(item => item.area === area.area)
noareaList = arr.filter(item => item.area !== area.area)
if (areaList.length > 0) {
// console.log(areaList.map(item => item.name))
// console.log(noareaList.map(item => item.name))
myChart.dispatchAction({
type: 'highlight',
// seriesIndex: 0,
name: areaList.map(item => item.name)
})
} else {
}
myChart.dispatchAction({
type: 'downplay',
seriesIndex: 0,
name: noareaList.map(item => item.name)
})
})
myChart.on("mouseout", function (params) {
myChart.dispatchAction({
type: 'downplay',
seriesIndex: 0,
name: arr.map(item => item.name)
})
})
});
}
}
};
/**
*
* @param {*} myChart
* @param {*} id 县Id
* @param {*} name 县名称
* @param {*} mapJson 地图Json数据
* @param {*} flag 是否往mapStack里添加parentId，parentName
*/
function registerAndsetOption(myChart, id, name, mapJson, flag) {
echarts.registerMap(name, mapJson);
myChart.setOption({
width: 800,
height: 600,
geo:
{
show: false,
label: {
emphasis: {
show: false
}
},
room: true,
itemStyle: {
emphasis: {
areaColor: "#2a333d"
},
normal: {
opacity: 1,
backgroundColor: "#000",
borderWidth: 3,
areaColor: "#f8911b"
}
}
}
,
regions: arr,
// tooltip:{
// trigger:'item',
// formatter:function (params){
// // console.log('')
// return 'xxxasdadaq'
// }
// },
series: [
{
type: "map",
map: name,
roam: true,
itemStyle: {
normal: {
areaColor: "#fff",
borderColor: "#fff",
borderWidth: 0
}
},
label: {
normal: {
show: true,
formatter: function (param) {
if (param.name === '新疆') {
return '{div|西部}'
} else {
return ''
}
},
rich: {
div: {
color: '#f00'
}
}
}
},
data: initMapData(mapJson)
//data: arr
// [
// { name: "新疆"},
// {name: "西藏"}
// ]
}
]
});
if (flag) {
//往mapStack里添加parentId，parentName,返回上一级使用
mapStack.push({
mapId: parentId,
mapName: parentName
});
parentId = id;
parentName = name;
}
}
function initMapData(mapJson) {
var mapData = [];
for (var i = 0; i < mapJson.features.length; i++) {
mapData.push({
name: mapJson.features[i].properties.name
//id:mapJson.features[i].id
});
}
return mapData;
}
</script>
<style>
body {
background-image: url("../../assets/beijingtupian.png");
}
</style>
<style scoped>
.title {
width: 100%;
height: 10vh;
text-align: center;
color: #fff;
font-size: 2em;
line-height: 10vh;
}
.box {
position: absolute;
width: 90%;
height: 80vh;
left: 5%;
top: 10%;
background-color: rgba(24, 27, 52, 0.62);
}
.chart {
position: relative;
height: 90%;
top: 10%;
}
.backBtn {
position: absolute;
top: 0;
background-color: #00c298;
border: 0;
color: #fff;
height: 27px;
font-family: Microsoft Yahei;
font-size: 1em;
cursor: pointer;
}
.myBlog {
position: absolute;
top: 2px;
right: 5%;
display: block;
border: 2px solid #262a53;
}
.myBlog a {
text-decoration: none;
display: inline-block;
color: #fff;
padding: 5px;
font-size: 1em;
}
.myBlog a img {
vertical-align: middle;
height: 20px;
width: 20px;
border-radius: 50%;
margin: -5px 5px auto auto;
}
.bottom {
position: absolute;
width: 100%;
height: 5%;
line-height: 100%;
left: 0;
bottom: 0%;
text-align: center;
}
</style>
