Merge pull request #18921 from linghaoSu/fix/tooltip-color

fix(tooltip): fix opacity not work in tooltip marker

src/component/tooltip/TooltipView.ts

@@ -573,7 +573,7 @@ class TooltipView extends ComponentView {
                     // Pre-create marker style for makers. Users can assemble richText
                     // text in `formatter` callback and use those markers style.
                     cbParams.marker = markupStyleCreator.makeTooltipMarker(
-                        'item', convertToColorString(cbParams.color), renderMode
+                        'item', convertToColorString(cbParams.color), renderMode, cbParams.opacity
                     );
 
                     const seriesTooltipResult = normalizeTooltipFormatResult(

src/component/tooltip/seriesFormatTooltip.ts

@@ -24,7 +24,8 @@ import {
     retrieveVisualColorForTooltipMarker,
     TooltipMarkupBlockFragment,
     createTooltipMarkup,
-    TooltipMarkupSection
+    TooltipMarkupSection,
+    retrieveVisualOpacityForTooltipMarker
 } from './tooltipMarkup';
 import { retrieveRawValue } from '../../data/helper/dataProvider';
 import { isNameSpecified } from '../../util/model';
@@ -47,6 +48,7 @@ export function defaultSeriesFormatTooltip(opt: {
     const value = series.getRawValue(dataIndex) as any;
     const isValueArr = isArray(value);
     const markerColor = retrieveVisualColorForTooltipMarker(series, dataIndex);
+    const markerOpacity = retrieveVisualOpacityForTooltipMarker(series, dataIndex);
 
     // Complicated rule for pretty tooltip.
     let inlineValue;
@@ -86,6 +88,7 @@ export function defaultSeriesFormatTooltip(opt: {
             createTooltipMarkup('nameValue', {
                 markerType: 'item',
                 markerColor: markerColor,
+                opacity: markerOpacity,
                 // Do not mix display seriesName and itemName in one tooltip,
                 // which might confuses users.
                 name: inlineName,

src/component/tooltip/tooltipMarkup.ts

@@ -149,6 +149,7 @@ export interface TooltipMarkupNameValueBlock extends TooltipMarkupBlock {
     // If `!markerType`, tooltip marker is not used.
     markerType?: TooltipMarkerType;
     markerColor?: ColorString;
+    opacity?: number;
     name?: string;
     // Also support value is `[121, 555, 94.2]`.
     value?: unknown | unknown[];
@@ -324,7 +325,8 @@ function buildNameValue(
         : ctx.markupStyleCreator.makeTooltipMarker(
             fragment.markerType,
             fragment.markerColor || '#333',
-            renderMode
+            renderMode,
+            fragment.opacity
         );
     const readableName = noName
         ? ''
@@ -473,6 +475,16 @@ export function retrieveVisualColorForTooltipMarker(
     return convertToColorString(color);
 }
 
+export function retrieveVisualOpacityForTooltipMarker(
+    series: SeriesModel,
+    dataIndex: number
+): number {
+    const style = series.getData().getItemVisual(dataIndex, 'style');
+    const opacity = style.opacity;
+    return opacity;
+}
+
+
 export function getPaddingFromTooltipModel(
     model: Model<TooltipOption>,
     renderMode: TooltipRenderMode
@@ -506,7 +518,8 @@ export class TooltipMarkupStyleCreator {
     makeTooltipMarker(
         markerType: TooltipMarkerType,
         colorStr: ColorString,
-        renderMode: TooltipRenderMode
+        renderMode: TooltipRenderMode,
+        opacity?: number
     ): string {
         const markerId = renderMode === 'richText'
             ? this._generateStyleName()
@@ -515,7 +528,8 @@ export class TooltipMarkupStyleCreator {
             color: colorStr,
             type: markerType,
             renderMode,
-            markerId: markerId
+            markerId: markerId,
+            opacity: opacity
         });
         if (isString(marker)) {
             return marker;

src/model/mixin/dataFormat.ts

@@ -67,6 +67,7 @@ export class DataFormatMixin {
         const itemOpt = data.getRawDataItem(dataIndex);
         const style = data.getItemVisual(dataIndex, 'style');
         const color = style && style[data.getItemVisual(dataIndex, 'drawType') || 'fill'] as ZRColor;
+        const opacity = style && style.opacity;
         const borderColor = style && style.stroke as ColorString;
         const mainType = this.mainType;
         const isSeries = mainType === 'series';
@@ -87,6 +88,7 @@ export class DataFormatMixin {
             value: rawValue,
             color: color,
             borderColor: borderColor,
+            opacity: opacity,
             dimensionNames: userOutput ? userOutput.fullDimensions : null,
             encode: userOutput ? userOutput.encode : null,
 

src/util/format.ts

@@ -181,6 +181,7 @@ interface GetTooltipMarkerOpt {
     // id name for marker. If only one marker is in a rich text, this can be omitted.
     // By default: 'markerX'
     markerId?: string;
+    opacity?: number;
 }
 // Only support color string
 export function getTooltipMarker(color: ColorString, extraCssText?: string): TooltipMarker;
@@ -191,6 +192,7 @@ export function getTooltipMarker(inOpt: ColorString | GetTooltipMarkerOpt, extra
         extraCssText: extraCssText
     } : (inOpt || {}) as GetTooltipMarkerOpt;
     const color = opt.color;
+    const opacity = String(opt.opacity || 1);
     const type = opt.type;
     extraCssText = opt.extraCssText;
     const renderMode = opt.renderMode || 'html';
@@ -204,10 +206,10 @@ export function getTooltipMarker(inOpt: ColorString | GetTooltipMarkerOpt, extra
         ? '<span style="display:inline-block;vertical-align:middle;margin-right:8px;margin-left:3px;'
             + 'border-radius:4px;width:4px;height:4px;background-color:'
             // Only support string
-            + encodeHTML(color) + ';' + (extraCssText || '') + '"></span>'
+            + encodeHTML(color) + ';' + 'opacity:' + encodeHTML(opacity) + ';' + (extraCssText || '') + '"></span>'
         : '<span style="display:inline-block;margin-right:4px;'
             + 'border-radius:10px;width:10px;height:10px;background-color:'
-            + encodeHTML(color) + ';' + (extraCssText || '') + '"></span>';
+            + encodeHTML(color) + ';' + 'opacity:' + encodeHTML(opacity) + ';' + (extraCssText || '') + '"></span>';
     }
     else {
         // Should better not to auto generate style name by auto-increment number here.
@@ -223,12 +225,14 @@ export function getTooltipMarker(inOpt: ColorString | GetTooltipMarkerOpt, extra
                     width: 4,
                     height: 4,
                     borderRadius: 2,
+                    opacity: opacity,
                     backgroundColor: color
                 }
                 : {
                     width: 10,
                     height: 10,
                     borderRadius: 5,
+                    opacity: opacity,
                     backgroundColor: color
                 }
         };

src/util/types.ts

@@ -693,6 +693,7 @@ export interface CallbackDataParams {
     dataType?: SeriesDataType;
     value: OptionDataItem | OptionDataValue;
     color?: ZRColor;
+    opacity?: number;
     borderColor?: string;
     dimensionNames?: DimensionName[];
     encode?: DimensionUserOuputEncode;