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

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

廢話(huà)不多說(shuō)，開(kāi)始拿例子說(shuō)話(huà)，沒(méi)時(shí)間的直接看例子后面的結(jié)論。

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

1、使用v-if時(shí)

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

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

看到這里，應(yīng)該都明白，因?yàn)橐呀?jīng)過(guò)了mounted周期，在頁(yè)面操作屬于在其他周期函數(shù)里的事情…

2、使用v-show時(shí)

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

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

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

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

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

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

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

我的心路歷程

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

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

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

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

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

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

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

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

最新評(píng)論