🎉 Uni ECharts 2.0 正式发布：原来在 uni-app 中使用 ECharts 可以如此简单！

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

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

Github：github.com/xiaohe0601/...

🤓 为什么选择 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，示例如下：
js 复制代码
```
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 保持一致）

安装

shell 复制代码

# 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 的预构建。

js 复制代码

// vite.config.js[ts]

import { defineConfig } from "vite";

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

Vite 插件

自 2.0.0 开始，Uni ECharts 提供了 Vite 插件用于自动化处理一些繁琐、重复的工作，也为将来更多的高级功能提供了可能性。

js 复制代码

// 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 了解更多。

shell 复制代码

# 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

js 复制代码

// 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。

dotenv 复制代码

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

如果使用 TypeScript 可以在 tsconfig.json 中添加如下内容为自动导入的组件提供类型提示（需要 IDE 支持）。

json5 复制代码

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

使用

html 复制代码

<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 能够站在巨人的肩膀上。

🏆 开源协议

Uni ECharts 基于 MIT 许可发布，请自由地享受和参与开源。