2. 程式人生 > >Vue 中使用vue2-highcharts實現實時曲線資料展示示例

Vue 中使用vue2-highcharts實現實時曲線資料展示示例

阿新 • • 發佈：2019-01-22
import vchooser from '../components/chooser.vue' import VueHighcharts from 'vue2-highcharts' export default { data() { return{ setIntervalNum:0, itemStatus:0, itemTitle:'功率因數', itemType:this.$route.params.meterType, periodList:[ { label: '功率因數'
, value: 0 }, { label: '電流', value: 1 },{ label: '電壓', value: 2 },{ label: '有功功率', value: 3 },{ label: '無功功率', value: 4
},{ label: '視在功率', value: 5 },{ label: '有功電量', value: 6 }, ], ownerFreeData: [], options: { global: { useUTC: false }, chart: { type: 'spline'
}, title: { text: '功率因素' //text: ' ' }, subtitle: { text: '' }, xAxis: { type: 'category' }, yAxis: { title: { text: '功率因素(%)' //text: ' ' }, labels: { formatter: function () { return this.value; } } }, tooltip: { crosshairs: true, shared: true }, credits: { enabled: false }, plotOptions: { spline: { marker: { radius: 4, lineColor: '#666666', lineWidth: 1 } } }, series: [] } } }, methods: { onParamChange (attr, val) { this.itemStatus = val.value; this.$refs.lineCharts.removeSeries(); var title = ''; let lineCharts = this.$refs.lineCharts; if(this.itemStatus == 0){ title = '功率因素'; lineCharts.getChart().title.update({ text: '功率因素' }); lineCharts.getChart().yAxis[0].setTitle({text:'功率因素(%)'}); if(this.itemType == 0){ lineCharts.addSeries({name: '功率因素',data: []}); }else if(this.itemType == 1){ lineCharts.addSeries({name: '總功率因素',data: []}); lineCharts.addSeries({name: 'A相率因素',data: []}); lineCharts.addSeries({name: 'B相率因素',data: []}); lineCharts.addSeries({name: 'C相率因素',data: []}); } }else if(this.itemStatus == 1){ title = '電流'; lineCharts.getChart().title.update({ text: '電流' }); lineCharts.getChart().yAxis[0].setTitle({text:'電流(A)'}); if(this.itemType == 0){ lineCharts.addSeries({name: '電流',data: []}); }else if(this.itemType == 1){ lineCharts.addSeries({name: 'Ia 相電流',data: []}); lineCharts.addSeries({name: 'Ib 相電流',data: []}); lineCharts.addSeries({name: 'Ic 相電流',data: []}); lineCharts.addSeries({name: '零序電流',data: []}); } }else if(this.itemStatus == 2){ title = '電壓'; lineCharts.getChart().title.update({ text: '電壓' }); lineCharts.getChart().yAxis[0].setTitle({text:'電壓(V)'}); if(this.itemType == 0){ lineCharts.addSeries({name: '電壓',data: []}); }else if(this.itemType == 1){ lineCharts.addSeries({name: 'A相電壓',data: []}); lineCharts.addSeries({name: 'B相電壓',data: []}); lineCharts.addSeries({name: 'C相電壓',data: []}); } }else if(this.itemStatus == 3){ title = '有功功率'; lineCharts.getChart().title.update({ text: '有功功率' }); lineCharts.getChart().yAxis[0].setTitle({text:'有功功率(KVA)'}); if(this.itemType == 0){ lineCharts.addSeries({name: '有功功率',data: []}); }else if(this.itemType == 1){ lineCharts.addSeries({name: '總有功功率',data: []}); lineCharts.addSeries({name: 'A相有功功率',data: []}); lineCharts.addSeries({name: 'B相有功功率',data: []}); lineCharts.addSeries({name: 'C相有功功率',data: []}); } }else if(this.itemStatus == 4){ title = '無功功率'; lineCharts.getChart().title.update({ text: '無功功率' }); lineCharts.getChart().yAxis[0].setTitle({text:'有功功率(KVA)'}); if(this.itemType == 0){ lineCharts.addSeries({name: '無功功率',data: []}); }else if(this.itemType == 1){ lineCharts.addSeries({name: '總無功功率',data: []}); lineCharts.addSeries({name: 'A相無功功率',data: []}); lineCharts.addSeries({name: 'B相無功功率',data: []}); lineCharts.addSeries({name: 'C相無功功率',data: []}); } }else if(this.itemStatus == 5){ title = '視在功率'; lineCharts.getChart().title.update({ text: '視在功率' }); lineCharts.getChart().yAxis[0].setTitle({text:'視在功率(KVA)'}); if(this.itemType == 0){ lineCharts.addSeries({name: '視在功率',data: []}); }else if(this.itemType == 1){ lineCharts.addSeries({name: 'A相視在功率',data: []}); lineCharts.addSeries({name: 'B相視在功率',data: []}); lineCharts.addSeries({name: 'C相視在功率',data: []}); lineCharts.addSeries({name: '總視在功率',data: []}); } }else if(this.itemStatus == 6){ title = '總有功電量'; lineCharts.getChart().title.update({ text: '總有功電量' }); lineCharts.getChart().yAxis[0].setTitle({text:'總有功電量(KWH)'}); lineCharts.addSeries({name: '總有功電量',data: []}); } }, routerBack(){ this.$router.go(-1); clearInterval(this.setIntervalNum); }, getList(){ var title = ''; let lineCharts = this.$refs.lineCharts; if(this.itemStatus == 0){ title = '功率因素'; lineCharts.getChart().title.update({ text: '功率因素' }); lineCharts.getChart().yAxis[0].setTitle({text:'功率因素(%)'}); if(this.itemType == 0){ lineCharts.addSeries({name: '功率因素',data: []}); }else if(this.itemType == 1){ lineCharts.addSeries({name: '總功率因素',data: []}); lineCharts.addSeries({name: 'A相率因素',data: []}); lineCharts.addSeries({name: 'B相率因素',data: []}); lineCharts.addSeries({name: 'C相率因素',data: []}); } } this.setIntervalNum = setInterval(this.getRealTime,1000 * 60) }, getRealTime(){ this.$http.post(this.URLINFO + '/mobile/getRealTransInfo.do',{}) .then(function (res) { //獲取圖表上曲線點的數量，如果數量大於10，flag為true var itemData = lineCharts.getChart().series[0].data; var flag = false; if(itemData.length >= 10){ flag = true; } //新增一個點(flag為false,表示新增一個點的同時不移除最前面的資料點，如果flag為true,表示新增一個點的同時移除最前面的資料點) lineCharts.getChart().series[0].addPoint([res.data.num1,res.data.num2],false,flag); lineCharts.getChart().redraw(); }) .catch(function (error) { this.$toast('查詢監測點實時資料異常'); }); } }, components: { vchooser, VueHighcharts }, mounted () { this.getList() } } function getCurrentTime(){ var date = new Date(); var hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours(); var minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes(); var second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds(); return hour + ':' + minute + ':' + second; }

相關推薦

Vue 中使用vue2-highcharts實現實時曲線資料展示示例

import vchooser from '../components/chooser.vue' import VueHighcharts from 'vue2-highcharts' export default { data() { return{

Vue 中使用vue2-highcharts實現曲線資料展示示例

import vchooser from '../components/chooser.vue' import VueHighcharts from 'vue2-highcharts' import daypicker from '../components/daypicker.vue'

vue中的watch方法 實時同步儲存資料

watch 監視模式裡面有個獨特的方法handler 注意要加上deep： true。deep為true時，當物件的key值改變時也監聽 當值發生改變被watch監視到觸發了事件 開始執行handler 把修改的值items放到封裝好的函式save儲存到瀏覽器本地儲存 在data資料裡面把i

在vue中使用axios實現跨域請求並且設定返回的資料的格式是json格式，而不是jsonp格式

在vue中使用axios實現跨域請求需求分析：在專案中需要抓取qq音樂的歌曲列表的資料，由於要請求資料的地址url=https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg。從qq音樂的官網上可以看到該請求的請求

Vue中使用children實現路由的嵌套

con tle lin 對象 routes ont methods 根路徑 doc Vue中使用children實現路由的嵌套 相關Html: <!DOCTYPE html> <html lang="en"> <head&

Vue中結合clipboard實現複製功能

首先現在Vue中引入clipboard npm install clipboard --save 在需要使用的元件中import 引入clipboard import Clipboard from 'clipboard'; clipboard的實際使用 不論是單按鈕複

vue_music:排行榜rank中top-list.vue中樣式的實現:class

排行榜的歌曲列表，根據排名渲染不同的樣式，同時需要考慮解析度的2x 3x圖 不同的樣式——:class 考慮解析度的2x 3x圖——需要在stylu中的mixin中bgImage根據螢幕解析度選擇圖片 1.功能 &lt;div class="rank" v-show="ran

Vue.js框架--Vuex實現元件裡資料持久化（二十八）

主要操作技能：      Vuex 是一個專為 Vue.js 應用程式開發的狀態管理模式      新聞頁面每次切換路由時，再次訪問就會請求資料；那麼如何直接從vuex中持久化資料呢？      

樹莓派/PC實現實時攝像頭資料共享（Python—picamera）

上次實驗使用Python—OpenCV實現，發現傳輸效果並不是很理想，接下來使用Python和picamera實現樹莓派/PC實時攝像頭資料共享，主要也可分為伺服器和客戶端兩部分。 伺服器Demo如下： import numpy as np import cv2 import socke

樹莓派/PC實現實時攝像頭資料共享（Python—OpenCV）

使用Python和OpenCV實現樹莓派/PC實時攝像頭資料共享，主要分為伺服器和客戶端兩部分。 伺服器Demo如下： #伺服器端 import socket import threading import struct import time import cv2 import nu

vue中利用sass實現整體換膚和字型大小設定

一、前言 　利用Sass預處理實現換膚和字型大小調整。 　實現方法：1.利用全域性變數和bus事件，使用js方式調整字型和顏色(這裡暫不討論); 　　　　　　2.利用Sass預處理方式實現 　　　　　　　　主題更換：使用setAttribute()為html根節點新增屬性，根據屬性的值再進行不同主題的

在vue中使用jsonp跨域訪問資料

1.首先在src目錄下建立一個api目錄，下面建立cofing.js和recommend.js檔案，在config.js檔案中是一些跨域訪問的引數：export const commonParams = { source: 'wap' //訪問時的公共引數 } exp

Caffe中LMDB介面實現多標籤資料準備及訓練

有不少部落格講Caffe多標籤輸入的問題，但總覺得講的不夠透徹，在實踐角度上沒有給出詳細的指導，所以本文力求能給出詳細的實踐過程和說明。 Caffe多標籤輸入常用的的方法有以下幾種： 1. 修改Caffe原始碼使其支援多標籤輸入，參考CSDN部落格《

vue中props（父組傳遞資料給子元件）的使用

  通過props關鍵字可以傳遞字串、數字、布林、陣列、物件、函式   方式一： 在子元件中用 props關鍵字，後面的每個資料表示的是父元件給子元件要傳遞的值，其值的資料型別由父元件定義 props: ['isShowDialog', 'ste

linux中編寫指令碼實現將某資料夾下半小時之內的圖片複製到另一個資料夾下（簡單）實現

1.首先在根目錄下我建立一個叫sh的資料夾 命令:    mkdir sh  2.進入sh資料夾中  命令:    cd sh 3.我們首先建立一個名叫test.sh的指令碼  命令： touch test.sh   並且對這個指令碼進行許可權賦予   命令:     

vue中純html實現過度條動畫

效果：因為錄製的軟體關係，顯的有點卡，專案上自己哼哧哼哧地實現了這個功能，so，提升蠻大的，so，記錄一下，視訊裡面過度條移上移下，可以利用class 或style 動態渲染解決這個問題，我懶得寫了。 動畫效果 是利用計時器實現的，也有css動畫實現。自己發上來的程式碼稍微改了一下，可供大家參考

vue中的axios.post使用json資料傳輸，出現請求頭欄位內容型別是不被允許的情況的解決方案

問題描述： 由於restful介面需要在頭部header傳遞兩個欄位： Content-Type: application/json Access-Token: 84c6635800b14e0eba4f7ece65e095a1 但是，在vue.js裡面配置： 執行傳送的時候出現： 意思是

vue中整合pdfjs實現分頁線上預覽

<template> <div id="div_read_area_scrool" class="no-scrollbar--x" :style="'text-align:center;height:'+ '500px;'+'overflow: auto;

從 JS Event Loop 機制看 Vue 中 nextTick 的實現原理

本文來自作者 大師兄 在 GitChat 上分享「從 JS Event Loop 機制看 Vue 中 nextTick 的實現原理」，「閱讀原文」檢視交流實錄 「文末高能」 編輯 | 泰龍 作為一名前端，一直以來以精通 Javascript 為目標。其實說實話精通真的挺難，不是你記住全部的 AP

ODI利用CDC實現實時同步資料

（內容有借鑑其他文件，親身實踐成功~） 需求： table_02作為目標表，需要實時的與源資料表table_01同步（即table_01更新或者是插入或者是刪除了一行記錄，table_02能夠實時的同步此操作----此處設定為延時10s同步------已經很了不得了 好伐！