1. 安装必要的依赖
npm install echarts vue-echarts --save
2.准备地图数据
实现地图下钻功能的核心是有不同层级的地理数据,比如国家、省份、城市的地图。ECharts 官方提供了大部分国家和地区的地理数据。 你可以直接通过 geoJson
加载。 你可以从 ECharts 官网 下载所需的 GeoJSON 数据。
或者使用第三方 API 来动态获取这些数据。通过第三方获取JSON数据网站:hxkj.vip/demo/echart…
选择对应的省市区获取到对应的JSON数据
3.实现地图下钻
在 Vue 3 中创建一个 ECharts 组件并实现点击事件处理来进行地图下钻。
并将下载好的JSON文件放入assets文件中 代码如下:
<template>
<div>
<v-chart :options="mapOptions" @click="handleMapClick" style="width: 100%; height: 500px;" />
</div>
</template>
<script setup>
import { defineComponent, ref, onMounted } from 'vue';
import * as echarts from 'echarts';
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { MapChart } from 'echarts/charts';
import { GeoComponent } from 'echarts/components';
import chinaGeoJson from '@/assets/china.json'; // 导入中国地图 GeoJSON 数据
use([CanvasRenderer, MapChart, GeoComponent]);
const mapOptions = ref({});
// 当前层级,初始为 'china'
const currentLevel = ref('china');
const geoData = {
// 中国地图数据
china: chinaGeoJson,
// 省份数据,点击后加载
province: null,
// 城市数据,点击后加载
city: null
};
// 设置初始地图选项
const setMapOptions = (mapData, mapName = 'china') => {
mapOptions.value = {
tooltip: {
trigger: 'item',
formatter: '{b}' // 鼠标悬浮显示地区名称
},
series: [
{
name: mapName,
type: 'map',
map: mapName,
roam: true, // 开启缩放和平移
label: {
show: true
},
data: []
}
]
};
};
// 地图点击事件处理
const handleMapClick = async (params) => {
const regionName = params.name;
if (currentLevel.value === 'china') {
// 下钻到省份
const provinceGeoJson = await import(`@/assets/provinces/${regionName}.json`);
geoData.province = provinceGeoJson;
echarts.registerMap(regionName, provinceGeoJson); // 注册省份地图数据
currentLevel.value = 'province';
setMapOptions(geoData.province, regionName);
} else if (currentLevel.value === 'province') {
// 下钻到城市
const cityGeoJson = await import(`@/assets/cities/${regionName}.json`);
geoData.city = cityGeoJson;
echarts.registerMap(regionName, cityGeoJson); // 注册城市地图数据
currentLevel.value = 'city';
setMapOptions(geoData.city, regionName);
}
};
onMounted(() => {
// 初始展示全国地图
echarts.registerMap('china', geoData.china); // 注册中国地图
setMapOptions(geoData.china);
});
</script>
<style>
/* 确保图表容器有足够的宽高 */
</style>
总结思路:地图下钻就是获取点击事件,并重新生成一份下钻后的地图。