echarts 柱状图定时自动轮播（非提示框轮播）-编程知识

echarts 柱状图定时自动轮播（非提示框轮播）

看了很多文档都是实现提示框轮播的，而我要实现的功能是：柱状图有多条数据时，轮播展示其中几条，比如我有100条数据，不能全部展示，设置轮播5条或者10条，依次显示数据，并形成闭环。

（实现提示框轮播：echarts 提示框自动轮播）

重点：设置option中的属性： dataZoom

dataZoom: {show: false,startValue: 0, // 从头开始。endValue: 5, // 一次性展示几个
},

demo.vue

<template><v-echarts ref="chart"></v-echarts>
</template>
<script>
import  options from "../../utils/options";
export default {data() {return {};},created() {},mounted() {this.getChart();},beforeDestroy() {this.clearInterval();},methods: {getChart() {let seriesData = [12.3, 22.1, 12.4, 33.3, 1, 18.3, 2.1, 12.4, 3.3, 10];let xAxisData= ["一号","二号","三号","四号","五号","六号","七号","八号","九号","十号",];this.$refs.chart.setOption(options(seriesData, xAxisData));if (xAxisData.length <= 5) return;this.szTime = setInterval(() => {seriesData.push(seriesData.shift());xAxisData.push(xAxisData.shift());this.$nextTick(() => {this.$refs.chart.setOption(options(seriesData, xAxisData));});}, 3000);},clearSzInterval() {while (this.szTime >= 0) {clearInterval(this.szTime);this.szTime--;}},},
};
</script>