多数据项场景 - X轴文字优化方案

数据项数量与配置关系

≤8

少量数据

rotate: 0° (水平)

9-14

中等数据

rotate: -45°

≥15

大量数据

45° + 截断 ✓

⚠️ 为什么多数据项用 45°？

当数据项 ≥15 时统一使用 45° 倾斜 + 截断：

可读性好、无需歪头
配合 6 字符截断，20 项以内可正常容纳

不同角度的空间利用率

0° 水平

100% 横向

45° 倾斜

70% 横向

90° 垂直

~15%

90°垂直时，每个标签只占用约 fontSize (11px) 的横向空间，可以容纳更多数据项。

触发条件

条件	阈值	说明
数据项 ≥15	`45° + 截断`	统一 45° 倾斜，可读性更好
截断字符数	`6`	截断到6字符

数量优先判断 45° 倾斜截断到6字符更窄柱体

核心配置代码

// 多数据项 (≥15)：统一 45° + 截断
const xAxisConfig = {
    label: {
        autoRotate: false,
        rotate: -Math.PI / 4,   // 45°
        formatter: (text) => {
            const maxLength = 6;
            if (text.length > maxLength) {
                return text.substring(0, maxLength) + '...';
            }
            return text;
        },
        style: {
            fontSize: 11,
            fill: '#1D1D1F',
            textAlign: 'end',
        },
    },
};

// 柱体宽度配置 - 数据多时使用更窄的柱体
const columnConfig = {
    columnWidthRatio: 0.6,
    columnStyle: {
        radius: [3, 3, 0, 0],
    },
};
    

完整配置参数

参数	值	类型	说明
`rotate`	`-Math.PI/4`	number	45° 倾斜（多数据项统一）
`truncateAt`	`6`	number	截断到6字符
`textAlign`	`'end'`	string	垂直时末端对齐
`columnWidthRatio`	`0.6`	number	更窄的柱体（标准是0.5）
`columnStyle.radius`	`[3,3,0,0]`	number[]	更小的圆角（标准是4）

场景4 vs 场景6：旋转与触发条件

对比项	场景4：超长文字	场景6：多数据项
触发条件	字符数 ≥ 50	数据项 ≥ 15
典型场景	产品名称非常长	月度/日度数据
rotate	-Math.PI/2 (90°)	-Math.PI/4 (45°)，多数据项统一 45°
truncateAt	6	6
柱体宽度	0.5 (标准)	0.6 (更窄)
柱体圆角	[4,4,0,0]	[3,3,0,0]

场景6 优先 45° 可读性更好；数据项多时用更窄柱体和更小圆角优化视觉效果。

边界情况处理

情况	处理方式	说明
数据项 = 14	使用45°	未达到15，按中等数据
数据项 ≥15	使用45°	统一 45° + 截断
短文字 + 多数据	使用45°	数量多时 45° + 截断
超长文字 + 少数据	使用90°	场景4触发

多数据项 (≥15项) - 45° 倾斜 + 截断