如何自定义数据库状态统计图表的样式_环形图与柱状图配置-phpMyAdmin-PHP中文网

环形图 innerradius 应设为 outerradius 的 0.6～0.75 倍，避免塌陷或扇区过窄；echarts 需用 radius 数组（如['40%','70%']），d3 需手动设置 arc.innerradius() 和 arc.outerradius()。

环形图本质是饼图挖空，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'