Vue+Echarts实现柱状图轮播效果-第二版

之前使用定时器加Echarts提供的dataZoom组件，实现了轮播效果，但是在大数据量使用等情况下，出现了一些问题，于是使用了另一种方式，主要用到的还是定时器。

效果图和之前这篇一样，可以参考下：《Vue实现柱状图自动横向滚动》

原理： 初始先展示几条数据，通过定时器动态获取并更改Echarts配置项数据，实现左右轮播效果。

过程：

1. 修改后台返回的数据，在本次使用中，每次展示四个柱状图，所以，先从每一类总的数据中，通过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);
   

2. 将数据放置到配置项中，每次展示四条数据。

   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,		// 前四条数据
           }
       ],
   }
   

3. 添加定时器（重点）

   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);
   }
   

4. 绘制图表

   if (option && typeof option === "object") {
       myChart.setOption(option);
   }
   window.addEventListener("resize", myChart.resize);