Ecahrts横向柱状图自动滚动

时间：2024-06-13 16:45:13

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>

相关文章