vue3 使用 echarts 展示某省份各区市数据
这个很简单，直接贴代码了
代码
echarts 使用的是最新版："echarts": "^6.0.0"。
<template><div class="ed-map-div"><div class="ed-map-model" ref="echartRef"></div></div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'const echartRef = ref(null)
const actBtn = ref(0)let echartInstance = null;let option = {backgroundColor: 'transparent',tooltip: {trigger: 'item',formatter: '{b}: {c}'},// 添加视觉映射组件，用于展示数据visualMap: {min: 0,max: 700,left: 'left',top: 'bottom',text: ['高', '低'],calculable: true,inRange: {color: ['#e0f3ff', '#0066cc']}},series: [{type: 'map',map: '辽宁',roam: true,label: {show: true,color: '#FFF',fontSize: 14,fontWeight: 'bold',fontFamily: '微软雅黑'},emphasis: {label: {show: true,fontSize: 14,color: '#FFF',fontWeight: 'bold'},itemStyle: {areaColor: '#ffcc00'}},data: [{value: 650,name: '沈阳市',},{value: 450,name: '大连市',},{value: 420,name: '鞍山市',},{value: 400,name: '抚顺市',},{value: 500,name: '本溪市',},{value: 600,name: '丹东市',},{value: 700,name: '铁岭市',},{value: 700,name: '阜新市',},{value: 700,name: '锦州市',},{value: 700,name: '朝阳市',},{value: 700,name: '盘锦市',},{value: 700,name: '葫芦岛市',},{value: 700,name: '营口市',},{value: 700,name: '辽阳市',},]}]
}onMounted(() => {echartInstance = echarts.init(echartRef.value)// 正确的地图数据加载方式import('../../json/210000.json').then(mapJson => {// 直接使用 JSON 数据注册地图echarts.registerMap('辽宁', mapJson)// 配置 ECharts 选项echartInstance.setOption(option)}).catch(error => {console.error('加载地图数据失败:', error)})// 添加窗口大小变化监听window.addEventListener('resize', () => {echartInstance.resize()})
})</script>
<style scoped lang="scss">
.ed-map-div {width: 100%;height: 100%;position: relative;.ed-map-model {width: 100%;height: 100%;}
}
</style>
其中省份的 json 文件从这个网站可以下载：https://datav.aliyun.com/portal/school/atlas/area_selector#&lat=26.30662600587793&lng=118.28348353816342&zoom=7.5
最后完成的效果：
