之前使用定时器加Echarts提供的dataZoom组件，实现了轮播效果，但是在大数据量使用等情况下，出现了一些问题，于是使用了另一种方式，主要用到的还是定时器。
效果图和之前这篇一样，可以参考下：《Vue实现柱状图自动横向滚动》
原理： 初始先展示几条数据，通过定时器动态获取并更改Echarts配置项数据，实现左右轮播效果。
过程：
修改后台返回的数据，在本次使用中，每次展示四个柱状图，所以，先从每一类总的数据中，通过slice()方法，取出前四个进行展示。 for (let i = 0; i < res.o.length; i++) {
xData.push(res.o[i].xdata); // 横坐标
yData.push(res.o[i].ydata1); // 柱状图数据
}
// 分割数组
let xData_first = xData.slice(0, 4);
let yData1_first = yData1.slice(0, 4);
将数据放置到配置项中，每次展示四条数据。 let option = {
......
xAxis: [
{
axisTick: { show: false },
axisLabel: {
color: "rgba(255, 255, 255, 0.7)",
fontSize: 14,
interval: 0,
},
axisLine: {
show: false,
},
data: xData_first, //（前四条数据）
},
],
series: [
{
name: "测试", // 最上方
color: "#00C8F3",
type: "bar",
symbolSize: 8,
yAxisIndex: 0,
barWidth: 15, // 柱图宽度,
data: yData1_first, // 前四条数据
}
],
}
添加定时器（重点） let option = {......};
let testEcharts; // 定义定时器
clearInterval(testEcharts); // 清除定时器
let index = 4; // 初始展示四条，索引是0~3，从索引4开始操作数据
// 如果数据不足四条，就不执行定时器
if (xData.length > index) {
testEcharts = setInterval(function () {
let axisData = xData[index]; // 底部坐标
let data0 = option.series[0].data; // 获取配置项中柱状图数据
data0.shift(); // 把数组的第一个元素从其中删除
data0.push(yData1[index]); // 把下一条数据插入到数组中
option.xAxis[0].data.shift(); // 获取底部数据，并删除第一条
option.xAxis[0].data.push(axisData);
myChart.setOption(option); // 设置配置项
index += 1;
// 如果超出，就从第一个开始，实现轮播效果
if (index >= xData.length) {
index = 0;
}
}, 2100);
}
绘制图表 if (option && typeof option === "object") {
myChart.setOption(option);
}
window.addEventListener("resize", myChart.resize);
推荐链接
发表评论