echart 5以上版本采用了registMap的方式来自主引入地图geo数据
在实际项目中经常会需要动态加载不同地区地图
在 vue2 + webpack中可以直接使用 require 获取地图geo数据
let mapName = 'china';
const geoJson = require(`/plugins/echarts/map/json/${mapName}.json`)
而在 vue + vite 中不能使用 require 的方式因此需要使用 import.meta.url 获取绝对路径并引入
// 获取public静态资源路径
static getPublicFile = (url) => {
return new URL(`../../public/${url}`, import.meta.url).href;
};
onMounted(async ()=>{
// 获取geo数据
let mapName = "china";
const response = await fetch(
Util.getPublicFile(`plugins/echarts/map/json/${mapName}.json`)
);
const res = await response.json();
// 地图注册
echarts.registerMap(mapName, res);
})
