摘要：開始讓動起來我會直接貼部分代碼加少量解釋，建議先看下官方給的動態(tài)實時刷新示意圖循環(huán)次，線從圖表右側(cè)開始出現(xiàn)，軸會分為秒。

社會你龍哥，人丑話不多，先來張圖!圖片傳不上去！！！可能公司限制了，大家自己幻想下吧

由于技術(shù)現(xiàn)水平限制，需要用到兩個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 "" + this.series.name + "
" +
                                Highcharts.dateFormat("%Y-%m-%d %H:%M:%S", this.x) + "
" +
                                (this.y * 100).toFixed(2) + "%"
                        } else {
                            return "" + this.series.name + "
" +
                                Highcharts.dateFormat("%Y-%m-%d %H:%M:%S", this.x) + "
" +
                                this.y
                        }
                    }
                }

我會直接貼部分代碼加少量解釋，建議先看下官方給的動態(tài)實時刷新示意圖https://www.hcharts.cn/demo/h...

循環(huán)240次，線從圖表右側(cè)開始出現(xiàn)，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進(jìn)行數(shù)據(jù)的廣播

var SocketCluster = require("socketcluster-client")

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

這里會在代碼注釋里詳細(xì)說明
                      

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開始訂閱數(shù)據(jù)
                        sub1.watch(function(data1) {
                            if(data1) {
                                _self.cpudata = data1["system-cpu"];
                                _self.ramdata = data1["system-ram"];
                            }
                        });
                        
                        _self.timer.timer1=setInterval(function() {
                          //這里用時間驅(qū)動，將數(shù)據(jù)添加到圖表中，cpudata沒有數(shù)據(jù)的話
                          //會一直保持水平運(yùn)動。
                            _self.x = (new Date()).getTime();
                            series1.addPoint([_self.x, _self.cpudata], true, true, true);                    
                        }, 1000)

                    }
                }
            }

最后離開路由記得銷毀我們的定時器

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

恩，就這么多~寫的不好，不明白的大家一起探討.