Uni ECharts 是适用于 uni-app 的 Apache ECharts 组件，无需繁琐的步骤即可轻松在 uni-app 平台上使用 echarts。
官网 & 文档：uni-echarts.xiaohe.ink
Github：github.com/xiaohe0601/...
🤓 前言
朋友们好啊，我是 Uni ECharts 掌门人小何。
刚才有个朋友问我："何老师，发生甚么事了？" 我说怎么回事？给我发了两张截图。
我一看！噢，原来是昨天，有两个小程序，页面很多，一个 400 多页，一个 500 多页。
塔们说，哎...有一个说是主包实在是放不下 echarts 了，何老师你能不能教教我优化功法？帮助我改善一下我的小程序体积。
我说可以，我说你直接 npm 安装 echarts 按需引用，不好用，他不服气。
我说小朋友，你一个组件同时兼容所有端，不需要条件编译，他说你这也没用。
我说我这个有用，这是抹平差异，传统开发是讲一次编译、多端覆盖，二百多行代码的条件编译都抵不过我这个小组件。
他说要和我试试，我说可以。我一说，他啪一下就把条件编译给写出来了，很快啊，然后上来就是一个 require，吭！一个 ifdef，吭！一个 ifndef！
我全部防出去了，防出去以后自然是传统开发宜点到为止，Uni ECharts 藏在 Github 没给他看。我笑一下，准备上班，因为这时间按传统开发的点到为止他已经输了，如果 Uni ECharts 发力，一下就把他条件编译整破防了，放在 Github 没给他看。
他也承认，说条件编译写起来繁琐。啊，我收手的时间不聊了，他突然袭击说 npm 装的 echarts 不能放到分包，啊，我大意了啊，没有考虑到。
哎，他的条件编译给我脸打了一下，但是没关系啊！他也说了，他截图也说了，两分多钟以后，当时流眼泪了，捂着眼我就说停...停，然后两分多钟以后就好了。
我说小伙子你不讲武德，你不懂，他忙说何老师对不...对不起，我不懂规矩。啊，他说他是乱打的，他可不是乱打啊，ifdef、ifndef 训练有素，后来他说他练过 两年半 开源，看来是有备而来。
这两个年轻人，不讲武德。来，骗！来，偷袭！我 22 岁的老同志。这好吗？这不好。我说小朋友你不懂，开发要以和为贵，不是好勇斗狠，要讲武德。
我劝！这位年轻人，耗子尾汁，好好反思。年轻人要脚踏实地，不要急功近利，以后不要再犯这样的聪明，小聪明啊！更不要搞窝里斗！谢谢朋友们！
灵感来源 @德莱厄斯
🪄 定制 ECharts
👉 前往 Uni ECharts 官网 定制 ECharts 查看完整内容
通常情况，使用 按需导入 就能有效减小打包体积，但是在某些场景如果需要使用定制的 ECharts，在 Uni ECharts 中可以配合 provideEcharts 实现，具体参考以下步骤：
-
使用 ECharts 官网的 在线定制 功能根据需求选择需要使用的模块构建并下载
echarts.min.js到本地； -
由于 Vite 默认仅支持 ESM 模块，但是 ECharts 官网的在线定制功能并不支持下载 ESM 格式的产物，所以 Uni ECharts 提供了一个 CLI 工具可以轻松将其转换为 ESM 格式，使用示例如下：
shell# pnpm pnpm dlx @uni-echarts/c2e@latest # npm npx @uni-echarts/c2e@latestshell┌ Uni ECharts Transform CLI │ ● Transform input echarts.min.js to ESM │ ◇ Input file │ ./echarts.min.js │ ◇ Output file │ ./echarts.esm.js │ ◇ Transform completed! │ └ Output: /path/to/echarts.esm.js受限于
echarts.min.js的内容，目前转换后的 ESM 产物不支持 Tree-Shaking，无法剔除未使用的代码，并且需要使用默认导入，示例如下：jsimport echarts from "/path/to/echarts.esm.js"; -
将转换后的
echarts.esm.js放入项目中，注意不要 放到static目录（因为小程序仅支持 ES5，无法识别export语法）。 -
调用
provideEcharts将echarts提供给组件，根据 Uni ECharts 的引入方式参考下述指引：-
NPM 方式
自
2.0.0开始，npm 方式可以通过修改 Vite 插件配置轻松使用！js// vite.config.js[ts] import { UniEcharts } from "uni-echarts/vite"; import { defineConfig } from "vite"; export default defineConfig({ // ... plugins: [ UniEcharts({ echarts: { // 传实际的 echarts 文件路径，例如："@/plugins/echarts.esm.js" provide: "/path/to/echarts.esm.js", importType: "default" } }) ] });当然，也可以手动调用，示例如下：
jsimport { provideEcharts } from "uni-echarts/shared"; import echarts from "/path/to/echarts.esm.js"; provideEcharts(echarts); -
Uni Modules 方式
使用 uni-modules 方式需要手动调用，示例如下：
jsimport { provideEcharts } from "@/uni_modules/xiaohe-echarts"; import echarts from "/path/to/echarts.esm.js"; provideEcharts(echarts);
-
因为目前转换后的 ESM 产物不支持 Tree-Shaking，所以使用定制 echarts 时不再需要调用
echarts.use按需注册组件。
💻 使用组件
html
<template>
<uni-echarts custom-class="chart" :option="option"></uni-echarts>
</template>
js
import { ref } from "vue";
import echarts from "/path/to/echarts.esm.js";
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]
]
}
});
css
.chart {
height: 300px;
}💡 前往 Uni ECharts 官网 快速开始 查看完整内容
❤️ 支持 & 鼓励
如果 Uni ECharts 对你有帮助，可以通过以下渠道对我们表示鼓励：
无论 ⭐️ 还是 💰 支持，我们铭记于心，这将是我们继续前进的动力，感谢您的支持！
🍵 写在最后
我是 xiaohe0601，热爱代码，目前专注于 Web 前端领域。
欢迎关注我的微信公众号「小何不会写代码」，我会不定期分享一些开发心得、最佳实践以及技术探索等内容，希望能够帮到你！