想要打造震撼人心的数据可视化大屏？那么不妨尝试一下【echarts大屏】横向柱状图翻页轮询效果！通过这种方式，可以让你的数据图表生动起来，吸引用户的注意力。
✨ 接下来，我将为你介绍如何实现【echarts大屏】横向柱状图翻页轮询的效果。
1️⃣ 准备工作：
首先，你需要引入ECharts库，并创建一个容器元素，用于展示图表。
2️⃣ 数据准备：
根据你的需求，准备好要展示的数据。可以是实时的数据、动态变化的数据等。
3️⃣ 配置图表：
使用ECharts提供的API，配置横向柱状图的样式、坐标轴等，以及设置翻页动画效果。
4️⃣ 轮询效果实现：
通过定时器或者Vue/React等框架的数据变更触发机制，实现图表的翻页效果。可以通过改变图表的数据源或者图表的显示状态来实现轮询效果。
5️⃣ 无限循环展示：
如果想要实现无限循环的效果，可以在最后一页或者最开始一页时，切换到另一端的数据，从而实现无缝切换。
组件使用：
<div class="workload-ranking">
<div class="workload-ranking-hand">
<span class="publicIcon icon6"></span>
当前班次作业量排名
</div>
<div class="workload-ranking-body">
<Source :dataZoomEndValue="5"></Source>
</div>
</div>
dataZoomEndValue说明:数据最大展示条数
vue组件完整代码：
<template>
<div id="sou" class="sou" style="width: 100%;height: 100%" />
</template>
<script>
// 例如：import 《组件名称》 from '《组件路径》';
import * as echarts from "echarts";
export default {
props: ["dataZoomEndValue"],
name: "Source",
// import引入的组件需要注入到对象中才能使用
data() {
// 这里存放数据
return {
yAxisList: "",
seriesList: "",
seriesList2: "",
ListScroll: null
};
},
// 监听属性 类似于data概念
computed: {
},
// 监控data中的数据变化
watch: {
},
// 生命周期 - 创建完成（可以访问当前this实例）
created() {
this.getdate();
},
// 生命周期 - 挂载完成（可以访问DOM元素）
mounted() {
// this.getSource();
},
beforeDestroy() {
clearInterval(this.ListScroll);
},
// 方法集合
methods: {
getdate() {
axios
.get("/logistics/bulletinBoard/driverWorkloadShift/exception")
.then(response => {
if (response.data.status == 200) {
let yAxisList = [];
response.data.result.xData.forEach(item => {
yAxisList.push(item.substr(0, item.indexOf(":")));
});
// const yAxisList = response.data.result.xData;
const seriesList = response.data.result.yAxis[0].data;
this.getSource(yAxisList, seriesList);
}
});
},
// 图表数据
getSource(yAxisList, seriesList) {
var myChart = echarts.init(document.getElementById("sou"));
var dataZoomEndValue = this.dataZoomEndValue;
const option = this.generateChartOption(yAxisList, seriesList);
var [newYAxisList, newSeriesList] = this.groupDataByZoomValue(
yAxisList,
seriesList,
dataZoomEndValue
);
// 首次渲染
const YList = newYAxisList[0];
const SList = newSeriesList[0];
yAxisList.splice(0, yAxisList.length, ...YList);
seriesList.splice(0, seriesList.length, ...SList);
myChart.setOption(option);
console.log(dataZoomEndValue, yAxisList);
if (newYAxisList.length > 1 && newSeriesList.length > 1) {
let indexNumber = 0;
// 开始轮询翻页
this.ListScroll = setInterval(() => {
indexNumber = (indexNumber + 1) % newYAxisList.length;
const YList = newYAxisList[indexNumber];
const SList = newSeriesList[indexNumber];
yAxisList.splice(0, yAxisList.length, ...YList);
seriesList.splice(0, seriesList.length, ...SList);
myChart.clear();
myChart.setOption(this.generateChartOption(yAxisList, seriesList));
}, 15000);
}
window.addEventListener("resize", () => {
myChart.resize();
});
},
generateChartOption(yAxisList, seriesList) {
return {
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow"
}
},
legend: {
show: true,
top: "3%",
textStyle: {
color: "#999"
}
},
grid: {
left: "3%",
right: "4%",
bottom: "3%",
containLabel: true
},
xAxis: {
type: "value",
boundaryGap: [0, 0.01],
splitLine: {
show: true,
lineStyle: {
color: "#666"
}
},
axisLabel: {
show: false
},
show: false
},
yAxis: {
type: "category",
data: yAxisList
},
series: [
{
name: "工作量（次）",
type: "bar",
data: seriesList,
itemStyle: {
color: "#458ef4"
},
label: {
color: "rgba(255, 255, 255, 1)",
show: true,
position: "right",
formatter: params => {
var value = params.value;
return value + "次";
}
}
}
]
};
},
groupDataByZoomValue(yAxisList, seriesList, zoomValue) {
const newYAxisList = [];
const newSeriesList = [];
for (let i = seriesList.length; i > 0; i -= zoomValue) {
const startIndex = Math.max(0, i - zoomValue);
const yAxisSlice = yAxisList.slice(startIndex, i);
const seriesSlice = seriesList.slice(startIndex, i);
// 检查子数组长度是否小于zoomValue，若是，则进行填充
if (yAxisSlice.length < zoomValue) {
const yAxisFill = Array(zoomValue - yAxisSlice.length).fill("");
yAxisSlice.unshift(...yAxisFill);
}
if (seriesSlice.length < zoomValue) {
const seriesFill = Array(zoomValue - seriesSlice.length).fill("");
seriesSlice.unshift(...seriesFill);
}
newYAxisList.unshift(yAxisSlice);
newSeriesList.unshift(seriesSlice);
}
// 颠倒顺序
newYAxisList.reverse();
newSeriesList.reverse();
console.log(newYAxisList, newSeriesList);
return [newYAxisList, newSeriesList];
}
} // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
通过以上步骤，你就可以完成【echarts大屏】横向柱状图翻页轮询的实现了！让你的数据图表动起来，让用户眼前一亮！
标签：#echarts大屏 #横向柱状图 #数据可视化 #轮询效果
