Vue3 Echarts中国地图（包含轮播高亮区域）

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对于我来说是一个全新的东西 还在慢慢摸索和学习中 如果内容写的不对请留言告诉我！