Uni ECharts 是適用於 uni-app 的 Apache ECharts 組件，無需繁瑣的步驟即可輕鬆在 uni-app 平台上使用 echarts。

官網 & 文檔：https://uni-echarts.xiaohe.ink

Github：https://github.com/xiaohe0601/uni-echarts

🏝️ 背景

🎵 “本來應該從從容容遊刃有餘，現在是匆匆忙忙連滾帶爬，睜眼説瞎話，你在哽咽什麼啦，你在哭什麼哭，沒出息！”

每當聽見同事阿尹在工位旁哼起這首歌，我都忍不住陷入沉思 —— 那一刻，我看到的不只是他在 emo，更像是無數開發者在鴻蒙適配路上的縮影。

是的，在過去一段時間裏，由於 uni-app 不支持鴻蒙模擬器調試，而我又苦於沒有鴻蒙手機，導致 Uni ECharts 並不能在鴻蒙系統上順利運行。有鴻蒙需求的開發者們用起來就像是在趕末班車 “匆匆忙忙、連滾帶爬”，我是夜不能寐、如鯁在喉。

如今 uni-app 終於支持鴻蒙模擬器調試，痛定思痛，我再也坐不住了！這一次，一定要讓這件事情畫上一個完美的句號。

於是，我們決定不再將就，團隊成員一拍即合 —— 必須讓 Uni ECharts 能夠在鴻蒙系統運行，與主流生態全面接軌。更重要的是，無需改動一行代碼，真正做到 “一次開發、多端運行”，開發者從此 “從從容容、遊刃有餘”，不再哽咽，大家都會 “有出息”！

上文中的 “團隊成員” 目前指的是我自己 🙃，如果你對維護 Uni ECharts 感興趣的話歡迎到 Github 提交 PR 👏，一起用愛發電！

在此，對已經或將來為 Uni ECharts 貢獻代碼的開發者朋友們由衷表示感謝！🙏

項目地址：https://github.com/xiaohe0601/uni-echarts

🎉 2.1 正式發佈

現在，Uni ECharts 成功完成了對鴻蒙的適配，所以 2.1 版本正式發佈啦！

安裝及使用方法與其他端別無二致，那麼就一起來回顧一下吧 ～

👉 前往 Uni ECharts 官網 快速開始 查看完整內容

前置條件：

• echarts >= 5.3.0
• vue >= 3.3.0（目前 uni-app 尚未適配 Vue 3.5，推薦使用 3.4.x 與 uni-app 保持一致）

安裝

# pnpm
pnpm add echarts uni-echarts

# yarn
yarn add echarts uni-echarts

# npm
npm install echarts uni-echarts

配置

由於 Uni ECharts 發佈到 npm 上的包是未經編譯的 vue 文件，為了避免 Vite 對 Uni ECharts 依賴預構建 導致生成額外的 echarts 副本，當使用 npm 方式時需要手動配置 Vite 強制排除 uni-echarts 的預構建。

// vite.config.js[ts]

import { defineConfig } from "vite";

export default defineConfig({
  // ...
  optimizeDeps: {
    exclude: [
      "uni-echarts"
    ]
  }
});

Vite 插件

自 2.0.0 開始，Uni ECharts 提供了 Vite 插件用於自動化處理一些繁瑣、重複的工作，也為將來更多的高級功能提供了可能性。

// vite.config.js[ts]

import { UniEcharts } from "uni-echarts/vite";
import { defineConfig } from "vite";

export default defineConfig({
  // ...
  plugins: [
    UniEcharts()
  ]
});

自動導入（可選）

Uni ECharts 可以配合 @uni-helper/vite-plugin-uni-components 和 unplugin-auto-import 實現組件和 API 的自動按需導入。

# pnpm
pnpm add -D @uni-helper/vite-plugin-uni-components unplugin-auto-import

# yarn
yarn add --dev @uni-helper/vite-plugin-uni-components unplugin-auto-import

# npm
npm install -D @uni-helper/vite-plugin-uni-components unplugin-auto-import

// vite.config.js[ts]

import Uni from "@dcloudio/vite-plugin-uni";
import UniComponents from "@uni-helper/vite-plugin-uni-components";
import { UniEchartsResolver } from "uni-echarts/resolver";
import AutoImport from "unplugin-auto-import/vite";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [
    AutoImport({
      resolvers: [
        UniEchartsResolver()
      ]
    }),
    // 確保放在 `Uni()` 之前
    UniComponents({
      resolvers: [
        UniEchartsResolver()
      ]
    }),
    Uni()
  ]
});

如果使用 pnpm 管理依賴，請在項目根目錄下的 .npmrc 文件中添加如下內容，參見 issue 389。

shamefully-hoist=true # or public-hoist-pattern[]=@vue*

如果使用 TypeScript 可以在 tsconfig.json 中添加如下內容為自動導入的組件提供類型提示（需要 IDE 支持）。

{
  "compilerOptions": {
    "types": [
      // ...
      "uni-echarts/global"
    ]
  }
}

使用

<template>
  <uni-echarts custom-class="chart" :option="option"></uni-echarts>
</template>

<script setup>
import { PieChart } from "echarts/charts";
import { DatasetComponent, LegendComponent, TooltipComponent } from "echarts/components";
import * as echarts from "echarts/core";
import { CanvasRenderer } from "echarts/renderers";
import { ref } from "vue";

echarts.use([
  LegendComponent,
  TooltipComponent,
  DatasetComponent,
  PieChart,
  CanvasRenderer
]);

const option = ref({
  legend: {
    top: 10,
    left: "center"
  },
  tooltip: {
    trigger: "item",
    textStyle: {
      // #ifdef MP-WEIXIN
      // 臨時解決微信小程序 tooltip 文字陰影問題
      textShadowBlur: 1
      // #endif
    }
  },
  series: [
    {
      type: "pie",
      radius: ["30%", "52%"],
      label: {
        show: false,
        position: "center"
      },
      itemStyle: {
        borderWidth: 2,
        borderColor: "#ffffff",
        borderRadius: 10
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 20
        }
      }
    }
  ],
  dataset: {
    dimensions: ["來源", "數量"],
    source: [
      ["Search Engine", 1048],
      ["Direct", 735],
      ["Email", 580],
      ["Union Ads", 484],
      ["Video Ads", 300]
    ]
  }
});
</script>

<style scoped>
.chart {
  height: 300px;
}
</style>

小程序端圖表不顯示？

請參考常見問題中 小程序端 class / style 無效 部分的説明。

❤️ 支持 & 鼓勵

如果 Uni ECharts 對你有幫助，可以通過以下渠道對我們表示鼓勵：

• Star：Github、Gitee
• 收藏：插件市場
• 贊助：自願贊助

無論 ⭐️ 還是 💰 支持，我們銘記於心，這將是我們繼續前進的動力，感謝您的支持！

🍵 寫在最後

我是 xiaohe0601，熱愛代碼，目前專注於 Web 前端領域。

歡迎關注我的微信公眾號「小何不會寫代碼」，我會不定期分享一些開發心得、最佳實踐以及技術探索等內容，希望能夠幫到你！

📚 推薦閲讀

• Uni ECharts 2.0 正式發佈：原來在 uni-app 中使用 ECharts 可以如此簡單！
• 擁抱 create-uni，一行命令輕鬆集成 Uni ECharts！
• uni-helper 和他的朋友們：一羣理想主義者的堅持與夢想