This is an automated email from the ASF dual-hosted git repository. ovilia pushed a commit to branch master in repository https://gitbox.apache.org/repos/asf/echarts.git
The following commit(s) were added to refs/heads/master by this push: new 5d1aacdd0 fix(tooltip): fix opacity not work in tooltip marker new 93d542cb4 Merge pull request #18921 from linghaoSu/fix/tooltip-color 5d1aacdd0 is described below commit 5d1aacdd03c29269bc8890931cde11cb8bab5691 Author: linghao.su <slh...@live.cn> AuthorDate: Sun Jul 23 14:40:25 2023 +0800 fix(tooltip): fix opacity not work in tooltip marker --- src/component/tooltip/TooltipView.ts | 2 +- src/component/tooltip/seriesFormatTooltip.ts | 5 +- src/component/tooltip/tooltipMarkup.ts | 20 +++- src/model/mixin/dataFormat.ts | 2 + src/util/format.ts | 8 +- src/util/types.ts | 1 + test/runTest/actions/__meta__.json | 1 + test/runTest/actions/tooltip-opacity.json | 1 + test/tooltip-opacity.html | 144 +++++++++++++++++++++++++++ 9 files changed, 177 insertions(+), 7 deletions(-) diff --git a/src/component/tooltip/TooltipView.ts b/src/component/tooltip/TooltipView.ts index 82a222cb1..bda599b4a 100644 --- a/src/component/tooltip/TooltipView.ts +++ b/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( diff --git a/src/component/tooltip/seriesFormatTooltip.ts b/src/component/tooltip/seriesFormatTooltip.ts index 6e5f7be09..c6385466e 100644 --- a/src/component/tooltip/seriesFormatTooltip.ts +++ b/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, diff --git a/src/component/tooltip/tooltipMarkup.ts b/src/component/tooltip/tooltipMarkup.ts index c8296b7e6..96031f98c 100644 --- a/src/component/tooltip/tooltipMarkup.ts +++ b/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; diff --git a/src/model/mixin/dataFormat.ts b/src/model/mixin/dataFormat.ts index 2c3981623..99ca5607e 100644 --- a/src/model/mixin/dataFormat.ts +++ b/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, diff --git a/src/util/format.ts b/src/util/format.ts index afe9625b4..69f4be7a1 100644 --- a/src/util/format.ts +++ b/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 } }; diff --git a/src/util/types.ts b/src/util/types.ts index c15e8c263..0057e8fc5 100644 --- a/src/util/types.ts +++ b/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; diff --git a/test/runTest/actions/__meta__.json b/test/runTest/actions/__meta__.json index 0d67363c0..12210b537 100644 --- a/test/runTest/actions/__meta__.json +++ b/test/runTest/actions/__meta__.json @@ -200,6 +200,7 @@ "tooltip-domnode": 1, "tooltip-event": 1, "tooltip-link": 2, + "tooltip-opacity": 1, "tooltip-rich": 1, "tooltip-setOption": 2, "tooltip-valueFormatter": 3, diff --git a/test/runTest/actions/tooltip-opacity.json b/test/runTest/actions/tooltip-opacity.json new file mode 100644 index 000000000..c10d9722a --- /dev/null +++ b/test/runTest/actions/tooltip-opacity.json @@ -0,0 +1 @@ +[{"name":"Action 1","ops":[{"type":"mousemove","time":1108,"x":1,"y":273},{"type":"mousemove","time":1308,"x":282,"y":375},{"type":"mousemove","time":1519,"x":283,"y":376},{"type":"screenshot","time":2038},{"type":"mousemove","time":2925,"x":283,"y":375},{"type":"mousemove","time":3126,"x":440,"y":322},{"type":"mousemove","time":3333,"x":453,"y":324},{"type":"screenshot","time":3945},{"type":"mousemove","time":4393,"x":453,"y":324},{"type":"mousemove","time":4595,"x":493,"y":508},{"type" [...] \ No newline at end of file diff --git a/test/tooltip-opacity.html b/test/tooltip-opacity.html new file mode 100644 index 000000000..03820d4fb --- /dev/null +++ b/test/tooltip-opacity.html @@ -0,0 +1,144 @@ +<!DOCTYPE html> +<!-- +Licensed to the Apache Software Foundation (ASF) under one +or more contributor license agreements. See the NOTICE file +distributed with this work for additional information +regarding copyright ownership. The ASF licenses this file +to you under the Apache License, Version 2.0 (the +"License"); you may not use this file except in compliance +with the License. You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, +software distributed under the License is distributed on an +"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY +KIND, either express or implied. See the License for the +specific language governing permissions and limitations +under the License. +--> + + +<html> + +<head> + <meta charset="utf-8"> + <script src="lib/simpleRequire.js"></script> + <script src="lib/config.js"></script> + <script src="lib/jquery.min.js"></script> + <script src="lib/facePrint.js"></script> + <meta name="viewport" content="width=device-width, initial-scale=1" /> + <link rel="stylesheet" href="lib/reset.css"> + <script src="lib/testHelper.js"></script> + <script src="tooltipTestHelper.js"></script> +</head> + +<body> + <style> + h1 { + line-height: 60px; + height: 60px; + background: #140; + text-align: center; + font-weight: bold; + color: #eee; + font-size: 14px; + } + + .chart { + height: 850px; + } + </style> + + <h1>axisPointer link in one echarts instance | after data zoom, link should be normal</h1> + <div class="chart" id="candlestick"></div> + + <script> + + require([ + 'echarts' + ], function (echarts) { + + var dom = document.getElementById('candlestick'); + if (!dom) { + return; + } + + var chart = echarts.init(dom); + + var option = { + dataset: { + source: [ + { + category: "Category 1", + revenueGross: 123, + revenueGrossPrevious: 153, + revenueNet: 98, + revenueNetPrevious: 124, + }, + { + category: "Category 2", + revenueGross: 235, + revenueGrossPrevious: 143, + revenueNet: 201, + revenueNetPrevious: 102, + } + ], + }, + series: [ + { + type: "bar", + dimensions: ["category", "revenueGross"], + name: "Revenue gross" + }, + { + type: "bar", + dimensions: ["category", "revenueGrossPrevious"], + name: "Revenue gross: previous", + itemStyle: { + color: "#5470c6", + opacity: 0.5, + } + }, + { + type: "bar", + dimensions: ["category", "revenueNet"], + name: "Revenue net", + }, + { + type: "bar", + dimensions: ["category", "revenueNetPrevious"], + name: "Revenue net: previous", + itemStyle: { + color: "#91cc75", + opacity: 0.5, + } + }, + ], + xAxis: { + type: "category", + id: "category", + }, + yAxis: [ + { + type: "value", + name: "Revenue", + }, + ], + legend: {}, + tooltip: { + trigger: "axis", + axisPointer: { + type: "shadow", + }, + enterable: true, + } + }; + + chart.setOption(option); + }); + + </script> +</body> + +</html> \ No newline at end of file --------------------------------------------------------------------- To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org For additional commands, e-mail: commits-h...@echarts.apache.org