拥抱 create-uni，一行命令轻松集成 Uni ECharts！

Uni ECharts 正式集成到 create-uni 啦！现在，你只需要一行命令，就能快速创建一个内置 Uni ECharts 的 uni-app 初始项目。告别复杂配置，数据可视化从未如此轻松高效，让开发者专注于创意与体验！

为什么选择 Uni ECharts ？

Uni ECharts 是适用于 uni-app 的 Apache ECharts 组件，无需繁琐的步骤即可轻松在 uni-app 平台上使用 echarts。

官网 & 文档：uni-echarts.xiaohe.ink

Github：github.com/xiaohe0601/…

• 快速上手：与 Vue ECharts 近乎一致的使用体验
• 多端兼容：支持 Web、小程序、APP
• 自动导入：提供 UniEchartsResolver 开箱即用
• TypeScript：完整的组件和方法类型定义
• 免费商用：基于 MIT 协议发布

为什么选择 create-uni ？

create-uni 是一个用于快速创建 uni-app 项目的轻量脚手架工具，一行命令开启 uni-app 开发之旅！

官网 & 文档：uni-helper.js.org/create-uni/…

Github：github.com/uni-helper/…

• ️ 极速开发：基于 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

参数解释：

• --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

手动集成

手动安装并配置 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 工具