資訊專欄INFORMATION COLUMN
摘要：開始讓動(dòng)起來我會(huì)直接貼部分代碼加少量解釋，建議先看下官方給的動(dòng)態(tài)實(shí)時(shí)刷新示意圖循環(huán)次，線從圖表右側(cè)開始出現(xiàn)，軸會(huì)分為秒。
效果展示
社會(huì)你龍哥，人丑話不多，先來張圖!圖片傳不上去?。。】赡芄鞠拗屏?，大家自己幻想下吧
highcharts環(huán)境搭配由于技術(shù)現(xiàn)水平限制，需要用到兩個(gè)Highcharts，下面我會(huì)解釋，先上代碼
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實(shí)例化，我需要用到highchats自帶的將時(shí)間格式化的方法。
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
}
}
}
開始讓Highcharts動(dòng)起來
我會(huì)直接貼部分代碼加少量解釋，建議先看下官方給的動(dòng)態(tài)實(shí)時(shí)刷新示意圖https://www.hcharts.cn/demo/h...
循環(huán)240次，線從圖表右側(cè)開始出現(xiàn)，X軸會(huì)分為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
});
這里會(huì)在代碼注釋里詳細(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() {
//這里用時(shí)間驅(qū)動(dòng)，將數(shù)據(jù)添加到圖表中，cpudata沒有數(shù)據(jù)的話
//會(huì)一直保持水平運(yùn)動(dòng)。
_self.x = (new Date()).getTime();
series1.addPoint([_self.x, _self.cpudata], true, true, true);
}, 1000)
}
}
}
最后離開路由記得銷毀我們的定時(shí)器
beforeDestroy:function(){
clearInterval(this.timer.timer1);
}
恩，就這么多~寫的不好，不明白的大家一起探討.
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/84434.html
摘要：與定時(shí)器的恩恩怨怨。這時(shí)候我這樣做的首先要把定時(shí)器填進(jìn)數(shù)據(jù)中控制住定時(shí)器的聲明周期，否則它會(huì)煩死你在項(xiàng)目中的運(yùn)用。 本次寫的項(xiàng)目是關(guān)于機(jī)器終端管理的,一開始使用的是最基本的bootstrap+jq+html以及一些小插件，后來由于項(xiàng)目有很多重復(fù)度很高的地方，而且老大要求擴(kuò)展度要高，比如頭部，左邊欄，所以決定和另一名前端小伙伴使用框架進(jìn)行項(xiàng)目重構(gòu)（小項(xiàng)目啦）,最終選擇了Vue+webpa...
以下為個(gè)人目前接觸到的前端技術(shù)，歡迎大家補(bǔ)充。 一、前端技術(shù)框架 1、Vue.js 官網(wǎng)：https://cn.vuejs.org/ Vue CLI：https://cli.vuejs.org/ 菜鳥教程：http://www.runoob.com/w3cnote... Nuxt.js：https://zh.nuxtjs.org/ 桌面應(yīng)用Electron：https:...
摘要：渲染能力采用渲染除了對(duì)使用，一般來說，更適合繪制圖形元素?cái)?shù)量非常大這一般是由數(shù)據(jù)量大導(dǎo)致的圖表如熱力圖地理坐標(biāo)系或平行坐標(biāo)系上的大規(guī)模線圖或散點(diǎn)圖等，也利于實(shí)現(xiàn)某些視覺特效如交通圖。 一．簡介 echartsecharts是百度公司前端開發(fā)的一個(gè)圖表庫，2013年發(fā)布第一版，主要采用canvas畫圖，目前版本3.8.4；完全免費(fèi)； highcharthighcharts是國外的一家公司...
摘要：水平值，以像素計(jì)，在畫布上放置圖像的位置。規(guī)定要使用的圖像畫布或視頻。要使用的圖像的高度。實(shí)現(xiàn)縮放頻譜圖已經(jīng)做好縮放操作，并把起始點(diǎn)和結(jié)束點(diǎn)傳遞給父組件，再有父組件傳遞給瀑布圖組件，動(dòng)態(tài)修改的剪切屬性。 作者：codexu _ 廢話不多說，先上成品圖： showImg(https://segmentfault.com/img/remote/1460000020161522); 再來個(gè)迷...
閱讀 920·2021-11-24 10:44
閱讀 2866·2021-11-11 16:54
閱讀 3374·2021-10-08 10:21
閱讀 2245·2021-08-25 09:39
閱讀 3012·2019-08-30 15:56
閱讀 3524·2019-08-30 13:46
閱讀 3555·2019-08-23 18:09
閱讀 2207·2019-08-23 17:05
