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

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

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

🤓 為什麼選擇 Uni ECharts ？

• 🚀 快速上手：與 Vue ECharts 近乎一致的使用體驗
• 📱 多端兼容：支持 Web、小程序、APP
• 📦 自動導入：提供 UniEchartsResolver 開箱即用
• ☕ TypeScript：完整的組件和方法類型定義
• 🍳 免費商用：基於 MIT 協議發佈

🌟 Uni ECharts 2.0 升級內容

經過 1 個月的持續優化，我們對組件的開發體驗進行了全面升級，希望儘可能地貼近 Web 開發，讓開發者在使用組件時幾乎感受不到 uni-app 的限制，像普通網頁開發一樣自然、高效，真正體驗到現代 Web 開發的絲滑感！

Vite 插件

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

插件可以自動完成 provideEcharts 的調用，所以組件內部將不再填充 echarts/core 作為默認的 echarts 插件（間接支持了定製 echarts 的使用）。

還解決了小程序端 echarts/core 生成重複問題，進一步節省了小程序寶貴的空間。

導入代碼生成器

由於小程序對於代碼體積的要求非常嚴苛，所以我們鼓勵手動從 echarts 中按需導入組件和圖表，以減小打包體積。Vue ECharts 團隊構建了一個導入代碼生成器，你只需要把 option 的代碼粘貼進去，就可以得到精確的導入代碼。

為了方便訪問，我們移植了一個 導入代碼生成器 在線工具。

當然，也可以直接使用 Vue ECharts 提供的 導入代碼生成器。

CLI 工具

Uni ECharts 提供了一個 CLI 工具，可以輕鬆將在線定製的 echarts.min.js 轉換為 ESM 格式。

定製 ECharts

現在 Uni ECharts 可以輕鬆使用自定義的 echarts 文件，具體方式請參考 定製 ECharts 部分的説明。

Options API 示例

也有的開發者更喜歡 Options API，所以 Uni ECharts 在文檔中新增了部分 Options API 的示例。

缺陷修復

• 修復 echarts 配置項的 icon 屬性無法正常使用圖片。

破壞性變更

• Uni Modules 方式需要手動調用 provideEcharts 方法

  為了支持定製 echarts 的使用，組件將不再自動填充 echarts/core 作為默認的 echarts 插件，所以必須要手動調用 provideEcharts，示例如下：

  import * as echarts from "echarts/core";
  import { provideEcharts } from "@/uni_modules/xiaohe-echarts";
  
  provideEcharts(echarts);

  現在推薦以 NPM 方式使用組件，由於 Vite 插件的引入，不再需要手動調用 provideEcharts 方法！

遷移指南

更多信息請查看 從 1.x 遷移到 2.x。

🚀 快速上手

👉 前往 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 的自動按需導入。

@uni-helper/vite-plugin-uni-components 是 Uni Helper 團隊基於 unplugin-vue-components 派生並修改以適應 uni-app 的組件自動導入插件，關於 Uni Helper 團隊可以前往 uni-helper.js.org 瞭解更多。

# 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
• 收藏：插件市場
• 贊助：自願贊助

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

🍬 鳴謝

得益於以下項目對開源的付出，讓 Uni ECharts 能夠站在巨人的肩膀上。

• echarts
• vue-echarts
• lime-echart
• echarts-for-weixin
• mitt

🏆 開源協議

Uni ECharts 基於 MIT 許可發佈，請自由地享受和參與開源。