ECharts 與 Vue 3 整合示例專案

這是一個展示如何在 Vue 3 中正確使用 ECharts 的示範專案，特別關注於常見問題的處理方式。

功能展示

此專案包含多個 ECharts 整合的範例元件，每個元件展示不同的實作方式及其考量：

1. 記憶體洩漏處理 (MemoryLeak.vue)

• 展示如何正確處理 ECharts 實例的生命週期
• 在元件卸載時適當釋放資源
• 使用 onUnmounted 清理 ECharts 實例

2. 資料更新處理方式

這裡提供範例包含

• ErrorNotRender.vue 錯誤未成功渲染
• WatchRerender.vue 使用 watch 觸發渲染
• ResponseSetOption.vue 在回應後使用 setOption 更新圖表
• Error.vue 來自 apache/echarts#13943 的錯誤範例實驗

最佳實踐建議

1. 務必在元件卸載時清理 ECharts 實例
2. 避免使用響應式資料直接綁定圖表實例
3. 使用 setOption 方法更新圖表
4. 確保 DOM 元素已經準備就緒才初始化圖表

Tech Stack

• Vue 3
• Vite
• Pinia (狀態管理)
• Vue Router
• TailwindCSS
• SASS
• ESLint + Prettier (程式碼品質工具)
• Stylelint
• 套件自動引入工具 (unplugin-auto-import)
• ECharts 5.5+

建議的開發環境設定

• VSCode

• Vue -Official

• Prettier - Code formatter

• ESLint

• Stylelint

• Tailwind CSS IntelliSense

• Node.js 20+ 版本

• pnpm 9+ 版本

專案設定

安裝依賴：

pnpm install

開發指令

開發環境運行（支援熱重載）：

pnpm dev

建置生產版本：

pnpm build

預覽建置結果：

pnpm preview

程式碼格式化

執行程式碼格式化：

pnpm format

執行 ESLint 檢查與自動修復：

pnpm lint

專案結構說明

• /src - 原始碼目錄
• /public - 靜態資源目錄

相關文件

• ECharts 官方文件
• Vite 設定參考
• Vue 3 文件
• Pinia 文件
• TailwindCSS 文件
• Stylelint 文件
• ESLint 文件
• Prettier 文件