echarts+vue中国地图点击进入省级地图在进入市级县级地图
您可以参考以下代码实现:
- 引入 ECharts 和 Vue:
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
- 创建一个 Vue 实例:
<div id="app">
<div id="map"></div>
</div>
<script>
new Vue({
el: '#app',
data: {
chart: null,
currentMap: 'china',
currentArea: '',
currentLevel: 0,
option: {
tooltip: {
trigger: 'item',
formatter: '{b}'
},
series: [{
type: 'map',
map: 'china',
label: {
show: true,
textStyle: {
color: '#000'
}
},
itemStyle: {
borderColor: '#fff',
borderWidth: 1
},
data: []
}]
},
maps: [{
name: 'china',
type: 'map',
mapType: 'china',
label: {
show: true,
textStyle: {
color: '#000'
}
},
itemStyle: {
borderColor: '#fff',
borderWidth: 1
},
data: []
}, {
name: 'beijing',
type: 'map',
mapType: '北京',
label: {
show: true,
textStyle: {
color: '#000'
}
},
itemStyle: {
borderColor: '#fff',
borderWidth: 1
},
data: []
}, {
name: 'shanghai',
type: 'map',
mapType: '上海',
label: {
show: true,
textStyle: {
color: '#000'
}
},
itemStyle: {
borderColor: '#fff',
borderWidth: 1
},
data: []
}]
},
mounted() {
this.chart = echarts.init(document.getElementById('map'));
this.chart.setOption(this.option);
this.loadMapData(this.currentMap);
this.chart.on('click', (params) => {
if (params.name !== this.currentArea) {
this.currentArea = params.name;
this.currentLevel++;
if (this.currentLevel < this.maps.length) {
this.loadMapData(this.maps[this.currentLevel].mapType);
}
}
});
},
methods: {
loadMapData(mapType) {
this.chart.showLoading();
this.chart.clear();
this.option.series[0].mapType = mapType;
this.chart.setOption(this.option);
this.chart.hideLoading();
}
}
})
</script>
-
在
data中定义相关变量和地图数据。 -
在
mounted钩子中初始化 ECharts 实例,并绑定点击事件。 -
在
loadMapData方法中根据传入的地图类型加载对应的地图数据。 -
在点击事件中判断当前级别是否达到最大级别,如果没有则加载下一级地图数据。
-
在模板中渲染地图容器。
-
样式可以自行定义,例如:
#app {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
#map {
width: 800px;
height: 600px;
}
``
原文地址: https://www.cveoy.top/t/topic/cyWY 著作权归作者所有。请勿转载和采集!