diff --git a/src/component/tooltip/TooltipModel.ts b/src/component/tooltip/TooltipModel.ts index 94c2776c42..5e9205e859 100644 --- a/src/component/tooltip/TooltipModel.ts +++ b/src/component/tooltip/TooltipModel.ts @@ -169,8 +169,6 @@ class TooltipModel extends ComponentModel { // otherwise it will always override those styles on option.axisPointer. }, textStyle: { - color: '#666', - fontSize: 14 } }; } diff --git a/src/component/tooltip/TooltipView.ts b/src/component/tooltip/TooltipView.ts index f34e27d683..15960fa52f 100644 --- a/src/component/tooltip/TooltipView.ts +++ b/src/component/tooltip/TooltipView.ts @@ -542,7 +542,8 @@ class TooltipView extends ComponentView { const orderMode = singleTooltipModel.get('order'); const builtMarkupText = buildTooltipMarkup( - articleMarkup, markupStyleCreator, renderMode, orderMode, ecModel.get('useUTC') + articleMarkup, markupStyleCreator, renderMode, orderMode, ecModel.get('useUTC'), + singleTooltipModel.get('textStyle') ); builtMarkupText && markupTextArrLegacy.unshift(builtMarkupText); const blockBreak = renderMode === 'richText' ? '\n\n' : '
'; @@ -621,7 +622,8 @@ class TooltipView extends ComponentView { markupStyleCreator, renderMode, orderMode, - ecModel.get('useUTC') + ecModel.get('useUTC'), + tooltipModel.get('textStyle') ) : seriesTooltipResult.markupText; diff --git a/src/component/tooltip/tooltipMarkup.ts b/src/component/tooltip/tooltipMarkup.ts index db1910cdcf..b59be65d99 100644 --- a/src/component/tooltip/tooltipMarkup.ts +++ b/src/component/tooltip/tooltipMarkup.ts @@ -32,20 +32,53 @@ import { getRandomIdBase } from '../../util/number'; import Model from '../../model/Model'; import { TooltipOption } from './TooltipModel'; - -const TOOLTIP_NAME_TEXT_STYLE_CSS = 'font-size:12px;color:#6e7079'; -const TOOLTIP_TEXT_STYLE_RICH = { - fontSize: 12, - fill: '#6e7079' -}; -const TOOLTIP_VALUE_TEXT_STYLE_CSS = 'font-size:14px;color:#464646;font-weight:900'; -const TOOLTIP_VALUE_TEXT_STYLE_RICH = { - fontSize: 14, - fill: '#464646', - fontWeight: 900 +type RichTextStyle = { + fontSize: number | string, + fill: string, + fontWeight?: number | string }; + +type TextStyle = string | RichTextStyle; + const TOOLTIP_LINE_HEIGHT_CSS = 'line-height:1'; +// TODO: more textStyle option +function getTooltipTextStyle( + textStyle: TooltipOption['textStyle'], + renderMode: TooltipRenderMode +): { + nameStyle: TextStyle + valueStyle: TextStyle +} { + const nameFontColor = textStyle.color || '#6e7079'; + const nameFontSize = textStyle.fontSize || 12; + const nameFontWeight = textStyle.fontWeight || '400'; + const valueFontColor = textStyle.color || '#464646'; + const valueFontSize = textStyle.fontSize || 14; + const valueFontWeight = textStyle.fontWeight || '900'; + + if (renderMode === 'html') { + return { + nameStyle: `font-size:${nameFontSize}px;color:${nameFontColor};font-weight:${nameFontWeight}`, + valueStyle: `font-size:${valueFontSize}px;color:${valueFontColor};font-weight:${valueFontWeight}` + }; + } + else { + return { + nameStyle: { + fontSize: nameFontSize, + fill: nameFontColor, + fontWeight: nameFontWeight + }, + valueStyle: { + fontSize: valueFontSize, + fill: valueFontColor, + fontWeight: valueFontWeight + } + }; + } +} + // 0: no gap in this block. // 1: has max gap in level 1 in this block. // ... @@ -150,7 +183,8 @@ interface TooltipMarkupFragmentBuilder { build( ctx: TooltipMarkupBuildContext, fragment: TooltipMarkupBlockFragment, - topMarginForOuterGap: number + topMarginForOuterGap: number, + toolTipTextStyle: TooltipOption['textStyle'] ): MarkupText; } @@ -198,14 +232,20 @@ const builderMap: { [key in TooltipMarkupBlockFragment['type']]: TooltipMarkupFr fragment.__gapLevelBetweenSubBlocks = thisGapLevelBetweenSubBlocks; }, - build(ctx, fragment: TooltipMarkupSection, topMarginForOuterGap): string { + build( + ctx, + fragment: TooltipMarkupSection, + topMarginForOuterGap, + toolTipTextStyle + ): string { const noHeader = fragment.noHeader; const gaps = getGap(fragment); const subMarkupText = buildSubBlocks( ctx, fragment, - noHeader ? topMarginForOuterGap : gaps.html + noHeader ? topMarginForOuterGap : gaps.html, + toolTipTextStyle ); if (noHeader) { @@ -213,13 +253,14 @@ const builderMap: { [key in TooltipMarkupBlockFragment['type']]: TooltipMarkupFr } const displayableHeader = makeValueReadable(fragment.header, 'ordinal', ctx.useUTC); + const {nameStyle} = getTooltipTextStyle(toolTipTextStyle, ctx.renderMode); if (ctx.renderMode === 'richText') { - return wrapInlineNameRichText(ctx, displayableHeader) + gaps.richText + return wrapInlineNameRichText(ctx, displayableHeader, nameStyle as RichTextStyle) + gaps.richText + subMarkupText; } else { return wrapBlockHTML( - `
` + `
` + encodeHTML(displayableHeader) + '
' + subMarkupText, @@ -240,7 +281,7 @@ const builderMap: { [key in TooltipMarkupBlockFragment['type']]: TooltipMarkupFr fragment.__gapLevelBetweenSubBlocks = 0; }, - build(ctx, fragment: TooltipMarkupNameValueBlock, topMarginForOuterGap) { + build(ctx, fragment: TooltipMarkupNameValueBlock, topMarginForOuterGap, toolTipTextStyle) { const renderMode = ctx.renderMode; const noName = fragment.noName; const noValue = fragment.noValue; @@ -278,20 +319,22 @@ const builderMap: { [key in TooltipMarkupBlockFragment['type']]: TooltipMarkupFr // It little weird if only value next to marker but far from marker. const valueCloseToMarker = !noMarker && noName; + const {nameStyle, valueStyle} = getTooltipTextStyle(toolTipTextStyle, renderMode); + return renderMode === 'richText' ? ( (noMarker ? '' : markerStr) - + (noName ? '' : wrapInlineNameRichText(ctx, readableName)) + + (noName ? '' : wrapInlineNameRichText(ctx, readableName, nameStyle as RichTextStyle)) // Value has commas inside, so use ' ' as delimiter for multiple values. + (noValue ? '' : wrapInlineValueRichText( - ctx, readableValueList, valueAlignRight, valueCloseToMarker + ctx, readableValueList, valueAlignRight, valueCloseToMarker, valueStyle as RichTextStyle )) ) : wrapBlockHTML( (noMarker ? '' : markerStr) - + (noName ? '' : wrapInlineNameHTML(readableName, !noMarker)) + + (noName ? '' : wrapInlineNameHTML(readableName, !noMarker, nameStyle as string)) + (noValue ? '' : wrapInlineValueHTML( - readableValueList, valueAlignRight, valueCloseToMarker + readableValueList, valueAlignRight, valueCloseToMarker, valueStyle as string )), topMarginForOuterGap ); @@ -303,7 +346,8 @@ const builderMap: { [key in TooltipMarkupBlockFragment['type']]: TooltipMarkupFr function buildSubBlocks( ctx: TooltipMarkupBuildContext, fragment: TooltipMarkupSection, - topMarginForOuterGap: number + topMarginForOuterGap: number, + tooltipTextStyle: TooltipOption['textStyle'] ): MarkupText { const subMarkupTextList: string[] = []; let subBlocks = fragment.blocks || []; @@ -329,7 +373,8 @@ function buildSubBlocks( const subMarkupText = getBuilder(subBlock).build( ctx, subBlock, - idx > 0 ? gaps.html : 0 + idx > 0 ? gaps.html : 0, + tooltipTextStyle ); subMarkupText != null && subMarkupTextList.push(subMarkupText); }); @@ -361,7 +406,8 @@ export function buildTooltipMarkup( markupStyleCreator: TooltipMarkupStyleCreator, renderMode: TooltipRenderMode, orderMode: TooltipOrderMode, - useUTC: boolean + useUTC: boolean, + toolTipTextStyle: TooltipOption['textStyle'] ): MarkupText { if (!fragment) { return; @@ -375,7 +421,7 @@ export function buildTooltipMarkup( orderMode: orderMode, markupStyleCreator: markupStyleCreator }; - return builder.build(ctx, fragment, 0); + return builder.build(ctx, fragment, 0, toolTipTextStyle); } @@ -401,36 +447,46 @@ function wrapBlockHTML( + '
'; } -function wrapInlineNameHTML(name: string, leftHasMarker: boolean): string { +function wrapInlineNameHTML( + name: string, + leftHasMarker: boolean, + style: string +): string { const marginCss = leftHasMarker ? 'margin-left:2px' : ''; - return `` + return `` + encodeHTML(name) + ''; } -function wrapInlineValueHTML(valueList: string[], alignRight: boolean, valueCloseToMarker: boolean): string { +function wrapInlineValueHTML( + valueList: string[], + alignRight: boolean, + valueCloseToMarker: boolean, + style: string +): string { // Do not too close to marker, considering there are multiple values separated by spaces. const paddingStr = valueCloseToMarker ? '10px' : '20px'; const alignCSS = alignRight ? `float:right;margin-left:${paddingStr}` : ''; return ( - `` + `` // Value has commas inside, so use ' ' as delimiter for multiple values. + map(valueList, value => encodeHTML(value)).join('  ') + '' ); } -function wrapInlineNameRichText(ctx: TooltipMarkupBuildContext, name: string): string { - return ctx.markupStyleCreator.wrapRichTextStyle(name, TOOLTIP_TEXT_STYLE_RICH); +function wrapInlineNameRichText(ctx: TooltipMarkupBuildContext, name: string, style: RichTextStyle): string { + return ctx.markupStyleCreator.wrapRichTextStyle(name, style as Dictionary); } function wrapInlineValueRichText( ctx: TooltipMarkupBuildContext, valueList: string[], alignRight: boolean, - valueCloseToMarker: boolean + valueCloseToMarker: boolean, + style: RichTextStyle ): string { - const styles: Dictionary[] = [TOOLTIP_VALUE_TEXT_STYLE_RICH]; + const styles: Dictionary[] = [style]; const paddingLeft = valueCloseToMarker ? 10 : 20; alignRight && styles.push({ padding: [0, 0, 0, paddingLeft], align: 'right' }); // Value has commas inside, so use ' ' as delimiter for multiple values. diff --git a/test/new-tooltip.html b/test/new-tooltip.html index 80a19440d9..ac130b58be 100644 --- a/test/new-tooltip.html +++ b/test/new-tooltip.html @@ -138,6 +138,8 @@

tooltip.formatter callback. Markers should be displayed.

tooltip.borderColor has higher priority

+

tooltip.textStyle.color

+