vue 数据大屏项目开发中，在渲染echarts地图时，经常需要进行下钻操作，当我们选中地图某个区域后，则只显示当前区域的地图，点击返回后显示全部地图。
下钻效果如下：
效果代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta content="yes" name="apple-mobile-web-app-capable"/>
<meta content="black" name="apple-mobile-web-app-status-bar-style"/>
<meta content="telephone=no" name="format-detection"/>
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>echarts地图</title>
<script src="../../../js/data.js"></script>
<script src="../../../js/vue2.js"></script>
<script src="../../../js/echarts.min.js"></script>
<script src="../../../js/jquery.min.js"></script>
</head>
<body>
<div class="viewport" id="home">
<div class="fanhui cur" v-if="addressName" @click="goback">返回</div>
<div class="echarts" ref="echarts" id="echarts"></div>
</div>
</body>
<script>
var vm = new Vue({
el: "#home",
data() {
return {
addressName: '',
}
},
watch: {},
mounted() {
setTimeout(() => {
this.getEcharts()
}, 100)
},
computed: {
mapData: function () {
var data = {}
if (this.addressName) {
data = this.getMapData(gdMap)
} else {
data = gdMap
}
return data
}
},
methods: {
goback() {
this.addressName = ''
this.getEcharts()
},
getMapData(datas) {
// 如果有addressName则只显示addressName信息
var data = {
"type": "FeatureCollection",
"features": []
}
datas.features.forEach((type) => {
if (type.properties.name == this.addressName) {
data.features.push(type)
}
});
return data
},
getEcharts() {
var that = this
var geoCoordMap = {}
window.addEventListener('resize', this.getEcharts)
var myChart = echarts.init(this.$refs.echarts)
var nameMap = '地图数据';
echarts.registerMap(nameMap, this.mapData)
var mapFeatures = echarts.getMap(nameMap).geoJson.features;
mapFeatures.forEach(function (v, index) {
geoCoordMap[v.properties.name] = v.properties.center;
if (index == 0) {
that.longitudeAndLatitude = v.properties.center
}
});
var option = {
visualMap: {
show: false,
max: 100,
seriesIndex: [3],
inRange: {
color: ["#A5DCF4", "#006edd"],
},
},
geo: [
{
map: nameMap,
roam: false, //是否允许缩放
zoom: 1.1, //默认显示级别
scaleLimit: {
min: 0,
max: 3,
}, //缩放级别
itemStyle: {
normal: {
areaColor: "#013C62",
shadowColor: "#12235c",
shadowBlur: 20,
shadowOffsetX: -5,
shadowOffsetY: 15,
},
},
tooltip: {
show: false,
},
},
],
series: [
//地图
{
type: "map",
mapType: nameMap,
geoIndex: -1,
zoom: 1.1, //默认显示级别
label: {
show: true,
color: "#ffffff",
emphasis: {
color: "white",
show: false,
},
},
itemStyle: {
normal: {
borderColor: "#2980b9",
borderWidth: 1,
areaColor: "#12235c",
},
emphasis: {
areaColor: "#FA8C16",
borderWidth: 0,
color: "green",
},
},
data: Object.keys(geoCoordMap).map((name) => {
return {
name: name,
value: Math.random() * 100,
};
}),
},
],
};
myChart.resize()
myChart.setOption(option)
myChart.off('click')
myChart.on('click', function (params) {
that.addressName = params.name
that.getEcharts()
})
}
}
})
</script>
</html>
<style>
html, body {
padding: 0;
margin: 0;
}
#home {
width: 100%;
height: 100%;
background: #0d1551;
position: fixed;
}
.echarts {
width: 100%;
height: 100%;
background: #0d1551;
position: fixed;
}
.fanhui {
position: fixed;
right: 20px;
z-index: 100;
top: 20px;
font-size: 24px;
font-family: YouSheBiaoTiHei;
font-weight: 400;
color: #D6EEFF;
line-height: 30px;
background: linear-gradient(0deg, #FFFFFF 0%, #CEE6FF 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.cur {
cursor: pointer;
}
</style>
完整实例代码文件下载
上面的代码已经将除了js文件外的代码都列出来了。
下面的代码实例是将所需的js文件集成到了一块。
