结果展现

社会你龙哥，人丑话不多，先来张图!图片传不上去！！！能够公司限定了，人人本身空想下吧

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

恩，就这么多~写的不好，不明白的人人一同讨论.