快捷導(dǎo)航

基于VUE的v-charts的曲線顯示功能

更新時(shí)間：2019年10月01日 07:57:20 作者：JerryMouseLi

這篇文章主要介紹了基于VUE的v-charts的曲線顯示功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

1. 應(yīng)用背景

在做一個(gè)某路燈管理處的物聯(lián)網(wǎng)項(xiàng)目時(shí)，需要統(tǒng)計(jì)8個(gè)電表的電能曲線（時(shí)間-電能），需求就是能生成日?qǐng)?bào)（24個(gè)點(diǎn)，間隔1小時(shí)，實(shí)時(shí)），月報(bào)（30個(gè)點(diǎn)，間隔1天，取每天的凌晨1點(diǎn)數(shù)據(jù)），年報(bào)（每個(gè)月，1號(hào)凌晨1點(diǎn)數(shù)據(jù)開始間隔9天，每個(gè)月取3個(gè)點(diǎn)，總共36個(gè)點(diǎn)）。

2. 分析數(shù)據(jù)生產(chǎn)者生成

首先采集服務(wù)每隔一段時(shí)間會(huì)去采集電表的電能數(shù)據(jù)，模擬歷史表會(huì)利用存儲(chǔ)過程將實(shí)時(shí)數(shù)據(jù)寫入his_aic表里。

3. 取出數(shù)據(jù)消費(fèi)者

30天 aic數(shù)據(jù)4萬條記錄左右日?qǐng)?bào)，月報(bào)可以直接在歷史數(shù)據(jù)表中取
日表，定時(shí)任務(wù)，每隔1小時(shí)存入整點(diǎn)數(shù)據(jù)（如果沒有整點(diǎn)，排序之后取接近點(diǎn)數(shù)據(jù)），一天24個(gè)數(shù)據(jù)，一年8760條記錄。
月表，定時(shí)

任務(wù)，每天凌晨1點(diǎn)取數(shù)據(jù)，按時(shí)間存入，一個(gè)月30條記錄
年表，定時(shí)任務(wù)，1號(hào)，10號(hào)，19號(hào)，28號(hào)（每個(gè)月取4個(gè)數(shù)據(jù)，按時(shí)間記錄，一年48條記錄）
定時(shí)任務(wù)利用Coravel定時(shí)器完成，具體可參見Coravel定時(shí)器相關(guān)博客

4. 前端顯示

前端曲線基于v-chart。

在使用 echarts 生成圖表時(shí)，經(jīng)常需要做繁瑣的數(shù)據(jù)類型轉(zhuǎn)化、修改復(fù)雜的配置項(xiàng)，v-charts 的出現(xiàn)正是為了解決這個(gè)痛點(diǎn)。基于 Vue2.0 和 echarts 封裝的 v-charts 圖表組件，只需要統(tǒng)一提供一種對(duì)前后端都友好的數(shù)據(jù)格式設(shè)置簡(jiǎn)單的配置項(xiàng)，便可輕松生成常見的圖表。

4.1 安裝V-charts插件

npm i v-charts echarts -S

如果已經(jīng)安裝了echarts，則直接安裝v-charts即可

npm i v-charts -S

4.2 引入veline曲線插件

import VeLine from 'v-charts/lib/line'

4.3 曲線標(biāo)簽 ve-line

4.3.1 方法一：直接使用html標(biāo)簽

<template>
 <div>
  <ve-line :data="chartData" :settings="chartSettings"></ve-line>
 </div>
</template>

4.3.2 方法二：pug編譯

4.3.2.1 pug的安裝

先安裝node環(huán)境

安裝支持pug依賴：npm install pug pug-loader pug-filters -D
安裝支持jade依賴：npm install jade jade-loader -D

4.3.2.2 pug的使用

<template lang="pug">
     div
      ve-line(:data='chartData', :settings='chartSettings')
</template>

注意：使用pug空格數(shù)量要與上下文對(duì)應(yīng)

4.4 前端寫入調(diào)試模擬數(shù)據(jù)

export default {
 data(){  
  return {
   chartData: {
    columns: ['日期','電能1','電能2','電能3','電能4','電能5','電能6','電能7','電能8'],
    rows: [
     { '日期': '10月1日', '電能1': 0, '電能2': 1, '電能3': 0.5, '電能4': 0.63,'電能5': 0.8, '電能6': 2, '電能7': 2.1, '電能8': 1.7 },
     { '日期': '10月2日', '電能1': 1, '電能2': 2, '電能3': 4, '電能4': 0.9,'電能5': 1.1, '電能6': 2.1, '電能7': 4.3, '電能8': 2.6 },
     { '日期': '10月3日', '電能1': 1.6, '電能2': 2.6, '電能3': 4.5, '電能4': 1.9,'電能5': 2.3, '電能6': 3.5, '電能7': 5.3, '電能8': 3.2 },
     { '日期': '10月4日', '電能1': 2.3, '電能2': 5.2, '電能3': 5.4, '電能4': 2.7,'電能5': 3.2, '電能6': 4.3, '電能7': 6.8, '電能8': 3.5 },
     { '日期': '10月5日', '電能1': 3.8, '電能2': 6.2, '電能3': 6.4, '電能4': 4.5,'電能5': 4.5, '電能6': 6.5, '電能7': 7.1, '電能8': 5.5 },
     { '日期': '10月6日', '電能1': 5.3, '電能2': 6.8, '電能3': 8.4, '電能4': 5.6,'電能5': 6.3, '電能6': 7.8, '電能7': 7.5, '電能8': 7.3 }
    ]
   },
   chartSettings: {
     yAxisName: ['kWh']
   },
  }
 }
 components: { VeLine }
}

使用 data 屬性表示圖表的數(shù)據(jù)，使用 settings 用作圖表的顯示狀態(tài)配置，settings 中所包含的是具體的圖表配置，這里通過yAxisName設(shè)置電能單位為kWh

4.5 注冊(cè)組件

4.4中已經(jīng)加入了注冊(cè)組件的代碼。

components: { VeLine }