Echart
echart
ECharts 肝劲，一個(gè)使用 JavaScript 實(shí)現(xiàn)的開源可視化庫(kù)，可以流暢的運(yùn)行在 PC 和移動(dòng)設(shè)備上郭宝，兼容當(dāng)前絕大部分瀏覽器辞槐。Echart?提供了豐富功能的圖表，對(duì)于展示數(shù)據(jù)是不錯(cuò)的選擇粘室，并且結(jié)合?vue 的組件化榄檬，提高echart的復(fù)用性。
LOOK 下圖：
數(shù)據(jù)統(tǒng)計(jì)圖1.1
頁(yè)面有多個(gè)統(tǒng)計(jì)表衔统，按照之前的寫法鹿榜，就是在methods里面寫三個(gè)方法，放圖：
圖表代碼1.1
其中有很多復(fù)用的代碼锦爵，所以我們把圖表部分封裝成一個(gè)子組件舱殿，在每個(gè)需要圖表的父組件中調(diào)用子組件
如下圖：
數(shù)據(jù)統(tǒng)計(jì)圖1.2
下面我們來(lái)看一下代碼是如何實(shí)現(xiàn)的：
第一步我們要在main.js中把echart引入:
圖表代碼1.2
第二步我們來(lái)編寫父組件的代碼:
父組件代碼1.1
這是父組件的html
父組件代碼1.2
引入子組件，在父組件中編寫option項(xiàng)的相關(guān)數(shù)據(jù)
父組件代碼1.3
編寫refresh函數(shù)棉浸，實(shí)現(xiàn)動(dòng)態(tài)更新數(shù)據(jù)視圖
現(xiàn)在我們已經(jīng)把圖表的配置項(xiàng)放到父組件里怀薛，最后通過(guò)父組件給子組件傳值生成圖表。
第三步我們來(lái)看一下子組件的代碼：
子組件代碼1.1
這是子組件的html?
子組件代碼1.2
涉及到vue父子組件傳值迷郑、深度監(jiān)聽有不明白的可以去Vue.js官網(wǎng)進(jìn)行學(xué)習(xí)枝恋，大家有更好的方法或者問(wèn)題也歡迎在下面留言，互相學(xué)習(xí)嗡害，共同進(jìn)步焚碌，蟹蟹~~~
