vue3使用echarts去实现中国地图轮播高亮也是花了时间和精力的学习内容（希望大家分享学习内容的时候 能够认真一点 不要贴一大堆代码上去 根本用不了 可以多写一些注释 谢谢。）

我先直接贴代码

import { defineProps, ref, watch, onMounted, toRaw } from "vue";
import * as echarts from "echarts"; //项目需要npm echarts
import chinaJSON from "@/assets/screen/json/chinaMap.json"; //从阿里的一个地址上下下来的
const chinaMap = ref();
const props = defineProps(["dateNum"]); //这个是从父组件传过来的参数
const dateType = ref(1); //定义的时间type 跟echarts无关 是本项目需要的（可忽略）
watch(() => props.dateNum,(newVal, oldVal) => {dateType.value = newVal;drawChina(); //}
);
onMounted(() => {intervalId.value = window.setInterval(drawChina, 5 * 60 * 1000); //5分钟数据刷新一次。
});
onUnmounted(() => {// 清除定时器if (intervalId.value) {window.clearInterval(intervalId.value);}
});
const drawChina = () => {hisTotalAPI.mapData({ timeScope: dateType.value }).then((res: any) => {let regions = [],scatter = []; //res.map((item: any, index: any) => {regions.push(item.province);// 这里是存一些数据对应的省份 后面geo属性会用到 我让后端的同事把每条数据对应的是哪个省份直接给我了 这样方便我在后面高亮的数据可以直接使用}});setMapData(res, regions);  //拿到接口传来的数据就直接去填充map
}
drawChina();
const setMapData = (scatter: any, regions1: any) => {//scatter接口的数据 regions1 所有数据对应的省份let myChart = echarts.init(chinaMap.value);echarts.registerMap("china", chinaJSON); //注册可用的地图var option = {tooltip: {},geo: {},itemStyle: {},emphasis:{},//配置属性series: []};var hourIndex = 0;var carouselTime = null;myChart.setOption(option);carouselTime = setInterval(() => {let optionMay = myChart.getOption();optionMay.geo[0].regions = [{name: regions1[hourIndex],label: { color: "#fff" },itemStyle: {areaColor: "rgba(11, 185, 229, 0.80)",borderColor: "rgba(255,255,255,0.4)",borderWidth: 2,},},];myChart.setOption(optionMay);myChart.dispatchAction({//取消高亮的数据图形type: "downplay",seriesIndex: 0});myChart.dispatchAction({//高亮指定的图形type: "highlight",seriesIndex: 0,name: regions1[hourIndex],dataIndex: hourIndex, //数据index});myChart.dispatchAction({type: "showTip",seriesIndex: 0,name: scatter[hourIndex].name,dataIndex: hourIndex, //数据index});hourIndex++;if (hourIndex > scatter.length) {hourIndex = 0;}},2000)
};

具体的配置属性我单独拿出来 因为代码太长了。

tooltip: {trigger: "item",backgroundColor: "rgba(12, 34, 67, 1)",borderWidth: 1,borderColor: "#0BB9E5",textStyle: {color: "rgba(255,255,255,0.8)",},formatter: (params) => {return ('<div style="font-weight:600;font-size:24px;">' +params.data.hospitalName +"</div>" +"目前阶段：" +params.data.presentStage +"<br/>" +"部署大类：" +params.data.categories +"<br/>" +"部署品数：" +params.data.varieties +"<br/>" +"九州通货物品数：" +params.data.jztSupplyVarieties +"、占比" +params.data.jztSupplyPercentage);},
}

geo: {map: "china",roam: false, //是否允许缩放，拖拽zoom: 1.3, //初始化大小top: "15%",left: "25%",regions: [],label: {normal: {show: true,fontSize: 10,color: "rgba(255,255,255,.7)",formatter: function (params) {const suffixes = ["市", "省", "自治区", "特别行政区"];for (let suffix of suffixes) {params.name = params.name.replace(new RegExp(suffix + "$"), "");}return params.name;},},},emphasis: {itemStyle: {areaColor: "rgba(11, 185, 229, 0.80)",borderColor: "rgba(255,255,255,0.7)",},label: {fontSize: 14,color: "#fff",},},},

itemStyle: {areaColor: "#134EB9",color: "rgba(255,255,255,0.7)",borderColor: "rgba(255,255,255,0.7)",borderWidth: 1,emphasis: {color: "#fff",},
},

//高亮状态
emphasis: {itemStyle: {areaColor: "rgba(11, 185, 229, 0.80)",borderColor: "rgba(255,255,255,0.4)",borderWidth: 1,color: "rgba(255,255,255,0.4)",},
},

//配置属性
series: [{type: "effectScatter",mapType: "china", // 确保这里设置为中国地图coordinateSystem: "geo",roam: false, // 是否可缩放data: scatter,symbolSize: 4, //散点大小showEffectOn: "render",hoverAnimation: true, //是否开启鼠标 hover 的提示动画效果itemStyle: {//图形样式，normal 是图形在默认状态下的样式；emphasis 是图形在高亮状态下的样式，比如在鼠标悬浮或者图例联动高亮时normal: {color: "rgba(56, 216, 115, 1)", //散点颜色borderWidth: 0,textStyle: {color: "#fff", // 默认字体颜色},},emphasis: {itemStyle: {areaColor: "rgba(11, 185, 229, 0.80)",borderColor: "rgba(255,255,255,0.4)",borderWidth: 1,color: "rgba(255,255,255,0.4)",},},},emphasis: {itemStyle: {areaColor: "rgba(11, 185, 229, 0.80)",borderColor: "rgba(255,255,255,0.4)",borderWidth: 1,color: "rgba(255,255,255,0.4)",},},},
],

vue3对于我来说是一个全新的东西 还在慢慢摸索和学习中 如果内容写的不对请留言告诉我！