echarts line动态刷新数据

function menyMonitor(){






    var memory=echarts.init(document.getElementById('memoryUsage'));


    var date = [];
    var randomData = [];

    for(var i = 0; i<30; i++){
        date.push('第' + (i+1) + '天');
        randomData.push(Math.floor(Math.random()*100));
    }

// 指定图表的配置项和数据
    var option = {
        xAxis: [{

            type: 'category',
            boundaryGap: false,
            axisLine: { //坐标轴轴线相关设置。数学上的x轴
                show: true,
                lineStyle: {
                    color: '#233e64'
                },
            },
            axisLabel: { //坐标轴刻度标签的相关设置
                textStyle: {
                    color: '#6a9cd5',
                    margin:15,
                },
            },

            axisTick: { show: false,},
            data: date,
        }],
        yAxis: [{
            type: 'value',
            min: 0,
            max:140,
            splitNumber: 7,
            splitLine: {
                show: false,
                lineStyle: {
                    color: '#233e64'
                }
            },
            axisLine: {show: false,},
            axisLabel: {
                margin:20,
                textStyle: {
                    color: '#6a9cd5',

                },
            },
            axisTick: { show: false,},
        }],
        series: [{
            name: '异常流量',
            type: 'line',
            smooth: true, //是否平滑曲线显示
// 			symbol:'circle',  // 默认是空心圆(中间是白色的),改成实心圆
            symbolSize:0,

            lineStyle: {
                normal: {
                    color: "#3deaff"   // 线条颜色
                }
            },
            areaStyle: { //区域填充样式
                normal: {
                    //线性渐变,前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’,则该四个值是绝对像素位置。
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0,  color: 'rgba(61,234,255, 0.2)'},
                        { offset: 0.7,  color: 'rgba(61,234,255, 0)'}
                    ], false),

                    shadowColor: 'rgba(53,142,215, 0.9)', //阴影颜色
                    shadowBlur: 20 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
                }
            },
            data:randomData
        }]
    };


// 使用刚指定的配置项和数据显示图表。
        memory.setOption(option);

    var len = date.length;

    setInterval(function(){
        randomData.push(Math.floor(Math.random()*100));
        randomData.shift();
        date.push(len++);
        date.shift();
        memory.setOption({
            xAxis: {
                data: date
            },
            series: [{
                data: randomData
            }]
        });
    }, 2000)


    memory.setOption(option)

}

date,和randomData在实际开发中换成动态数据就好了

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值