Echarts5 + vue3实现中国地图
1. 先下载中国地图JSON数据
2. 将下载的json放在本地json文件里(vite + vue将chinaMap.json保存在public目录下)
3. 代码实现
<template>
<div class="echarts-contain map-echarts">
<charts :option="chinaMapOption"></charts>
</div>
</template>
const state = reactive({
seriesData: [
{ name: '北京市', value: 15477.48 },
{ name: '上海市', value: 31686.1 }
],
chinaMapOption: {}
})
const initChinaMap = async () => {
const res: any = await axios.get('/chinaMap.json')
echarts.registerMap('china', res.data)
state.chinaMapOption = {
// 标题
title: {
text: "中国地图",
left: 'center',
top: 20
// subtext: "下载链接",
// sublink: "http://datav.aliyun.com/tools/atlas/#&lat=30.772340792178525&lng=103.94573258937584&zoom=9.5"
},
// 悬浮窗
tooltip: {
trigger: 'item',
formatter: function (params: { name: string, value: unknown }) {
return `${params.name}: ${params.value || '-'}`
}
},
// echarts大小位置
grid: {
left: '10px',
right: '10px',
top: '10px',
bottom: '10px'
},
// 图例
visualMap: {
min: 800,
max: 50000,
text: ['High', 'Low'],
realtime: false,
calculable: true,
inRange: {
color: ['lightskyblue', 'yellow', 'orangered']
}
},
// 要显示的散点数据
series: [
{
type: 'map',
map: 'china',
// 这是要显示的数据
data: state.seriesData,
// 自定义命名映射,不设置的话,label默认是使用 geoJson中的name名
// nameMap: {
// '北京市': "北京重命名",
// "天津市": '天津重命名'
// },
}
]
}
}
onMounted(() => {
initChinaMap()
})
const { chinaMapOption } = toRefs(state)
每一个人心中都有一团火,路过的人只看到烟!