看了很多文档都是实现提示框轮播的,而我要实现的功能是:柱状图有多条数据时,轮播展示其中几条,比如我有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>
- …/…/utils/options