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>
