图表标签会不会挤在一起

按 375px 宽、15~30 项、12px 黑体推算，右侧柱群会最先爆。问题清单按严重度排：

1. 🔴 标签横向重叠（右侧柱群最严重）

现象： 数字和文字互相压住，根本分不清谁是谁。
原因： 30 项时柱中心距约 11~12px，而 12px 黑体一个两位数字就约 14~16px 宽，标签宽度大于柱间距，必然叠。
改法： 30 项不要全量显示标签，改为每隔 3~5 根柱显示一个；或点击/长按柱才显示数值。

2. 🔴 最右侧标签越界被切掉

现象： 最后一个或几个柱子的数值只露出一半，甚至完全看不到。
原因： 标签默认居中对齐柱顶，但柱体已贴近容器右边缘，标签向外溢出，被容器 overflow:hidden 或屏幕边缘裁掉。
改法： 图表右侧预留 24~32px 内边距；最右侧标签改左对齐；或改用悬浮提示显示完整值。

3. 🔴 标签与柱形/背景叠加，文字不清晰

现象： 字和柱顶贴在一起，深色柱子上文字糊成一团。
原因： 12px 标签没有描边或背景，直接落在柱体上方，柱色深时对比度不足。
改法： 给标签加白色描边或半透明背景；标签位置固定在柱顶上方 2~4px，不要直接压柱。

4. 🟠 12px 小字本身可读性差

现象： 即便不重叠，12px 黑体在手机上偏小，数据一密就像噪点。
原因： 移动端数据标签建议不低于 13~14px，12px 已是下限，高密度下更吃力。
改法： 字号提到 13~14px；如果放不下，优先减少标签数量，而不是继续缩小字号。

5. 🟠 30 项时柱太窄，标签比柱还宽

现象： 标签之间比柱子还密，用户无法把标签和柱子对应起来。
原因： 375px 下放 30 根柱，单柱中心距约 11~12px，柱体本身可能只有 4~8px 宽，视觉上全是标签。
改法： 改为横向滚动图表，每屏只显示 6~10 根柱；或聚合数据，如 Top 10 + “其他”。

6. 🟡 长数值/单位未做短格式

现象： 如“12,000元”“同比增长15%”这类标签，右侧柱群直接溢出。
原因： 12px 黑体下 4 位以上数字宽约 28~32px，带单位更宽，远超柱间距。
改法： 标签做短格式：12000→1.2万，15%→15；完整数值放点击或悬浮提示。

7. 🟡 没有按容器宽度动态隐藏标签

现象： 左侧可能勉强能看，右侧密集区直接崩。
原因： 标签全量显示，没有根据可用宽度计算可显示数量。
改法： 前端根据容器宽度动态抽稀，保证相邻标签至少间隔 24px；低于阈值自动隐藏，优先保留首尾和峰值。

8. 🟡 若用 Canvas/位图绘制，可能未按设备像素比渲染

现象： 12px 文字不是被压在一起，而是肉眼可见发虚、边缘糊。
原因： 画布逻辑宽度 375px，在 2x/3x 手机屏上被直接拉伸。
改法： Canvas 按 devicePixelRatio 放大画布绘制；或改用 SVG。

优先改 1、2、4 项，能解决大部分投诉；第 8 项如果截图里文字是发虚而不是重叠，就查渲染方式。