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

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>

是否使用图例

+

=

切换图例图标

circle  圆

rect 正方形

roundRect 圆角正方形

triangle三角形

diamond 菱形

pin 地图坐标

base64图片或者svg路径

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值