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