Function assembleArrow

src/component/tooltip/TooltipHTMLContent.ts:61–104

(
    tooltipModel: Model<TooltipOption>,
    borderColor: ZRColor,
    arrowPosition: TooltipOption['position']
)

}

function assembleArrow(
    tooltipModel: Model<TooltipOption>,
    borderColor: ZRColor,
    arrowPosition: TooltipOption['position']
) {
    if (!isString(arrowPosition) || arrowPosition === 'inside') {
        return '';
    }

    const backgroundColor = tooltipModel.get('backgroundColor');
    const borderWidth = tooltipModel.get('borderWidth');

    borderColor = convertToColorString(borderColor);
    const arrowPos = mirrorPos(arrowPosition);
    const arrowSize = Math.max(Math.round(borderWidth) * 1.5, 6);
    let positionStyle = '';
    let transformStyle = CSS_TRANSFORM_VENDOR + ':';
    let rotateDeg;
    if (indexOf(['left', 'right'], arrowPos) > -1) {
        positionStyle += 'top:50%';
        transformStyle += `translateY(-50%) rotate(${rotateDeg = arrowPos === 'left' ? -225 : -45}deg)`;
    }
    else {
        positionStyle += 'left:50%';
        transformStyle += `translateX(-50%) rotate(${rotateDeg = arrowPos === 'top' ? 225 : 45}deg)`;
    }
    const rotateRadian = rotateDeg * Math.PI / 180;
    const arrowWH = arrowSize + borderWidth;
    const rotatedWH = arrowWH * Math.abs(Math.cos(rotateRadian)) + arrowWH * Math.abs(Math.sin(rotateRadian));
    const arrowOffset = Math.round(((rotatedWH - Math.SQRT2 * borderWidth) / 2
        + Math.SQRT2 * borderWidth - (rotatedWH - arrowWH) / 2) * 100) / 100;
    positionStyle += `;${arrowPos}:-${arrowOffset}px`;

    const borderStyle = `${borderColor} solid ${borderWidth}px;`;
    const styleCss = [
        `position:absolute;width:${arrowSize}px;height:${arrowSize}px;z-index:-1;`,
        `${positionStyle};${transformStyle};`,
        `border-bottom:${borderStyle}`,
        `border-right:${borderStyle}`,
        `background-color:${backgroundColor};`
    ];

    return `<div style="${styleCss.join('')}"></div>`;
}

function assembleTransition(duration: number, onlyFadeTransition: boolean, enableDisplayTransition: boolean): string {
    const transitionCurve = 'cubic-bezier(0.23,1,0.32,1)';