點擊按鈕切換顯示不同echarts圖表

眾所周知，調(diào)用echarts方法要寫在mounted周期里，因為在頁面處于created周期時，還得不到數(shù)據(jù)，沒辦法渲染到echarts圖表上(具體原因查看vue生命周期)，但是當點擊按鈕后切換圖表，涉及到是否能夠找到要渲染的dom，需要結合v-if和v-show來靈活使用。

廢話不多說，開始拿例子說話，沒時間的直接看例子后面的結論。

點擊按鈕后直接切換echarts圖表(updated的應用) 本次案例是點擊按鈕，在echarts圖表和vueSeamlessScroll組件之前切換，出現(xiàn)兩種情況

1、使用v-if時

按鈕index默認為0，查看頁面時，echarts圖表在mounted里面調(diào)用，按鈕點擊“入駐服務”后，頁面顯示如下

到目前一切都正常，等再切回index為0的時候，幺蛾子就來了，echarts圖表它不顯示了

看到這里，應該都明白，因為已經(jīng)過了mounted周期，在頁面操作屬于在其他周期函數(shù)里的事情…

2、使用v-show時

index為0時，echarts圖表正常，index為1時，vueSeamlessScroll組件它不會自動輪播了?。。【驮谖乙詾槭沁@個組件的問題，甚至都要去網(wǎng)上百度如何更加深入了解這個組件的時候，突然想起來，方向可能是，如何同步更新視圖。這個時候不禁讓我想到每次面試都被問爛的vue生命周期，用updated()周期函數(shù)配合v-if使用即可。

結論：遇到通過按鈕在同一個頁面中來更新視圖的echarts之類的問題，使用updated周期函數(shù)

按鈕點擊事件實現(xiàn)一個頁面獲取多個echarts圖表

最近導師讓完成一個任務，任務的大概內(nèi)容是，5個按鈕分別是1-5號，還有另外兩個按鈕是最近5小時和最近24小時，通過點擊按鈕實現(xiàn)動態(tài)的從后臺獲取符合條件的數(shù)據(jù)，并展示在前端echarts里面，當時接到這個任務之后腦子是比較蒙的，后來經(jīng)過了大概一周的研究終于搞定了，在此做個記錄，也是為了給大家分享一下整體的思路。先把截圖奉上！

1號最近5小時的數(shù)據(jù)：

1號最近24小時的數(shù)據(jù)：

在此說明一下，橫坐標和縱坐標的值都是通過后臺從數(shù)據(jù)庫里讀取出來的，而且eachers圖是動態(tài)的，不是靜止不動的，這只是截圖原因。

我的心路歷程

我拿到這個任務的時候一開始的需求是是要靜態(tài)的，并且是要4個一條線的圖，所以我的第一想法和大家是一樣的去官網(wǎng)上貼代碼，然后改樣式，這樣想想也挺簡單，我大致的說一下，照顧一下初學者；

https://echarts.apache.org/zh/index.html

大家可以從上面的鏈接上面選則自己想要的圖表類型，然后cv代碼就可以了，so easy,你只需要自己根據(jù)自己的需求創(chuàng)建div和設置樣式即可。

接下來我具體的描述下我的最終成果是怎么實現(xiàn)的

主要是思路：具體代碼我就不貼了

• 第一步，我們需要從官網(wǎng)上找一個有3條折線圖的圖表。
• 第二步，我們需要讓橫坐標動起來。
• 第三步，我們需要實現(xiàn)從后端獲取數(shù)據(jù)。(這一步需要你會建數(shù)據(jù)庫，目的是后續(xù)怎么方便查數(shù)據(jù)更方便)
• 第四步，我們需要通過按鈕的點擊事件綁定我們的數(shù)據(jù)是屬于幾號按鈕的數(shù)據(jù)，就是說你點擊哪個按鈕只能獲取到符合當前條件的數(shù)值。
• 第五步，我們需要給控制時間的按鈕也綁定上點擊事件，類似于條件查詢。
• 第六步，我們需要給兩個時間的div設置顯示和隱藏。

由于篇幅原因，我就不粘代碼了。

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論