最省事的选择是直接用uCharts，它已深度优化小程序和App的canvas渲染，iOS/Android/H5表现一致、体积小（约80KB）、比ECharts更轻稳；常见错误包括未在pages.json配置usingComponents、容器缺固定高度导致白屏、onLoad中过早初始化等。
直接用 uCharts 是最省事的选择
uni-app 里做步数统计图，别自己 canvas 重造轮子——除非你明确要控制每一像素、且数据量极小（比如就 3–5 天）。uCharts 已经针对小程序和 App 的 canvas 渲染做了深度优化，iOS/Android/H5 表现一致，体积也压得足够小（压缩后约 80KB），比 ECharts 更轻、更稳。
常见错误是：装了插件但没在 pages.json 里配 usingComponents，或者容器没设 height，结果 canvas 渲染区域为 0，白屏。
- 必须给图表容器加固定高度，比如
height: 320px；仅用%或vh在某些小程序平台会失效 - 不要在
onLoad里直接调this.$refs.uChart.init()，得等onReady或用$nextTick确保 DOM 就绪 - 步数类数据建议开启
yAxis.splitNumber: 5，避免纵轴刻度被自动缩成科学计数法（比如 1e+4）
uCharts 柱状图关键配置项怎么填
步数图本质是「时间维度 + 数值」的对比，type: "column" 足够，不用上堆叠或分组。重点在 categories 和 series 的对齐。
容易踩的坑：日期字符串没统一格式（如 "4-22" vs "04-22"），导致横轴排序错乱；或者 series.data 里混入 null / undefined，图表直接不渲染。
-
categories填数组，例如["4-22", "4-23", "4-24", "4-25", "4-26"]，顺序即显示顺序 -
series.data必须是纯数字数组，长度与categories严格一致，例如[8240, 9120, 7650, 10230, 8890] - 步数单位大，建议开启
yAxis.format: "{value} 步"，避免纵轴只写数字 - 若想突出当日步数，可用
series.itemStyle.color单独设最后一根柱子颜色
canvas 手动画柱状图只适合极简场景
如果你的步数图就 3–7 天、不需要动画、不换主题、不导出图片，且团队明确拒绝引入第三方组件，那可以手撸 canvas。但要注意：uni-app 的 uni.createCanvasContext 在不同平台返回对象不完全一致，H5 上是 CanvasRenderingContext2D，小程序里是自定义上下文，不能直接套用 Web Canvas 教程代码。
典型翻车点：用 ctx.measureText 量文字宽度后，x 坐标算错，导致日期标签跑出画布；或者没调 ctx.draw(true) 强制刷新，改了数据但图不动。
- 务必用
uni.createSelectorQuery().in(this).select(...).fields({size:true})动态取 canvas 宽高，别写死750rpx - 柱子宽度 =
(canvasWidth - leftMargin - rightMargin) / dataList.length，留边防文字截断 - 纵轴最大值别硬写 20000，应取
Math.max(...dataList.map(i => i.value)) * 1.1留 10% 余量 - H5 端 canvas 可能模糊，加
style="width: 100%; height: 100%; image-rendering: -webkit-optimize-contrast;"
步数图交互和性能要注意什么
用户大概率会点某一天看详情，所以得加点击反馈。uCharts 自带 tap 事件，但默认不触发——得手动开 enableScroll: false（否则滑动优先）并设 dataLabel: { show: true } 才能点中柱子。
另一个隐形坑：步数数据从接口来，但 uCharts 初始化时 data 还是空数组，会导致首次渲染空白。不能靠 v-if 控制显隐，得用 updateData 方法动态刷。
- 绑定
@touchend="onChartTouchEnd"后，在回调里用e.touches[0].x和e.touches[0].y反推点击的是第几根柱子（需结合 canvas 坐标系换算） - 如果步数跨度大（比如从 1000 到 50000），禁用
yAxis.min，让 uCharts 自动计算，否则低值柱子会被压扁到看不见 - App 端频繁 setData 大量图表数据可能卡顿，建议步数超过 30 天时切为折线图，或做数据采样（如取每 3 天均值）
实际项目里，最常被忽略的是横轴日期格式一致性——后端返的可能是 "2026-04-22"，前端 slice 成 "4-22" 时没补零，导致 "4-2" 排在 "4-10" 前面。这种排序问题不会报错，但图表一眼就能看出逻辑不对。
