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
