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 `
`;
}
- 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}
`;
}