vue--echarts折线图数据定时更新

设置一个容纳图表的具有宽高的dom容器
<div id="mychart1" style="width:570px;height:250px;"></div>

代码:
export default {
        mounted() {
            this.draw();
        },
        methods: {
            draw: function () {
                let echart1 = this.$echarts.init(document.getElementById('mychart1'));
                var randomData1 = [];
                var randomData2 = [];
                var randomData3 = [];
                var randomData4 = [];
                for(var i = 0; i<30; i++){
                    randomData1.push(Math.floor(Math.random()*100));
                    randomData2.push(Math.floor(Math.random()*100));
                    randomData3.push(Math.floor(Math.random()*100));
                    randomData4.push(Math.floor(Math.random()*100));
                }

                // 指定图表的配置项和数据
                var option1 = {
                    title:{
                        text:'<<当日设备OEE分析'
                    },
                    legend:{},
                    dataset: {
                        source: [
                            ['product', 'oee', 'qe', 'pe', 'ae'],
                            ['10:00', 41.1, 30.4, 65.1, 53.3],
                            ['11:00', 86.5, 92.1, 85.7, 83.1],
                            ['12:00', 24.1, 67.2, 79.5, 86.4],
                            ['13:00', 55.2, 67.1, 69.2, 72.4],
                            ['14:00', 55.2, 67.1, 69.2, 72.4],
                            ['15:00', 55.2, 67.1, 69.2, 72.4],
                            ['16:00', 55.2, 67.1, 69.2, 72.4]
                        ]
                    },
                    xAxis: {
                        type: 'category',

                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        { type: 'line', color:'blue'},
                        { type: 'line', color:'green'},
                        { type: 'line', color:'yellow'},
                        { type: 'line', color:'pink'}
                        ],

                };
 // 使用刚指定的配置项和数据显示图表。
                echart1.setOption(option1);
                setInterval(function(){
                    randomData1.push(Math.floor(Math.random()*100));
                    randomData1.shift();
                    randomData2.push(Math.floor(Math.random()*100));
                    randomData2.shift();
                    randomData3.push(Math.floor(Math.random()*100));
                    randomData3.shift();
                    randomData4.push(Math.floor(Math.random()*100));
                    randomData4.shift();

                    echart1.setOption({
                        xAxis: {
                            data: ['10:00','11:00','12:00','13:00','14:00','15:00','16:00']
                        },

                        series: [
                            { data: randomData1 , type: 'line', color:'blue'},
                            { data: randomData2,  type: 'line', color:'green'},
                            { data: randomData3,  type: 'line', color:'yellow'},
                            { data: randomData4,  type: 'line', color:'pink'}
                            ],

                    });
                }, 3000)
              }
            }
           }  
           

 

  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值