# 封裝一個ECharts元件的一點思路 有關後臺管理系統之前寫過三遍部落格,看這篇之前最好先看下這三篇部落格。另外這裡只展示關鍵部分程式碼，專案程式碼放在github上： [mall-manage-system](https://github.com/yudiandemingzi/mall-manage-system) 1、[Vue + Element-ui實現後臺管理系統(1) --- 總述](https://www.cnblogs.com/qdhxhz/p/12577851.html) 2、[Vue + Element-ui實現後臺管理系統(2) --- 專案搭建 + ⾸⻚佈局實現](https://www.cnblogs.com/qdhxhz/p/12586292.html) 3、[Vue + Element-ui實現後臺管理系統(3) --- 麵包屑 + Tag標籤切換功能](https://www.cnblogs.com/qdhxhz/p/12590324.html) 這篇主要講解實現圖表的功能： `整體效果` ## 一、封裝一個ECharts元件的一點思路 #### 1、繪製一個簡單的圖表 ECharts上手非常簡單，具體簡單示例可以參考我之前寫的一篇部落格：[圖表工具--- ECharts.js學習（一） 簡單入門](https://www.cnblogs.com/qdhxhz/p/8387581.html)。 #### 2、封裝思路 在實際專案開發中，我們會經常與圖表打交道,比如 **訂單數量表**、**商品銷量表**、**會員數量表**等等，它可能是以**折線圖**、**柱狀圖**、**餅狀圖**等等的方式來展現。 如果我們沒有封裝元件的思想的話,那麼我們每次需要畫一個圖表都要重複類似相同的工作，而且程式碼看去非常冗餘。所以我們就需要考慮封裝一個ECharts元件，這個元件通過接收 不同的資料來渲染成不同的圖表,以後當需要生成一張圖表的時候，只需要把相關的資料傳入到這個元件中，就會渲染對應的圖表。 而這裡的核心就是 **哪些資料是需要我們傳入元件中的**。針對這個問題我們來看下一個ECharts最簡單的示例 ```javascript // 指定圖表的配置項和資料 var option = { title: { text: 'ECharts 入門示例' }, tooltip: {}, legend: { data:['銷量'] }, xAxis: { data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"] }, yAxis: {}, series: [{ name: '銷量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; ``` `執行結果` 這裡展示了一個最簡單的圖表,官方例子地址：[5 分鐘上手 ECharts](https://www.echartsjs.com/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts),下面對這些引數做個講解 ​ **title** : [標題](https://www.echartsjs.com/zh/option.html#title) **tooltip** : [提示框元件](https://www.echartsjs.com/zh/option.html#tooltip) **legend** : [圖例元件](https://www.echartsjs.com/zh/option.html#legend) **xAxis** : [直角座標軸中的 x 軸](https://www.echartsjs.com/zh/option.html#xAxis) **yAxis** : [直角座標軸中的 y 軸](https://www.echartsjs.com/zh/option.html#yAxis) **series** : [系列列表。每個系列通過 type 決定自己的圖表型別](https://www.echartsjs.com/zh/option.html#series) 這幾個元件來看 `series` 和 `xAxis` 是肯定需要外部傳來的資料，**y軸** 的資料跟series中data相關不需要單獨再傳。至於**title** , **tooltip** , **legend**並不是圖表必須的，所以 不是必須要傳的。就好比你一個圖表你可以沒有標題。 `注意` 這裡還有一點 **x軸對於柱狀圖、折線圖相關圖是一定要有的，但對於餅狀圖來講它又不是必須的**，所以這裡封裝一個ECharts元件時,需要考慮這一點。 #### 3、封裝ECharts元件 新建一個EChart.vue,作為封裝ECharts的元件 ```html ``` 這樣一個簡單的公共元件就完成了，接下來我們通過傳入不同的資料到這個元件來渲染不同的圖表。
## 二、傳入EChart元件資料 我們看到在首頁有三個圖表,那我們這裡就要組裝三種不同的資料，傳入到EChart.vue元件中，來生成不同的圖表。 ```html ``` 大致的思路就是這樣的,如果你想在元件中加入title等引數，那也可以修改下這個元件就可以了。 **總結下封裝元件的基本思路** ``` 1、觀察⽂檔，考慮元件需要的基本引數 2、引數篩選，分為從⽗元件傳來的引數和⾃身的引數 3、完善元件，觀察設計圖，找不同，在⽂檔中尋找對應的配置項 4、細節優化，考慮多種場景下，圖表⾃適應的處理 ```

``` 別人罵我胖，我會生氣，因為我心裡承認了我胖。別人說我矮，我就會覺得好笑，因為我心裡知道我不可能矮。這就是我們為什麼會對別人的攻擊生氣。 攻我盾者，乃我內心之矛