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);
        
    }

恩，就這麼多~寫的很差，不明白的你們一塊兒探討.