echarts的x轴自动动态刷新

最新推荐文章于 2024-06-14 15:54:25 发布

半途流浪

最新推荐文章于 2024-06-14 15:54:25 发布

阅读量1.2w

点赞数 3

分类专栏：前端文章标签： echarts javascript 折线图动态刷新

本文链接：https://blog.csdn.net/ericlee1994/article/details/70145111

版权

前端专栏收录该内容

7 篇文章 1 订阅

订阅专栏

例子为x轴动态刷新且x轴为时间，粘出了全部代码供大家参考

新手上路各位多多指导，谢谢！

<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
    <style type="text/css">
        .boxjkaj{height: 49%;width: 57.8% ;}
    </style>
</head>
<body style="height: 100%; margin: 0">
<div class="boxjkaj" id="container" ></div>
<script type="text/javascript" src="js/echarts.js"></script>
<script src="echarts-all.js"></script>
<script type="text/javascript">
    var dom = document.getElementById("container");
    var myline2 = echarts.init(dom);
    option = null;
    var startTime=[2012,11,11,11,1,1];
    var d=new Date();
    d.setFullYear(startTime[0]);
    d.setMonth(startTime[1]);
    d.setDate(startTime[2]);
    d.setHours(startTime[3]);
    d.setMinutes(startTime[4]);
    d.setSeconds(startTime[5]);

    var base = +d;
    //后台传递开始
    var oneDay = 1000;
    var date = [];
    var num = 0;

    var data1 = [Math.random()];
    var data2 = [Math.random()];

    var now = new Date(base);

    function addData(shift) {
        var tmp = [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/') + "\n" + [ now.getHours(),  now.getMinutes(),  now.getSeconds()].join(':');
        date.push(tmp);
        data1.push((Math.random() - 0.4) * 10 + data1[data1.length - 1]);
        data2.push((Math.random() - 0.4) * 10 + data1[data1.length - 1]);
        if (shift) {
            date.shift();
            data1.shift();
            data2.shift();
        }
        now = new Date(+new Date(now) + oneDay);
    }

    for (var i = 1; i <= 6; i++) {
        num = num + 1;
        addData();
    }

    var xcd='CUFen'
    option ={
        backgroundColor:['#00cccc'],
        color:['#2D7FCC','#87314C'],
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            x: 'right',
            data:[xcd,'CUF'],
            textStyle:{
                color:"#FFFFFF",
                fontsize:5
            }
        },
        xAxis: {
            axisLabel:{ 
                textStyle:{
                    color:'#FFFFFF'
                },
                interval:0,
            },
            axisLine: {
                lineStyle: {
                    color:'#0B438B'
                }
            },
            type: 'category',
            boundaryGap: false,
            data: date
        },
        yAxis: {
            splitLine:{
                show:false,
            },
            axisLine: {
                lineStyle: {
                    color:'#0B438B',
                }
            },
            axisLabel: {
                textStyle: {
                    color: '#FFFFFF'
                }
            },
            boundaryGap: [0, '50%'],
            type: 'value'
        },
        grid: {
            top:'3%',
            left: '1%',
            right: '5%',
            bottom: '5%',
            containLabel: true,
        },
        series: [
            {
                name:'CUFen',
                type:'line',
                data:data1
            },
            {
                name:'CUF',
                type:'line',
                data:data2
            },
        ]
    };

    setInterval(function () {
        addData(true);
        myline2.setOption({
            xAxis: {
                data: date
            },
            series: [
                {
                    name: 'CUFen',
                    data: data1,
                },
                {
                    name: 'CUF',
                    data: data2,
                },
            ]
        });
    }, 1000);
    if (option && typeof option === "object") {
        myline2.setOption(option, true);
    }
</script>
</body>
</html>

前后台交互的话date使用数组即可，如果是字符串的话请使用如下代码将字符串转数组：