當前位置：首頁 > 前端技术 > vue >内容正文

vue

echart vue 图表大小_vue之将echart封装为组件

發布時間：2023/12/3 vue 47 豆豆

生活随笔收集整理的這篇文章主要介紹了 echart vue 图表大小_vue之将echart封装为组件小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

最近的新項目里，有大量數據圖表類的需求，為了增強代碼的復用性，減少冗余，我開始思考如何將echart封裝為組件調用。本文將會以雷達圖為案例，一步步講解在vue項目中如何使用echart，如何將其封裝為能重復調用的組件。

轉載鏈接：https://www.jianshu.com/p/ec39019e2141

閱讀之前，可以先看看我之前的一些文章，這樣能更好的理解這次的內容：

《使用vue-cli(vue腳手架)快速搭建項目》

《手把手教你Vue之父子組件間通信實踐講解【props、$ref 、$emit】》

1. 安裝Echarts

首先第一步，肯定是安裝Echarts了。通過cd命令進入項目根目錄，然后敲以下命令行：

cnpm install echarts -S

安裝成功會如下顯示，package.json里的dependencies屬性也會自動加上Echarts依賴：

安裝Echarts

package.json

2.在vue項目中使用Echarts

安裝成功以后，我們先要考慮的是如何在vue項目中導入Echarts，并成功初始化一個圖表。

下面我會先建兩個.vue文件 chart.vue 和 radar-chart.vue 作為這次示例的基礎。 chart.vue的角色是調用雷達圖，radar-chart.vue的角色是提供雷達圖：

//chart.vue //radar-chart.vue

好，正式創建一個Echarts圖表了

(1)在radar-chart.vue導入echart ：

// 引入基本模板 import echarts from 'echarts/lib/echarts' // 引入雷達圖組件 import 'echarts/lib/chart/radar' // 引入提示框和圖例組件 import 'echarts/lib/component/tooltip' import 'echarts/lib/component/legend'

(2)創建圖表配置數據，數據格式參考 Echarts官網：

const option = { tooltip: {}, radar: { indicator: [{name: '體育', max: '100'}, {name: '數學', max: '100'}, {name: '化學', max: '100'}, {name: '勞動', max: '100'}, {name: '物理', max: '100'}], center: ['50%', '51%'] }, series: [{ type: 'radar', itemStyle: {normal: {areaStyle: {type: 'default'}}}, data: [ { value: [58,56,78,64,98], name: '各項得分', itemStyle: {normal: {color: '#f0ad4e'}} } ] }] }

(3)初始化圖表：

const chartObj = echarts.init(document.getElementById('radar')) chartObj.setOption(option)

上面幾步匯總為以下代碼，另外補充一點就是，創建配置數據option和初始化的時候，都要放在mounted鉤子函數里執行，這樣才能保證獲取dom的是時候，dom已完成渲染：

//chart.vue //radar-chart.vue

出來的效果是這樣的：

效果一

3.將Echarts封裝為組件

上面我們已經成功創建一個雷達圖了，但是很明顯的是，radar-chart.vue里的數據寫死的，無法重復調用。接下來著手封裝的事情了。

封裝的思路是這樣的： (1)chart.vue向radar-chart.vue傳遞一組個性化數據 (2)radar-chart.vue通過props選項接收數據 (3)提煉接收到的數據，覆蓋配置數據option (4)初始化圖表 (如果對如何傳遞數據不理解，可以先看看我在開始的時候提到的，我的另一篇文章 —— “ vue之父子組件間通信實例講解(props、$ref 、 $emit )”)

具體代碼如下：

//chart.vue (父組件) //傳遞在子組件prop選項里約定好的數據//radar-chart.vue (子組件)

封裝以后，就能傳遞自定義的數據，反復調用了。上面代碼最后的效果是這樣的：

效果二

4.細節優化

基本的功能已經實現了，下面我們來優化下一些細節。

不知道大家有沒發現radar-chart.vue里的-id是寫死的，這會出現什么問題？當一個頁面調用兩次這個雷達圖組件，id就會重復了，從而報錯。

為了解決這個問題，我引入了uuid(vue-cli項目自帶，不需另外安裝)，意在為每個生成的雷達圖配一個不重復的隨機id。還需要注意的是，我們要在created()方法里去做這個生成id的事情，如果寫在mounted了就會出現無法初始化的情況，因為來不及渲染新的ID，就執行document.getElementById()了，具體代碼如下：

成功解決重復id的問題：

效果三

整個封裝echart的思路就是上面那樣了，其實這個demo還不完美，像雷達圖的寬高也是寫死的，還沒來得及做更多的優化，后面有空慢慢再完善它~