vue項目中echarts實現K線圖


 

 

背景介紹:

vue項目,區塊鏈,需要寫比特幣和其他幣種漲幅的K線圖

一、安裝依賴

npm install echarts -S

 

二、引入

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

  

三、html

四、初始化echarts

 

 以上配置項option直接從echarts官網復制即可

五、調用初始化echarts函數

致此,靜態的K線圖已經形成了,在這個項目中,我們需要每0.5s就向后台發請求, 請求K線數據,由於請求數據是異步操作,而初始化是同步操作,所以會先執行初始化,但是初始化的時候數據還沒有獲取到,這時候就會報錯,而此時,也不能講初始化的函數放在回調里執行,因為要不斷的請求數據,如果將初始化函數放在回調里,那么就會每0.5s初始化一次,顯然是不可行的,所以我設置了一個標識符

思路:設置了一個get方法,在獲取數據的回調里調用get方法,每調用一次就讓flags+1,在這個函數里面判斷,flags是否等於1,如果是等於1,說明數據已經獲取到,而且是第一次獲取數據,這時候初始化echarts,這樣不但解決了初始化獲取不到數據就先執行的問題,而且這樣還保證了只初始化一次

六、從后端獲取數據,將數據動態更新

這個步驟耽誤了我大量的時間,一開始不知道如何將數據動態更新,后來看官方文檔

由於我設置的是每隔一秒發送一次請求,所以這里設置的是每隔一秒將獲取的數據動態更新,這個動態更新是寫在初始化函數中的,否則會報錯:option is not defind

六、總結

還有一個小插曲,沒有獲取后端數據的時候,我寫的是假數據,這時樣式沒有出現問題,當我獲取了后端返回的數據,樣式發生了變化,后來產品經理看過以后說是由於后端返回的數據中最大值和最小值相差太多,使最后一根K線太大,前面的K線過小,看着就好像一根線,而不是K線(忘記截圖了,這樣描述太不直觀了,明天如果有機會就截張圖放上來),總之,就是后端返回的數據不對,導致樣式發生了變化

至此,前端顯示已經完成,我們的功能還未完善,后端返回的數據依舊有問題

 

在我沒有解決問題的時候一直在網上搜,但是都沒有得到想要的答案,后來還是看官方文檔找到的,所以一定要多看官方文檔

下一個難點:vue項目實現多版本語言切換~

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM