在 Vue 3 中 使用及引入 ECharts 紀錄

最近遇到需要在專案中呈現圖表，經過初步調查後決定使用ECharts，在 Vue 2 時網路上有大量的包裝器將各種圖表套件包裝起來以利使用，但在 Vue 3 後較少，其實有了 Composition API 後有時候不見得需要，本篇文章以圖表類型做封裝，希望能為有相同需求的人提供幫助。

目錄結構說明

主要檔案為兩個，一個是 App.vue 為我們的首頁，一個則是被我們封裝過的EChart 檔案 usePie.js。

.
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
├── public
│ ├── favicon.ico
│ └── index.html
└── src
 ├── App.vue             首頁，圖表所在位置
 ├── composable
 │ └── usePie.js         封裝後的Echarts
 └── main.js

安裝

在你的 vue 專案目錄下安裝 ECharts

npm install echarts — save

引入 ECharts

在我們的usePie中引入需要的圖表類型，可從範例網頁中找尋需要的圖表類型。

以圓餅圖為例，從圓餅圖範例網頁中完整代碼選項，複製按需引入所需的模組至usePie.js。

usePie.js

依需求封裝參數

接著依我們的需求封裝參數，因此我們傳入 HTML Element ，接著我們封裝setOption 函式，此函式會繪製圖表，先將不需更改的參數寫好，這樣一來 Vue 元件引用時就只需要傳入數據資料即可繪製。

若你有RWD需求，需要封裝 resize 函式並在視窗發生變動時呼叫。

usePie.js

在 Vue 中呼叫

接著我們只要在 Vue 中引入寫好的usePie.js，在 Mounted 時傳入 HTML Element 呼叫封裝好的 setOption 函式，只要資料更新時傳入新資料並呼叫即可。

若你有 RWD 需求，新增一個事件監聽器監聽 resize，並在 resize 時呼叫封裝好的 resize 函式。

App.vue

效果

效果圖

完整代碼

https://github.com/motea927/Example-ECharts-Vue3

參考文件

ECharts 快速上手：https://echarts.apache.org/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts

ECharts 圖表範例：https://echarts.apache.org/examples/zh/index.html

ECharts Option API：https://echarts.apache.org/zh/option.html#title