VUE中怎么實現(xiàn)v-charts的曲線顯示功能

這篇文章給大家分享的是有關VUE中怎么實現(xiàn)v-charts的曲線顯示功能的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

1. 應用背景

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

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

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

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

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

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

4. 前端顯示

前端曲線基于v-chart。

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

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 曲線標簽 ve-line

4.3.1 方法一：直接使用html標簽

<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ù)量要與上下文對應

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設置電能單位為kWh

4.5 注冊組件

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

components: { VeLine  }

5 總體效果

感謝各位的閱讀！關于“VUE中怎么實現(xiàn)v-charts的曲線顯示功能”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！