Function buildLabelElOption

src/component/axisPointer/viewHelper.ts:75–135

(
    elOption: AxisPointerElementOptions,
    axisModel: AxisBaseModel,
    axisPointerModel: AxisPointerModel,
    api: ExtensionAPI,
    labelPos: {
        align?: ZRTextAlign
        verticalAlign?: ZRTextVerticalAlign
        position: number[]
    }
)

 * @param {Function} labelPos {align, verticalAlign, position}
 */
export function buildLabelElOption(
    elOption: AxisPointerElementOptions,
    axisModel: AxisBaseModel,
    axisPointerModel: AxisPointerModel,
    api: ExtensionAPI,
    labelPos: {
        align?: ZRTextAlign
        verticalAlign?: ZRTextVerticalAlign
        position: number[]
    }
) {
    const value = axisPointerModel.get('value');
    const text = getValueLabel(
        value, axisModel.axis, axisModel.ecModel,
        axisPointerModel.get('seriesDataIndices'),
        {
            precision: axisPointerModel.get(['label', 'precision']),
            formatter: axisPointerModel.get(['label', 'formatter'])
        }
    );
    const labelModel = axisPointerModel.getModel('label');
    const paddings = formatUtil.normalizeCssArray(labelModel.get('padding') || 0);

    const font = labelModel.getFont();
    const textRect = textContain.getBoundingRect(text, font);

    const position = labelPos.position;
    const width = textRect.width + paddings[1] + paddings[3];
    const height = textRect.height + paddings[0] + paddings[2];

    // Adjust by align.
    const align = labelPos.align;
    align === 'right' && (position[0] -= width);
    align === 'center' && (position[0] -= width / 2);
    const verticalAlign = labelPos.verticalAlign;
    verticalAlign === 'bottom' && (position[1] -= height);
    verticalAlign === 'middle' && (position[1] -= height / 2);

    // Not overflow ec container
    confineInContainer(position, width, height, api);

    let bgColor = labelModel.get('backgroundColor') as ZRColor;
    if (!bgColor || bgColor === 'auto') {
        bgColor = axisModel.get(['axisLine', 'lineStyle', 'color']);
    }

    elOption.label = {
        // shape: {x: 0, y: 0, width: width, height: height, r: labelModel.get('borderRadius')},
        x: position[0],
        y: position[1],
        style: createTextStyle(labelModel, {
            text: text,
            font: font,
            fill: labelModel.getTextColor(),
            padding: paddings,
            backgroundColor: bgColor as ColorString
        }),
        // Label should be over axisPointer.