echarts 柱状图 定时自动轮播(非提示框轮播)
2023-12-14 00:04:44
看了很多文档都是实现提示框轮播的,而我要实现的功能是:柱状图有多条数据时,轮播展示其中几条,比如我有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
文章来源:https://blog.csdn.net/qq_33030043/article/details/134825592
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!