Echarts图表实现X轴自动滚动加载数据

icoo张某人

已于 2024-07-23 10:28:43 修改

阅读量351

点赞数 1

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

于 2024-06-14 15:54:25 首次发布

本文链接：https://blog.csdn.net/ZerZhang/article/details/139683520

版权

ECharts图表专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.用到了Echarts图表自带的dataZoom组件

2.使用定时器定时刷新数据

效果图

关键代码

 dataZoom: [
       {
           xAxisData: 0,//这里是从X轴的0刻度开始
           show: false,//是否显示滑动条
           type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
           startValue: 0, // 从头开始。
           endValue: 4  // 一次性展示5个。
       }
 ],

  setInterval(function () {
        if (xAxisData.length < 4) { return } else {
            // 每次向后滚动一个，最后一个从头开始。
            if (option.dataZoom[0].endValue == xAxisData.length) {
                option.dataZoom[0].endValue = 4;
                option.dataZoom[0].startValue = 0;
            }
            else {
                option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
                option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
                if (option.dataZoom[0].endValue == xAxisData.length) {
                    option.dataZoom[0].endValue = 4;
                    option.dataZoom[0].startValue = 0;
                }
            }
            myChart.setOption(option);
        }
    }, 5000);

以下是全部代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图表</title>
</head>

<body>
    <div>
        <div id="container" style="height:700px;width: 700px;background-color: black;"></div>
    </div>
</body>

</html>

<script src="./echarts.min.js"></script>

<script>
    var chartDom = document.getElementById('container');
    var myChart = echarts.init(chartDom);
    var option;
    var xAxisData = ["01-01","01-02","01-03","01-04","01-05","01-06","01-07","01-08","01-09","01-10"]
    var zongchang = 10
    var zongce = 5
    var data1 = [10,20,30,40,0,5,40,3,2,50]
    var data2 = [10,20,10,40,0,10,20,30,40,50]
    option = {
        legend: {
            y: 'bottom',
            x: 'center',
            data: ['在册人数5人', '在场人数10人',],
            textStyle: {
                color: "#fff"
            }
        },
        tooltip: {},
        xAxis: {
            data: xAxisData,
            axisLabel: {
                textStyle: {
                    fontSize: 15
                },
            },
            axisLine: {
                lineStyle: {
                    color: '#19ECFF',
                },
            }
        },
        dataZoom: [
            {
                xAxisData: 0,//这里是从X轴的0刻度开始
                show: false,//是否显示滑动条
                type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
                startValue: 0, // 从头开始。
                endValue: 4  // 一次性展示5个。
            }
        ],
        yAxis: {
            splitLine: {
                show: false,
            },
            axisLine: {
                lineStyle: {
                    color: '#19ECFF',
                }
            }
        },
        grid: {
            bottom: 50
        },
        series: [
            {
                name: '在册人数' + zongce + '人',
                type: 'bar',
                data: data1,
                barWidth: 20,
                itemStyle: {
                    normal: {
                        color: "#ffac36",
                        barBorderRadius: [15, 15, 0, 0],
                    }
                }
            },
            {
                name: '在场人数' + zongchang + '人',
                type: 'bar',
                data: data2,
                barWidth: 20,
                itemStyle: {
                    normal: {
                        color: "#00a0e9",
                        barBorderRadius: [15, 15, 0, 0]
                    }
                }
            },
        ]
    };
    option && myChart.setOption(option);

    setInterval(function () {
        if (xAxisData.length < 4) { return } else {
            // 每次向后滚动一个，最后一个从头开始。
            if (option.dataZoom[0].endValue == xAxisData.length) {
                option.dataZoom[0].endValue = 4;
                option.dataZoom[0].startValue = 0;
            }
            else {
                option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
                option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
                if (option.dataZoom[0].endValue == xAxisData.length) {
                    option.dataZoom[0].endValue = 4;
                    option.dataZoom[0].startValue = 0;
                }
            }
            myChart.setOption(option);
        }
    }, 5000);
</script>