Uni ECharts 正式集成到 create-uni 啦！現在，你只需要一行命令，就能快速創建一個內置 Uni ECharts 的 uni-app 初始項目。告別複雜配置，數據可視化從未如此輕鬆高效，讓開發者專注於創意與體驗！

🤓 為什麼選擇 Uni ECharts ？

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

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

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

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

🤔 為什麼選擇 create-uni ？

create-uni 是一個用於快速創建 uni-app 項目的輕量腳手架工具，一行命令開啓 uni-app 開發之旅！

官網 & 文檔：https://uni-helper.js.org/create-uni/core

Github：https://github.com/uni-helper/create-uni

• ⚡️ 極速開發：基於 Vite + VS Code 的極速開發體驗，熱更新毫秒級響應
• 🧩 靈活配置：豐富的模板和插件生態，按需選擇，自由組合
• 📱 多端適配：一套代碼，同時支持 App、小程序、H5 等多端發佈
• 🖥️ TypeScript：完整的 TypeScript 支持，開發體驗更友好

✈️ 快速創建

直接通過命令參數一次性創建並配置完整項目，適合已明確項目結構與依賴並且熟悉命令參數的開發者，快速生成標準化項目。

# pnpm
pnpm create uni@latest 項目名稱 --ts -p import -m uniEcharts --eslint

# npm
npm create uni@latest 項目名稱 --ts -p import -m uniEcharts --eslint

# yarn
yarn create uni@latest 項目名稱 --ts -p import -m uniEcharts --eslint

建議添加標記名 @latest，否則可能會解析到緩存的過時軟件包版本。

參數解釋：

• --ts：啓用 TypeScript
• -p import：集成 vite-plugin-uni-components
• -m uniEcharts：集成 Uni ECharts
• --eslint：啓用 ESLint

完整參數説明可以查看 參數詳情。

🍚 交互式創建

通過命令行交互逐步選擇配置項，適合初次使用或希望靈活定製的開發者，可以根據提示自由選擇模板、插件和依賴。

# pnpm
pnpm create uni@latest

# npm
npm create uni@latest

# yarn
yarn create uni@latest

提示：使用 空格 選擇選項，回車 ↩︎ 確認。

┌  Uni-creator - 快速創建 uni-app 項目 
│
◇  請輸入項目名稱:
│  項目名稱
│
◇  請選擇 uni-app 模板：
│  自定義模板
│
◇  是否使用 TypeScript 語法?
│  是
│
◇  選擇需要的vite插件:
│  vite-plugin-uni-components, vite-plugin-uni-pages, vite-plugin-uni-manifest
│
◇  選擇需要的庫:
│  Pinia, Unocss, uni-echarts
│
◇  選擇需要的組件庫:
│  Wot Ui
│
◇  是否使用 ESLint?
│  是
│
◇  🎉 恭喜！您的項目已準備就緒。

💻 圖形化界面

可視化操作界面，適合希望通過圖形界面直觀創建項目的開發者。

# pnpm
pnpm create uni@latest --gui

# npm
npm create uni@latest --gui

# yarn
yarn create uni@latest --gui

create-uni 目前正在積極地探索一種完全嶄新的 CLI 與 GUI 相結合的模式。這種模式的探索旨在為用户帶來更加高效、便捷且直觀的使用體驗。

🔧 手動集成

手動安裝並配置 Uni ECharts，適合已有項目或自定義工程結構需要按需集成的開發者。

👉 前往 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"
    ]
  }
}

🕹️ Uni Helper

create-uni 由 Uni Helper 團隊成員 @FliPPeDround 創建，集成了大量 Uni Helper 團隊以及社區開發的實用插件。

當你使用 uni-app 進行開發時，或許已經接觸過 Uni Helper 團隊的一些作品 —— 可能是那個讓你獲得完整 TypeScript 類型支持的插件，各種自動化的 Vite 插件，也可能是 VSCode 裏高效的插件。下面是部分常用插件介紹：

• uni-typed：為 uni-app 提供 TypeScript 類型定義，提升開發效率。
• uni-network：一個為 uni-app 打造的基於 Promise 的 HTTP 客户端。
• vite-plugin-uni-pages：為 Vite 下的 uni-app 提供基於文件系統的路由。
• vite-plugin-uni-manifest：使用 TypeScript 編寫 uni-app 的 manifest.json。
• vite-plugin-uni-components：從 unplugin-vue-components 派生並修改以適應 uni-app。
• unocss-preset-uni：專為 uni-app 打造的 UnoCSS 預設。
• uni-env：在 uni-app 中優雅地判斷當前環境。

Uni Helper 讓 uni-app 擁有了現代化的 Web 開發體驗，可以前往 項目 - Uni Helper 瞭解更多 Uni Helper 的項目。

❤️ 支持 & 鼓勵

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

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

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

📚 推薦閲讀

• Uni ECharts 2.0 正式發佈：原來在 uni-app 中使用 ECharts 可以如此簡單！
• uni-helper 和他的朋友們：一羣理想主義者的堅持與夢想
• create-uni v2 或許是當前最好用的 uni-app CLI 工具