Vue 使用 v-charts 顯示折線圖

D桃會開始學習前端開發 Vue是想將之前的 Heltec 膠囊 AC01與AC02 收集的資料顯示出來！ 今天先將練習繪製折線圖的方法記錄一下！

操作步驟：

1. 建立一個JSON檔案
2. 建立一個新的Vue專案 -dashboard
3. 安裝v-charts 插件
4. 讀取json檔案
5. 顯示到頁面

Step1: 建立一個JSON檔案

D桃是去S3 下載一個之前透過Heltec WB32 上傳的檔案。內容為

{“dID”:”Refrigerator_1",”pID”:2,”bRH”:405,”bT”:-161,”dRH”:”PLISPMKMLKORNPFPMJMEOONNTMLEFNOVMILHQULLKVSNJKLIPMVLMGPPBUUQGLTSTVLKHIRJLHHLOMNMJNILLMNNIHP”,”dT”:”MNMMMNMMMMMMMMNMMMNNMMNMMMMNMMNNMMMNMMMMNMMNNMMNMMMNMMMMMNMMMNMMMMMMMMMMNMMMMNMMMMNMMMMLNMM”,”t”:1599788218}

Ｄ桃就忘記截圖了! 下載應該不太難，不過等一下Vue 專案建好後要記得將檔案放到public/data的資料夾內。

Step2: 建立一個新的Vue專案 -dashboard

在CLI 下 ： vue create dashboard ，跑完它就搞定

Step3: 安裝v-charts 插件

v-charts 就是一個vue的組件，給我們用的！ 用之前要先安裝一下！

在CLI 下 ： npm i v-charts echarts，對就是複製貼上官網上面那行跑完它就搞定

到main.js 裡 去 import VeLine from ‘v-charts/lib/line.common’ 請參考這裡拉到底下的說明

然後由於我們想做成的成果是將原本的Vue logo 換成圖表

所以找到這個vue 組件 是 Home.vue，

直接將Home.vue的<img> 換成<ve-line>如上圖。然後跑一下！

v-charts 的範例已經放上我們的dashboard了

這就是範例對應的資料！

接下來就是將這資料換成我們的資料就可以了!

Step4:讀取json檔案

完工

到這裡Ｄ桃發現了問題，Vue 要讀取檔案需要明確的檔名！可是如果只是知道這個folder想知道檔名就很困難！D桃原本想說如果檔名都是timestamp ，那或許可以一個一個用for loop 找! 結果就當機了！

直接讀用S3內的local檔案有問題可能是D桃還找不到方法！ 找到時再回來補充吧！