點(diǎn)擊按鈕切換顯示不同echarts圖表

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

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

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

1、使用v-if時

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

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

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

2、使用v-show時

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

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

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

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

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

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

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

我的心路歷程

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

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

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

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

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

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

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

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

最新評論