Uni ECharts 是适用于 uni-app 的 Apache ECharts 组件，无需繁琐的步骤即可轻松在 uni-app 平台上使用 echarts。
官网 & 文档：uni-echarts.xiaohe.ink
Github：github.com/xiaohe0601/...
🏝️ 背景
🎵 "本来应该从从容容游刃有余，现在是匆匆忙忙连滚带爬，睁眼说瞎话，你在哽咽什么啦，你在哭什么哭，没出息！"
每当听见同事阿尹在工位旁哼起这首歌，我都忍不住陷入沉思 ------ 那一刻，我看到的不只是他在 emo，更像是无数开发者在鸿蒙适配路上的缩影。
是的，在过去一段时间里，由于 uni-app 不支持鸿蒙模拟器调试，而我又苦于没有鸿蒙手机，导致 Uni ECharts 并不能在鸿蒙系统上顺利运行。有鸿蒙需求的开发者们用起来就像是在赶末班车 "匆匆忙忙、连滚带爬"，我是夜不能寐、如鲠在喉。
如今 uni-app 终于支持鸿蒙模拟器调试，痛定思痛，我再也坐不住了！这一次，一定要让这件事情画上一个完美的句号。
于是，我们决定不再将就，团队成员一拍即合 ------ 必须让 Uni ECharts 能够在鸿蒙系统运行，与主流生态全面接轨。更重要的是，无需改动一行代码，真正做到 "一次开发、多端运行"，开发者从此 "从从容容、游刃有余"，不再哽咽，大家都会 "有出息"！
上文中的 "团队成员" 目前指的是我自己 🙃，如果你对维护 Uni ECharts 感兴趣的话欢迎到 Github 提交 PR 👏，一起用爱发电！
在此，对已经或将来为 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 保持一致）
安装
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 的自动按需导入。
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 对你有帮助，可以通过以下渠道对我们表示鼓励：
无论 ⭐️ 还是 💰 支持，我们铭记于心，这将是我们继续前进的动力，感谢您的支持！
🍵 写在最后
我是 xiaohe0601，热爱代码，目前专注于 Web 前端领域。
欢迎关注我的微信公众号「小何不会写代码」，我会不定期分享一些开发心得、最佳实践以及技术探索等内容，希望能够帮到你！