Ecahrts竖向柱状图实现自动滚动

 效果如下：

1.首先声明一个timer定时器标识

let timer: NodeJS.Timer; // 定时器

2.再声明窗口展示的数量，yAxisIndex2用来记录当前index已经加了多少，方便再formatter中格式化标题的相关信息

const dataZoomEndValue = 6; // 数据窗口范围的结束数值(一次性展示几个)
let yAxisIndex2 = 0; // 表示右侧Y轴从那个刻度开始

3.在option中设置datazoom的相关参数

dataZoom: [
	{
		show: false, // 是否显示滑动条
		yAxisIndex: [0, 1], // // 表示这个 dataZoom 组件控制 第一个 和 二个 yAxis
		startValue: 0, // 数据窗口范围的起始数值
		endValue: dataZoomEndValue // 数据窗口范围的结束数值(一次性展示几个)
	}
],

4.开启一个定时器

getArrByKey(data, "name")：代表的是Y轴标题的数据

getArrByKey(data, "value")：代表的是X轴数量的数据

// 开启定时器自动滚动
if (getArrByKey(data, "name").length > 0 && data.length > 0) {
	timer = setInterval(() => {
		// 每次向后滚动一个，最后一个从头开始
		if (option.dataZoom[0].endValue === getArrByKey(data, "value").length - 1) {
			option.dataZoom[0].startValue = 0; // 数据窗口范围的起始数值
			option.dataZoom[0].endValue = dataZoomEndValue; // 数据窗口范围的结束数值
			yAxisIndex2 = 0;
		} else {
            // 数据窗口范围的起始数值
			option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1; 
            // 数据窗口范围的结束数值
			option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1; 
			yAxisIndex2 += 1;
		}
		myChart.setOption(option);
	}, 2000);
}

5.最后别忘了清除定时器

onUnmounted(() => {
	clearInterval(timer);
});

附上完整代码：

<template>
	<div class="h-240px" 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; // 定时器
const initPieChart = () => {
	// 判断当前echarts是否存在
	let myChart = echarts.getInstanceByDom(pieChart.value);
	if (myChart == null) {
		myChart = echarts.init(pieChart.value);
	}
	let data = [
		{
			name: "停机项目1",
			value: 4,
			sum: 10
		},
		{
			name: "停机项目2",
			value: 3,
			sum: 10
		},
		{
			name: "停机项目3",
			value: 5,
			sum: 10
		},
		{
			name: "停机项目4",
			value: 8,
			sum: 10
		},
		{
			name: "停机项目5",
			value: 3,
			sum: 10
		},
		{
			name: "停机项目6",
			value: 4,
			sum: 10
		},
		{
			name: "停机项目7",
			value: 2,
			sum: 10
		},
		{
			name: "停机项目8",
			value: 6,
			sum: 10
		},
		{
			name: "停机项目9",
			value: 8,
			sum: 10
		},
		{
			name: "停机项目10",
			value: 3,
			sum: 10
		}
	];
	let max = Number(data[0].sum); // 假设最大值为数组的第一个元素
	for (let i = 1; i < data.length; i++) {
		if (Number(data[i].sum) > max) {
			// 如果当前元素比最大值大，则更新最大值
			max = data[i].sum;
		}
	}
	let backData = new Array(data.length).fill(max);
	const getArrByKey = (data: any, k: string) => {
		let key = k || "value";
		let res: Array<number> = [];
		if (data) {
			data.forEach(function (t: any) {
				res.push(t[key]);
			});
		}
		return res;
	};
	const dataZoomEndValue = 6; // 数据窗口范围的结束数值(一次性展示几个)
	let yAxisIndex2 = 0; // 表示右侧Y轴从那个刻度开始

	const option = {
		grid: {
			top: "8%",
			bottom: "2%",
			right: "2%",
			left: 0,
			containLabel: true
		},
		dataZoom: [
			{
				show: false, // 是否显示滑动条
				yAxisIndex: [0, 1], // // 表示这个 dataZoom 组件控制 第一个 和 二个 yAxis
				startValue: 0, // 数据窗口范围的起始数值
				endValue: dataZoomEndValue // 数据窗口范围的结束数值(一次性展示几个)
			}
		],
		xAxis: {
			show: false
		},
		yAxis: [
			{
				triggerEvent: true,
				show: true,
				inverse: true,
				data: getArrByKey(data, "name"),
				axisLine: {
					show: false
				},
				splitLine: {
					show: false
				},
				axisTick: {
					show: false
				},
				axisLabel: {
					interval: 0,
					color: "#8693a4",
					align: "right",
					margin: 18,
					fontSize: 12,
					fontWeight: 400
				}
			},
			{
				name: "时长占比    占比",
				//name的样式设计
				nameTextStyle: {
					align: "left",
					padding: [-230, 0, 0, 0], //地区名称的位置
					color: "#8693a4",
					fontSize: "12"
				},
				triggerEvent: true,
				show: true,
				inverse: true,
				data: getArrByKey(data, "name"),
				axisLine: {
					show: false
				},
				splitLine: {
					show: false
				},
				axisTick: {
					show: false
				},
				axisLabel: {
					interval: 0,
					color: "#8693a4",
					align: "left",
					margin: 20,
					fontSize: 12,
					fontWeight: 400,
					formatter: function (value: any, index: number) {
						// return "时长：" + data[index].value + "分    占比：" + ((data[index].value / data[index].sum) * 100).toFixed(2) + "%";
						return (
							data[index + yAxisIndex2].value +
							"     " +
							((data[index + yAxisIndex2].value / data[index + yAxisIndex2].sum) * 100).toFixed(2) +
							"%"
						);
					}
				}
			}
		],
		series: [
			{
				name: "条",
				type: "bar",
				yAxisIndex: 0,
				data: data,
				barWidth: 10,
				itemStyle: {
					color: "#e82461",
					barBorderRadius: [0, 30, 30, 0]
				}
			},
			{
				// For shadow
				type: "bar",
				itemStyle: {
					normal: {
						color: "rgba(255, 255, 255, 0.1)",
						barBorderRadius: [0, 0, 0, 0]
					}
				},
				barWidth: 10,
				barGap: "-100%",
				barCategoryGap: "40%",
				data: backData,
				animation: false,
				yAxisIndex: 1, //使用右侧y轴
				tooltip: {
					show: false
				}
			}
		]
	};

	useEcharts(myChart, option);

	// 开启定时器自动滚动
	if (getArrByKey(data, "name").length > 0 && data.length > 0) {
		timer = setInterval(() => {
			// 每次向后滚动一个，最后一个从头开始
			if (option.dataZoom[0].endValue === getArrByKey(data, "value").length - 1) {
				option.dataZoom[0].startValue = 0; // 数据窗口范围的起始数值
				option.dataZoom[0].endValue = dataZoomEndValue; // 数据窗口范围的结束数值
				yAxisIndex2 = 0;
			} else {
				option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1; // 数据窗口范围的起始数值
				option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1; // 数据窗口范围的结束数值
				yAxisIndex2 += 1;
			}
			myChart.setOption(option);
		}, 2000);
	}
};
onMounted(() => {
	initPieChart();
});
onUnmounted(() => {
	clearInterval(timer);
});
</script>

<style lang="scss" scoped></style>