下面我们实现一下下面的效果
首先我们在pie-map.json里面添加地图销售数据
"saleMap":[{"areaName":"北京市","saleNum":1250000},{"areaName":"天津市","saleNum":88500},{"areaName":"河北省","saleNum":11200},{"areaName":"山西省","saleNum":37200},{"areaName":"内蒙古自治区","saleNum":506800},{"areaName":"辽宁省","saleNum":19800},{"areaName":"吉林省","saleNum":26500},{"areaName":"黑龙江省","saleNum":37800},{"areaName":"上海市","saleNum":1520000},{"areaName":"江苏省","saleNum":713800},{"areaName":"浙江省","saleNum":1320000},{"areaName":"安徽省","saleNum":99200},{"areaName":"福建省","saleNum":1050000},{"areaName":"江西省","saleNum":197500},{"areaName":"山东省","saleNum":12800},{"areaName":"河南省","saleNum":11800},{"areaName":"湖北省","saleNum":680000},{"areaName":"湖南省","saleNum":313313313},{"areaName":"广东省","saleNum":1450000},{"areaName":"广西壮族自治区","saleNum":708800},{"areaName":"海南省","saleNum":58000},{"areaName":"重庆市","saleNum":919500},{"areaName":"四川省","saleNum":11500},{"areaName":"贵州省","saleNum":786800},{"areaName":"云南省","saleNum":98200},{"areaName":"西藏自治区","saleNum":603200},{"areaName":"陕西省","saleNum":890000},{"areaName":"甘肃省","saleNum":862000},{"areaName":"青海省","saleNum":433800},{"areaName":"宁夏回族自治区","saleNum":564200},{"areaName":"新疆维吾尔自治区","saleNum":7200},{"areaName":"台湾省","saleNum":129800},{"areaName":"香港特别行政区","saleNum":6800},{"areaName":"澳门特别行政区","saleNum":32800},{"areaName":"南海诸岛","saleNum":280000}]
页面配置
<template><divid="map"style="width:100%;height:700px;"></div></template><scriptlang='ts'setup>import{watch}from'vue'import*asechartsfrom'echarts'importchinaGeojsonfrom'@/mock/data/china.geojson.json'// ECharts 提供的 API，用于注册地图数据// 注册后，在 ECharts 的 option 中设置 map: 'china' 即可显示中国地图。echarts.registerMap('china',chinaGeojsonasany)constprops=defineProps<{data:{areaName:string saleNum:number}[]}>()letmyMap:echarts.ECharts;watch(()=>props.data,()=>{constdata=props.data.map(item=>({name:item.areaName,value:item.saleNum}))console.log('data----->',data)// 基于准备好的dom，初始化echarts实例if(!myMap){myMap=echarts.init(document.getElementById('map'));constoption={tooltip:{show:true,formatter:'{b}<br />销量：{c}',borderWidth:0,backgroundColor:'rgba(50, 50, 50, 0.7)',textStyle:{color:'#fff'}},series:{type:'map',map:'china',itemStyle:{borderColor:'#fff'},emphasis:{label:{show:false},itemStyle:{areaColor:'skyblue'}},data},// 连续型视觉映射组件visualMap:{type:'continuous',min:0,max:1000000,calculable:true,// 是否显示拖拽用的手柄（手柄能拖拽调整选中范围）inRange:{color:['#eeeeee','#aaaaaa','green','yellow','orange','red']}}}myMap.setOption(option);}})</script><stylelang='less'scoped></style>
