echart柱状图自动滚动

最新推荐文章于 2024-08-12 14:23:08 发布

sunddy_x

最新推荐文章于 2024-08-12 14:23:08 发布

阅读量4.9k

点赞数 13

分类专栏： ECharts 文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/sunddy_x/article/details/120952700

版权

ECharts 专栏收录该内容

6 篇文章 2 订阅

订阅专栏

该博客展示了如何使用ECharts库创建一个带有内部滚动功能的柱状图。代码中，数据每两秒滚动一次，模拟数据更新的效果。通过设置dataZoom组件，实现了图表数据的动态显示，从'一月'到'十二月'的数据在图表中按顺序滚动。

摘要由CSDN通过智能技术生成

效果图

请添加图片描述

代码

<template>
    <div ref="myChart" style="width: 600px; height: 400px;"></div>
</template>

<script>
import * as echarts from 'echarts'

export default {
	mounted() {
        this.initChart()
    },
    methods: {
        initChart() {
            let data = [120, 200, 150, 80, 70, 110, 130, 150, 80, 70, 110, 130]
            let chart = echarts.init(this.$refs.myChart)
            let option = {
            	// 区域缩放
                dataZoom: [
                    { // 第一个 dataZoom 组件
                        type: 'inside',
                        xAxisIndex: 0, // 表示这个 dataZoom 组件控制 第一个 xAxis
                        startValue: 0, // 数据窗口范围的起始数值index
                        endValue: 5, // 数据窗口范围的结束数值index
                    },
                ],
                xAxis: {
                    type: 'category',
                    data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
                },
                yAxis: {
                    type: 'value',
                },
                series: [
                    {
                        data: data,
                        type: 'bar',
                    },
                ],
            }
            option && chart.setOption(option)
			// 设置定时器, 每隔2s判断是否滚动到末尾, 是则重置为初始状态, 否则向前滚动一位
            setInterval(() => {
                if (option.dataZoom[0].endValue == data.length - 1) {
                    option.dataZoom[0].endValue = 5
                    option.dataZoom[0].startValue = 0
                } else {
                    option.dataZoom[0].endValue =
                        option.dataZoom[0].endValue + 1
                    option.dataZoom[0].startValue =
                        option.dataZoom[0].startValue + 1
                }
                chart.setOption(option)
            }, 2000)
        },
    },
}
</script>