使用echarts的vue項目第二天,vue的按鈕點擊echarts表格聯動(適合沒接觸過的echarts的新手)

vue的按鈕點擊echarts表格聯動

昨天晚上打遊戲到很晚,今天中午12點才起牀,來吧,繼續我的項目.
      想要點擊vue視圖中的按鈕實現echarts的表格聯動,得有一個準確的思路:
      ①弄清楚echarts的api屬性和屬性值(簡單來說就是這麼使用echarts)—>②創造匹配echarts表格和vue聯動的一系列數據—>③在vue子組件中靈活構造echarts表格
實現思路:

1. echarts的參數屬性和屬性值
   網上找案例(行不通)
   網上找的案例也是五花八門,算起來功能倒也能實現,可是關鍵的屬性和屬性值,這些人居然一個都沒說,也就是說如果想自己學習深入的理解echarts的話就要一樣穩紮穩打的去官網找文檔,(如果項目催的緊,那就展示出程序員複製粘貼大法神功了.)
   直接去到echarts官網看文檔:
   找到基礎概念預覽就可以清楚的看到這些echarts的屬性值用法了.
   
   在這裏我們可以很清楚的看到如何實現自己想要的基礎表格和echarts提供的各種組件以及實現這些組件的屬性值,豁然開朗啊,這樣子echarts的接口就找到了.
   下面這三張圖片就幾乎涵蓋了你所用到的echarts的所有屬性(api接口):
   
   
   
   括弧,如果找不到接口對應的屬性值,可到echarts的api文檔查看:
   

2. 創造匹配vue按鈕實現echarts聯動的所有數據(測試數據)
   這對新手來說是個很複雜的問題,需要考慮的元素非常多,新手請注意(造過無數次數據的老鳥就別看了):
   ①構造測試數據的時候要儘量多想可能會發生的情況,不要到最後還要回爐重造數據
   ②多注意創造數據的格式,json格式的數據錯一個標點符號就獲取不到
   ③多瞭解js自帶的字符串,數組,對象方法,也可以學老鳥直接上正則表達式
   一般來說一個人的數據只有自己最清楚,我把我造了一半的數據拉出來給你們瞧一瞧:
   

3. 在vue生命週期裏實現點擊按鈕數據改變echarts模板
   ①改變echarts數據
   
   ②在子組件的生命週期中用echarts初始化
   
   這樣就能點擊不同的按鈕顯示不同的echarts表格.迫不及待,明天就能實現最終的三級聯動,點擊每個按鈕,視圖層都會改變,爽歪歪…