环形图 innerRadius 应设为 outerRadius 的 0.6～0.75 倍，避免塌陷或扇区过窄；ECharts 需用 radius 数组（如['40%','70%']），D3 需手动设置 arc.innerRadius() 和 arc.outerRadius()。
环形图的 innerRadius 怎么设才不塌陷
环形图本质是饼图挖空，innerradius 决定中间空洞大小。设太小（比如 0）就变饼图；设太大（比如超过 outerradius 的 80%）会导致扇区过窄、文字挤成一条线，甚至渲染失败。
实操建议：
-
innerRadius推荐设为outerRadius * 0.6到outerRadius * 0.75之间，视觉平衡且留出标签空间 - 若用 ECharts，必须配合
radius数组使用，例如radius: ['40%', '70%']，前者是内半径，后者是外半径，顺序反了会直接白屏 - D3 中需手动计算
arc.innerRadius()和arc.outerRadius()，别漏掉对同一数据集调用两次 - 注意 SVG 渲染精度：当扇区角度小于 2° 时，即使设置了
innerRadius，也可能因像素舍入显示为断开或重叠
柱状图堆叠后数值标签错位怎么办
堆叠柱状图里，label 默认贴在每一段顶部，但总和值常需要标在整根柱子最上方——这时候直接加 position: 'top' 往往没用，因为标签仍按单段坐标定位。
实操建议：
- ECharts 中，得关闭每段的 label（
series[i].label.show = false），改用series[0].label+formatter手动算累计值，例如：formatter: '{c}'改成formatter: params => { return params.value.reduce((a, b) => a + b, 0); } - 如果用 Chart.js，
plugins.datalabels插件需配合anchor: 'end'和align: 'end'，否则标签会锚在段落中点而非堆叠顶点 - 堆叠顺序影响标签位置：默认正向堆叠（positive first），若数据含负值，要确认
stack名称一致，否则负值段会另起一列，标签完全错位
数据库状态字段映射到颜色时，离散值怎么避免色阶混淆
状态如 'online'、'offline'、'degraded' 是离散枚举，硬套连续色阶（如 viridis）会让用户误以为存在“程度差异”，而且下次新增状态时颜色可能重复。
实操建议：
- 显式声明颜色映射表，而不是靠库自动分配。ECharts 中用
series.itemStyle.color配合encode，Chart.js 中用datasets.backgroundColor数组严格对应labels顺序 - 避免用红/绿单独表示故障/正常——色盲用户无法分辨。至少加图标或文字前缀，比如
status: 'offline' → color: '#d32f2f', icon: '⚠️' - 若状态数 > 6，别硬凑不同饱和度，优先分组（如按严重等级归为
healthy/warning/critical三类），再给每类配主色 - 注意深色主题下，浅灰（
#e0e0e0）和白色背景几乎不可见，所有颜色都要在两种主题下做对比度校验
响应式缩放时环形图文字被裁切
图表容器宽度变化时，fontSize 不随比例缩放，固定值如 12px 在小屏上会撑出容器，尤其环形图中心文字和扇区标签都容易被截断。
实操建议：
- 别用绝对单位写
fontSize，ECharts 支持相对单位：fontSize: '80%'（相对于图表基准字号），或用textStyle.fontSize动态计算：fontSize: Math.max(10, Math.min(14, containerWidth / 32))
- 环形图中心文字要用
center配置项单独控制，别和扇区标签共用同一套label设置 - 设置
clipPaths或overflow: hidden前先关掉它测试——很多库（如 ApexCharts）默认裁剪，导致缩放后文字突然消失，实际只是被父容器切掉了 - 移动端真机调试时，iOS Safari 对 SVG
text的换行支持极差，长状态名宁可用tspan拆行，也别依赖whiteSpace: 'normal'
样式配置最麻烦的从来不是怎么写，而是状态变更、缩放、主题切换这三件事同时发生时，哪一层配置会偷偷覆盖另一层。多打几次 console.log 看最终生效的 options，比查文档快。
