应优先选用uCharts而非ECharts或原生canvas，因其专为uni-app多端优化、体积小、渲染稳定且跨平台一致；图表容器须设固定高度（如320rpx），初始化需在onMounted/nextTick或onReady中进行，categories与series长度必须严格对齐，且需配置transformPx避免真机像素错位。
uCharts，别自己 canvas 画——除非你只展示 3–5 天步数、不换主题、不响应式、也不导出图片。
为什么选 uCharts 而不是 ECharts 或原生 canvas
它专为 uni-app 多端（小程序/App/H5）优化，体积小（压缩后约 80KB），canvas 渲染稳定，iOS/Android/H5 表现一致。ECharts 在小程序里容易层级错乱、初始化失败；原生 uni.createCanvasContext 在不同平台返回对象不兼容（H5 是 CanvasRenderingContext2D，小程序是自定义上下文），套用 Web 教程代码大概率报错。
图表容器必须设固定高度
这是白屏最常见原因：只写 height: 100% 或 height: 50vh，在微信小程序里会被忽略，导致 canvas 区域实际为 0px。
- 正确做法：用
rpx或px写死高度，比如height: 320rpx或height: 400px - 必须加在图表外层容器上，不是
<canvas></canvas>标签本身 - 如果用
canvas2d属性（推荐），需确保父容器有明确宽高，否则初始化会静默失败
初始化时机不能在 onLoad
onLoad 时 DOM 还没就绪，this.$refs.uChart.init() 或 new uCharts(...) 会找不到 canvas 上下文。
- Vue 3（
<script setup></script>）：用onMounted+setTimeout(() => {}, 0)或nextTick - Vue 2：改用
onReady钩子 - 更稳妥的做法：监听
@complete事件，它在图表真正渲染完成后才触发
categories 和 series 必须严格对齐
横轴标签和数据长度不一致，或 series.data 里混入 null/undefined，图表直接不渲染，控制台也不报错。
-
categories是字符串数组，顺序即显示顺序，例如["4-22", "4-23", "4-24"] -
series.data必须是纯数字数组，长度与categories完全相等，例如[8240, 9120, 7650] - 步数类大数值建议配
yAxis.format: "{value} 步"，否则纵轴可能显示成1e+4 - 想高亮最新一天？用
series.itemStyle.color单独设最后一项颜色（注意：这个配置在extra.column之外）
transformPx 配置 —— 如果你用 npm 安装 @qiun/ucharts，却没在 manifest.json 里加 "exclude": ["node_modules/@qiun/ucharts"]，uni-app 的 px 转 rpx 工具会错误处理 uCharts 内部像素逻辑，导致柱宽变形、文字错位，而且问题只在真机出现，开发工具里看不出来。 
