1.定义一个定时器标识
let timer: NodeJS.Timer; // 定时器2.定义展示的数据的条数
const dataZoomEndValue = 5; // 数据窗口范围的结束数值(一次性展示几个)3.设置datazoom的相关参数
dataZoom: [{show: false, // 是否显示滑动条xAxisIndex: 0, // 表示从X轴的零刻度线开始的startValue: 0, // 数据窗口范围的起始数值endValue: dataZoomEndValue // 数据窗口范围的结束数值(一次性展示几个)}
],4.定义开始动画定时器和结束动画定时器的两个函数
// 鼠标移入echarts图表暂停动画
const stopAnimation = () => {clearInterval(timer);
};
// 鼠标移出echarts图表开始动画
const startAnimation = (myChart: echarts.ECharts, option: any, Xdata: Array<string>, dataZoomEndValue: number) => {timer = setInterval(() => {// 每次向后滚动一个，最后一个从头开始if (option.dataZoom[0].endValue === Xdata.length - 1) {option.dataZoom[0].startValue = 0; // 数据窗口范围的起始数值option.dataZoom[0].endValue = dataZoomEndValue; // 数据窗口范围的结束数值} else {option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1; // 数据窗口范围的起始数值option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1; // 数据窗口范围的结束数值}myChart.setOption(option);}, 2000);
};5.开启定时器动画，以及鼠标移入移除ecahrts暂停和开始动画效果
if (Xdata.length > 0) {startAnimation(myChart, option, Xdata, dataZoomEndValue);
}
// 给echarts图表绑定鼠标移入移除事件
myChart.on("mouseover", function () {stopAnimation();
});
myChart.on("mouseout", function () {startAnimation(myChart, option, Xdata, dataZoomEndValue);
});6.最后别忘了清除定时器
onUnmounted(() => {stopAnimation();
});附上完整代码
<template><div class="h-250px" style="width: 100%" ref="pieChart"></div>
</template><script lang="ts" setup>
import { watch, ref, onMounted, onUnmounted } from "vue";
import * as echarts from "echarts";
import { useEcharts } from "@/hooks/useEcharts";
const pieChart = ref();
const props = defineProps({data: {type: Object,default: () => {}}
});
watch(() => props.data,() => {initPieChart();},{deep: true}
);
let timer: NodeJS.Timer; // 定时器
// 鼠标移入echarts图表暂停动画
const stopAnimation = () => {clearInterval(timer);
};
// 鼠标移出echarts图表开始动画
const startAnimation = (myChart: echarts.ECharts, option: any, Xdata: Array<string>, dataZoomEndValue: number) => {timer = setInterval(() => {// 每次向后滚动一个，最后一个从头开始if (option.dataZoom[0].endValue === Xdata.length - 1) {option.dataZoom[0].startValue = 0; // 数据窗口范围的起始数值option.dataZoom[0].endValue = dataZoomEndValue; // 数据窗口范围的结束数值} else {option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1; // 数据窗口范围的起始数值option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1; // 数据窗口范围的结束数值}myChart.setOption(option);}, 2000);
};
const initPieChart = () => {// 判断当前echarts是否存在let myChart = echarts.getInstanceByDom(pieChart.value);if (myChart == null) {myChart = echarts.init(pieChart.value);}let Xdata = ["机台号1", "机台号2", "机台号3", "机台号4", "机台号5", "机台号6", "机台号7", "机台号8", "机台号9", "机台号10"];const dataZoomEndValue = 5; // 数据窗口范围的结束数值(一次性展示几个)const option = {grid: {top: "20%",left: "4%",right: "4%",bottom: "2%",containLabel: true},dataZoom: [{show: false, // 是否显示滑动条xAxisIndex: 0, // 表示从X轴的零刻度线开始的startValue: 0, // 数据窗口范围的起始数值endValue: dataZoomEndValue // 数据窗口范围的结束数值(一次性展示几个)}],tooltip: {trigger: "axis",axisPointer: {// 坐标轴指示器，坐标轴触发有效type: "shadow" // 默认为直线，可选为：'line' | 'shadow'},formatter: function (params: any) {let text = `${params[0].name}<br/>`;params.forEach((item: any, index: number) => {text += `<span style="width: 10px;height: 10px;background: ${item.color};border-radius: 10px;display: inline-block;margin-right: 5px;"></span>${params[index].seriesName}：${item.value}分钟<br/>`;});return text;}},legend: {itemGap: 15,top: "0",right: "30",textStyle: {color: "#B5C5D4"},data: ["保养", "落纱", "故障", "其他"]},xAxis: {type: "category",axisLine: {lineStyle: { color: "#8693a4", width: 1 }},axisTick: {show: false},axisLabel: {interval: 0, //设置文本标签全部显示rotate: 30 //如果内容重叠最好设置一下旋转，就不会重叠了},data: Xdata},yAxis: {type: "value",name: "时长：min",axisLabel: {show: true,color: "#8693a4"},splitLine: {lineStyle: {width: 1,color: "#2d364e",type: "dashed"}}},series: [{name: "保养",type: "bar",stack: "总量",barMaxWidth: 20,data: [320, 302, 301, 334, 390, 330, 320, 290, 310, 180, 180]},{name: "落纱",type: "bar",stack: "总量",barMaxWidth: 20,data: [120, 132, 101, 134, 90, 230, 210, 260, 210, 110, 130]},{name: "故障",type: "bar",barMaxWidth: 20,stack: "总量",data: [220, 182, 191, 234, 290, 330, 310, 200, 110, 150, 270]},{name: "其他",type: "bar",barMaxWidth: 20,stack: "总量",data: [150, 212, 201, 154, 190, 330, 410, 220, 360, 160, 220]}]};useEcharts(myChart, option); // 开启定时器自动滚动if (Xdata.length > 0) {startAnimation(myChart, option, Xdata, dataZoomEndValue);}// 给echarts图表绑定鼠标移入移除事件myChart.on("mouseover", function () {stopAnimation();});myChart.on("mouseout", function () {startAnimation(myChart, option, Xdata, dataZoomEndValue);});
};
onMounted(() => {initPieChart();
});
onUnmounted(() => {stopAnimation();
});
</script><style lang="scss" scoped></style>