ECharts源码解析之标签防重(autoLabelRotation)

版本：V6.0.0

背景

本文将简述ECharts如何实现标签自动旋转特定角度以解决柱状图或折线图轴线标签重叠的问题。

结论

解决问题的流程如下：

首先定义了几个候选的旋转角度[0，25，45，70，90]。
获取最长的label并根据最长的label的 size计算每一个候选的旋转角度下的size（详情见：https://codepen.io/agurtovoy/pen/WNPyqWx）
1. 其中width下图中的横向绿线部分即和轴交叉的部分。
2. 其中height为下图中红框高度。
将步骤2的size和图表中的间隔做比对，横向图width做比对纵向图height做比对。看最大label的交叉长度需要几个单位间隔的宽度来装。这个值即为label的间隔个数。
计算所有的候选角度所需要的间隔数，选择所需间隔最少且其中角度最小作为自适应的结果。

核心逻辑

生成标签旋转的候选布局

getCandidateLayouts(axis: Axis) {
    // 计算一个tick单元的宽高
    const unitSize = calculateUnitDimensions(axis);
    // 计算最长的label的长度
    const maxLabelSize = calculateMaxLabelDimensions(axis);
    const isHorizontal = isHorizontalAxis(axis);

    const labelModel = axis.getLabelModel();
    // 这里获取了候选旋转角度的列表 
    // 横向是 [0,25,45,70,90] 纵向则相反
    const labelRotations = normalizeLabelRotations(getLabelRotations(labelModel), isHorizontal);
    const labelMinDistance = labelModel.get('minDistance') ?? 0;

    const candidateLayouts = [];
    // 这里遍历了候选旋转角度
    for (const rotation of labelRotations) {
        const { axesIntersection, bounds, offset } = rotateLabel(maxLabelSize, rotation);
        const labelSize = isHorizontal
            ? { width: axesIntersection.width, height: bounds.height - offset.y }
            : { width: bounds.width - offset.x, height: axesIntersection.height };
        // 基于候选旋转角度计算了当前旋转角度下 label 的 interval 即 当前旋转角度下 需要省略的 label 的间隔数。
        const interval = calculateLabelInterval(unitSize, labelSize, labelMinDistance);
        candidateLayouts.push({ labelSize, interval, rotation });
    }
    // 返回了全部的后端旋旋转列表 结构为
    // [{
  	// 		interval: 1,
    //    labelSize: {width: 85.18325699348995, height: 91.62405508133756},
    //    rotation: 25
    // }....
    // ]
    return candidateLayouts;
}

旋转标签

/**
 * 旋转标签的矩形，请参见 https://codepen.io/agurtovoy/pen/WNPyqWx 
 *
 * @return｛Object｝{
 * 	axesIntersection：Size，//旋转标签的矩形与相应轴的交点
 * 	bounds：Size // 旋转标签的边界矩形的尺寸
 * 	offset：PointLike //边界矩形相对于假定旋转原点的偏移
 * }
*/
function rotateLabel({ width, height }: Size, rotation: number) {
    const rad = rotation * RADIAN; // 将旋转角度从度转换为弧度
    const sin = Math.abs(Math.sin(rad)); // 计算旋转角度的正弦值
    const cos = Math.abs(Math.cos(rad)); // 计算旋转角度的余弦值

    // 计算旋转后的标签矩形与坐标轴的交点尺寸
    const axesIntersection = {
        width: Math.min(width / cos, height / sin),
        height: Math.min(height / cos, width / sin)
    };

    // 计算旋转后的标签边界矩形的尺寸
    const bounds = {
        width: width * cos + height * sin,
        height: width * sin + height * cos
    };

    // 计算标签边界矩形相对于假定旋转原点的偏移量
    const asbRotation = Math.abs(rotation);
    const bboxOffset = asbRotation === 0 || asbRotation === 180 ? 0 : height / 2;
    const offset = {
        x: bboxOffset * sin,
        y: bboxOffset * cos
    };

    // 返回包含交点尺寸、边界矩形尺寸和偏移量的对象
    return { axesIntersection, bounds, offset };
}

计算间隔

// 根据 maxLabelSize 看需要几个 unitSize 来装
// unitSize：一个包含宽度和高度的对象，表示单位尺寸。
// maxLabelSize：一个包含宽度和高度的对象，表示标签的最大尺寸。
// minDistance：一个数字，表示标签之间的最小距离。
function calculateLabelInterval(unitSize: Size, maxLabelSize: Size, minDistance: number) {
    let dw = (maxLabelSize.width + minDistance) / unitSize.width;
    let dh = (maxLabelSize.height + minDistance) / unitSize.height;
    // 0/0 is NaN, 1/0 is Infinity.
    isNaN(dw) && (dw = Infinity);
    isNaN(dh) && (dh = Infinity);

    return Math.max(0, Math.floor(Math.min(dw, dh)));
}

选择布局

function chooseAutoLayout(candidateLayouts: InnerAutoLayoutCachedVal[]): InnerAutoLayoutCachedVal {
    let autoLayout = {
        interval: Infinity,
        rotation: 0
    };
    // 非常简单的逻辑 寻找其中间隔更小或间隔一致但角度更优的
    for (const layout of candidateLayouts) {
        if (layout.interval < autoLayout.interval
            || layout.interval > 0 && layout.interval === autoLayout.interval) {
            autoLayout = layout;
        }
    }

    return autoLayout;
}