diff --git a/common/changes/@visactor/vchart/fix-linear-gradient-string-in-tooltip_2025-09-04-02-59.json b/common/changes/@visactor/vchart/fix-linear-gradient-string-in-tooltip_2025-09-04-02-59.json new file mode 100644 index 0000000000..ba5af2fbf4 --- /dev/null +++ b/common/changes/@visactor/vchart/fix-linear-gradient-string-in-tooltip_2025-09-04-02-59.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "comment": "fix: when color is gradient string, tooltip icon should show correctly\n\n", + "type": "none", + "packageName": "@visactor/vchart" + } + ], + "packageName": "@visactor/vchart", + "email": "dingling112@gmail.com" +} \ No newline at end of file diff --git a/packages/vchart/src/plugin/components/tooltip-handler/utils/svg.ts b/packages/vchart/src/plugin/components/tooltip-handler/utils/svg.ts index d2e11d2bef..fafd449f8d 100644 --- a/packages/vchart/src/plugin/components/tooltip-handler/utils/svg.ts +++ b/packages/vchart/src/plugin/components/tooltip-handler/utils/svg.ts @@ -1,7 +1,7 @@ import { escapeHTML } from './common'; // eslint-disable-next-line no-duplicate-imports -import type { CustomSymbolClass, IGradientColor, ILinearGradient } from '@visactor/vrender-core'; -import { Symbol } from '@visactor/vrender-core'; +import type { CustomSymbolClass, IColor, IGradientColor, ILinearGradient } from '@visactor/vrender-core'; +import { Symbol, GradientParser } from '@visactor/vrender-core'; import { Bounds, isObject, isString } from '@visactor/vutils'; import type { ITooltipShapeActual } from '../../../../typings'; @@ -11,7 +11,7 @@ export function getSvgHtml(option: ITooltipShapeActual | undefined, gradientId?: } const styleString = `style="display:inline-block;vertical-align:middle;"`; - const { shapeType, shapeFill, shapeStroke, shapeHollow = false } = option; + const { shapeType, shapeStroke, shapeHollow = false, shapeFill } = option; const size = option.shapeSize ?? 8; const lineWidth = option.shapeLineWidth ? escapeHTML(option.shapeLineWidth) + 'px' : '0px'; let fillString: string = 'currentColor'; @@ -49,7 +49,9 @@ export function getSvgHtml(option: ITooltipShapeActual | undefined, gradientId?: viewBox = `${x - lw / 2} ${y - lw / 2} ${w + lw} ${h + lw}`; } - if (!shapeFill || isString(shapeFill) || shapeHollow) { + const isFillGradientStr = GradientParser.IsGradientStr(shapeFill); + + if (!shapeFill || (isString(shapeFill) && !isFillGradientStr) || shapeHollow) { fillString = shapeHollow ? 'none' : shapeFill ? escapeHTML(shapeFill) : 'currentColor'; return ` @@ -60,22 +62,25 @@ export function getSvgHtml(option: ITooltipShapeActual | undefined, gradientId?: `; } - if (isObject(shapeFill)) { + + const shapeFillObject = isFillGradientStr ? GradientParser.Parse(shapeFill) : isObject(shapeFill) ? shapeFill : null; + + if (shapeFillObject) { fillString = 'gradientColor' + (gradientId ?? ''); let gradient = ''; - const stops = ((shapeFill as IGradientColor).stops ?? []) + const stops = ((shapeFillObject as IGradientColor).stops ?? []) .map(s => ``) .join(''); - if ((shapeFill as IGradientColor).gradient === 'radial') { + if ((shapeFillObject as IGradientColor).gradient === 'radial') { gradient = ` ${stops} `; - } else if ((shapeFill as IGradientColor).gradient === 'linear') { + } else if ((shapeFillObject as IGradientColor).gradient === 'linear') { gradient = ` + (((shapeFillObject as ILinearGradient).x0 as number) ?? 0) * 100 + }%" y1="${(((shapeFillObject as ILinearGradient).y0 as number) ?? 0) * 100}%" x2="${ + (((shapeFillObject as ILinearGradient).x1 as number) ?? 0) * 100 + }%" y2="${(((shapeFillObject as ILinearGradient).y1 as number) ?? 0) * 100}%"> ${stops} `; }