Vue—Cli中使用动态Highcharts line图表超初级教学

效果展示

社会你龙哥，人丑话不多，先来张图!图片传不上去！！！可能公司限制了，大家自己幻想下吧

---

highcharts环境搭配

由于技术现水平限制，需要用到两个Highcharts，下面我会解释，先上代码

npm install --save highcharts
npm install --save vue-highcharts  

下载好后，在main.js页面引入Vue-hightcharts;

import VueHighcharts from 'vue-highcharts';
Vue.use(VueHighcharts)\

接着在我们需要图表的页面加入以下代码

 var Highcharts = require('highcharts');

这里我将highcharts实例化，我需要用到highchats自带的将时间格式化的方法。

Highcharts.setOptions({
                global: {
                    useUTC: false
                }
            });

tooltip: {
                    enabled: true,
                    formatter: function() {
                        if(this.y <= 1) {
                            return '<b>' + this.series.name + '</b><br/>' +
                                Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
                                (this.y * 100).toFixed(2) + '%'
                        } else {
                            return '<b>' + this.series.name + '</b><br/>' +
                                Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
                                this.y
                        }
                    }
                }

开始让Highcharts动起来

我会直接贴部分代码加少量解释，建议先看下官方给的动态实时刷新示意图https://www.hcharts.cn/demo/h...

循环240次，线从图表右侧开始出现，X轴会分为240秒。

series: [{
                        type: 'line',
                        name: "line1",
                        data: (function() {
                            let data = [],
                                time = Date.parse(new Date()),
                                i;
                            for(i = -239; i <= 0; i += 1) {
                                data.push({
                                    x: time + i * 1000,
                                    y: 0
                                });
                            }
                            return data;
                        }()),
                        color: '#f8672c',
                        lineWidth: 1
                    }]

我们用的socketcluster进行数据的广播

var SocketCluster = require('socketcluster-client')

var socket = SocketCluster.connect({
    port: 80,
    hostname: "xxx.xxx.xxx.xxx",
    path: '/xxx/xxx',
    secure: false
});

这里会在代码注释里详细说明
                      

events: {

                    load: function() {
                        // set up the updating of the chart each second
                        var series1 = this.series[0];
                        var machId = _self.$route.params.id;
                        //获取路由传过来的id
                        var sub1 = socket.subscribe(`${machId}-counter-overview`);
                        //sub1开始订阅数据
                        sub1.watch(function(data1) {
                            if(data1) {
                                _self.cpudata = data1['system-cpu'];
                                _self.ramdata = data1['system-ram'];
                            }
                        });
                        
                        _self.timer.timer1=setInterval(function() {
                          //这里用时间驱动，将数据添加到图表中，cpudata没有数据的话
                          //会一直保持水平运动。
                            _self.x = (new Date()).getTime();
                            series1.addPoint([_self.x, _self.cpudata], true, true, true);                    
                        }, 1000)

                    }
                }
            }

最后离开路由记得销毁我们的定时器

beforeDestroy:function(){
        
        clearInterval(this.timer.timer1);
        
    }

恩，就这么多~写的不好，不明白的大家一起探讨.