🚧 一次真实的踩坑经历

最近在用 UniApp 开发 App 的时候，遇到了一个非常离谱的问题：

👉ECharts 图表在 H5 正常，真机完全不显示！

---

---

页面没报错、数据正常、逻辑也没问题，但就是：

📱 手机上一片空白

当时真的有点崩溃。

---

🤖 我问遍了所有AI…

于是我开始疯狂问 AI：

ChatGPT

Claude

各种国内AI

结果答案出奇一致：

👉“必须用 WebView 才能显示 ECharts”

---

---

甚至建议我：

引入 WebView

写 H5 页面

JS 通信

看起来很合理，但问题来了👇

❌ 项目复杂度直接爆炸

---

💸 无奈之下，我做了个决定

折腾两三天后，我直接：

👉 买了 Cursor 一天会员

然后干了一件关键的事：

✅ 让 AI 分析整个项目代码

---

🔍 真相来了（非常关键）

分析完之后，结论只有一句话：

👉你不是写错了，是用错了库

原因是：

ECharts 依赖 DOM

App 原生环境不支持

所以直接渲染失败

---

---

💡 本质问题：

❌ 不是代码问题，是运行环境问题

---

🚀 最终解决方案：uCharts

Cursor 给出的方案是：

👉 使用 uCharts

优点非常明显：

原生支持 UniApp

不依赖 DOM

App / 小程序 / H5 全兼容

性能更好

---

📊 实际效果（柱状图）

我最终实现的效果如下👇

---

是不是已经和 ECharts 差不多了？甚至更流畅 👇

---

🧩 核心代码（可直接复制）

1️⃣ 安装

npm install @qiun/ucharts

---

2️⃣ 页面代码

importuChartsfrom’@qiun/ucharts’;

exportdefault {

data() {

return {

chart: null

}

},

onReady() {

this.drawChart();

},

methods: {

drawChart() {

constctx=uni.createCanvasContext(‘barChart’, this);

this.chart =newuCharts({

type: ‘column’,

context: ctx,

width: 350,

height: 300,

categories: [‘Mon’,’Tue’,’Wed’,’Thu’,’Fri’,’Sat’,’Sun’],

series: [{

name: ‘访问量’,

data: [120, 200, 150, 80, 70, 110, 130]

}],

xAxis: {

disableGrid: true

},

yAxis: {

data: [{

min: 0

}]

},

extra: {

column: {

type: ‘group’,

width: 20

}

}

});

}

}

}

.charts {

width: 100%;

height: 300px;

}

---

⚡ 最终对比

方案	复杂度	推荐
ECharts + WebView	高	❌
uCharts	低	✅

---

💡 这次踩坑总结

1️⃣ AI 不是万能的

很多只是“平均答案”

2️⃣ 技术选型 > 拼命调试

选错库，越改越崩

3️⃣ 真机问题优先怀疑环境

不是代码，是平台

---

🎯 写在最后

如果你也在用 UniApp 做 App：

👉别再硬刚 ECharts 了

直接用：

👉uCharts，一步到位

---

📣 互动

你有没有被 AI 坑过？

👇 评论区聊聊你的经历