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

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

我先直接贴代码

javascript 复制代码

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)
};

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

javascript 复制代码

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
       );
     },
}

javascript 复制代码

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",
     },
   },
 },

javascript 复制代码

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

javascript 复制代码

//高亮状态
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)",
  },
},

javascript 复制代码

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