You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by sh...@apache.org on 2020/11/10 07:15:25 UTC
[incubator-echarts] 01/01: fix(label): inherit opacity from
attached element
This is an automated email from the ASF dual-hosted git repository.
shenyi pushed a commit to branch label-inherit-opacity
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git
commit 79fb9d12326f107c3df790dbdbfe20e6bb4ce154
Author: pissang <bm...@gmail.com>
AuthorDate: Tue Nov 10 15:14:43 2020 +0800
fix(label): inherit opacity from attached element
---
src/chart/bar/BarView.ts | 1 +
src/chart/bar/PictorialBarView.ts | 3 +--
src/chart/funnel/FunnelView.ts | 7 ++++---
src/chart/heatmap/HeatmapView.ts | 6 ++++--
src/chart/helper/Line.ts | 1 +
src/chart/helper/Symbol.ts | 3 ++-
src/chart/pie/PieView.ts | 11 ++++-------
src/chart/radar/RadarView.ts | 3 ++-
src/chart/treemap/TreemapView.ts | 9 ++++++---
src/label/labelStyle.ts | 20 +++++++++++++++++---
10 files changed, 42 insertions(+), 22 deletions(-)
diff --git a/src/chart/bar/BarView.ts b/src/chart/bar/BarView.ts
index 012f813..88dd9fa 100644
--- a/src/chart/bar/BarView.ts
+++ b/src/chart/bar/BarView.ts
@@ -855,6 +855,7 @@ function updateStyle(
labelDataIndex: dataIndex,
defaultText: getDefaultLabel(seriesModel.getData(), dataIndex),
inheritColor: style.fill as ColorString,
+ inheritOpacity: style.opacity,
defaultOutsidePosition: labelPositionOutside
}
);
diff --git a/src/chart/bar/PictorialBarView.ts b/src/chart/bar/PictorialBarView.ts
index ae49c30..1c3da45 100644
--- a/src/chart/bar/PictorialBarView.ts
+++ b/src/chart/bar/PictorialBarView.ts
@@ -916,8 +916,6 @@ function updateCommon(
path.ensureState('blur').style = blurStyle;
path.ensureState('select').style = selectStyle;
-
-
cursorStyle && (path.cursor = cursorStyle);
path.z2 = symbolMeta.z2;
});
@@ -932,6 +930,7 @@ function updateCommon(
labelDataIndex: dataIndex,
defaultText: getDefaultLabel(opt.seriesModel.getData(), dataIndex),
inheritColor: symbolMeta.style.fill as ColorString,
+ inheritOpacity: symbolMeta.style.opacity,
defaultOutsidePosition: barPositionOutside
}
);
diff --git a/src/chart/funnel/FunnelView.ts b/src/chart/funnel/FunnelView.ts
index 5fceca4..d165564 100644
--- a/src/chart/funnel/FunnelView.ts
+++ b/src/chart/funnel/FunnelView.ts
@@ -27,6 +27,7 @@ import List from '../../data/List';
import { ColorString } from '../../util/types';
import { setLabelLineStyle, getLabelLineStatesModels } from '../../label/labelGuideHelper';
import { setLabelStyle, getLabelStatesModels } from '../../label/labelStyle';
+import { retrieveVisualColorForTooltipMarker } from '../../component/tooltip/tooltipMarkup';
const opacityAccessPath = ['itemStyle', 'opacity'] as const;
@@ -101,9 +102,8 @@ class FunnelPiece extends graphic.Polygon {
const itemModel = data.getItemModel<FunnelDataItemOption>(idx);
const layout = data.getItemLayout(idx);
const labelLayout = layout.label;
- // let visualColor = data.getItemVisual(idx, 'color');
-
- const visualColor = data.getItemVisual(idx, 'style').fill as ColorString;
+ const style = data.getItemVisual(idx, 'style');
+ const visualColor = style.fill as ColorString;
setLabelStyle(
// position will not be used in setLabelStyle
@@ -112,6 +112,7 @@ class FunnelPiece extends graphic.Polygon {
{
labelFetcher: data.hostModel as FunnelSeriesModel,
labelDataIndex: idx,
+ inheritOpacity: style.opacity,
defaultText: data.getName(idx)
},
{ normal: {
diff --git a/src/chart/heatmap/HeatmapView.ts b/src/chart/heatmap/HeatmapView.ts
index 155e6b6..b8209d0 100644
--- a/src/chart/heatmap/HeatmapView.ts
+++ b/src/chart/heatmap/HeatmapView.ts
@@ -209,6 +209,7 @@ class HeatmapView extends ChartView {
for (let idx = start; idx < end; idx++) {
let rect;
+ const style = data.getItemVisual(idx, 'style');
if (isCoordinateSystemType<Cartesian2D>(coordSys, 'cartesian2d')) {
const dataDimX = data.get(dataDims[0], idx);
@@ -236,7 +237,7 @@ class HeatmapView extends ChartView {
width: Math.ceil(width),
height: Math.ceil(height)
},
- style: data.getItemVisual(idx, 'style')
+ style
});
}
else {
@@ -248,7 +249,7 @@ class HeatmapView extends ChartView {
rect = new graphic.Rect({
z2: 1,
shape: coordSys.dataToRect([data.get(dataDims[0], idx)]).contentShape,
- style: data.getItemVisual(idx, 'style')
+ style
});
}
@@ -278,6 +279,7 @@ class HeatmapView extends ChartView {
{
labelFetcher: seriesModel,
labelDataIndex: idx,
+ inheritOpacity: style.opacity,
defaultText: defaultText
}
);
diff --git a/src/chart/helper/Line.ts b/src/chart/helper/Line.ts
index 92a08f0..f0b0c63 100644
--- a/src/chart/helper/Line.ts
+++ b/src/chart/helper/Line.ts
@@ -256,6 +256,7 @@ class Line extends graphic.Group {
}
},
inheritColor: visualColor as ColorString || '#000',
+ inheritOpacity: lineStyle.opacity,
defaultText: (rawVal == null
? lineData.getName(idx)
: isFinite(rawVal)
diff --git a/src/chart/helper/Symbol.ts b/src/chart/helper/Symbol.ts
index 2b920c9..a7d0a01 100644
--- a/src/chart/helper/Symbol.ts
+++ b/src/chart/helper/Symbol.ts
@@ -318,7 +318,8 @@ class Symbol extends graphic.Group {
labelFetcher: seriesModel,
labelDataIndex: idx,
defaultText: getLabelDefaultText,
- inheritColor: visualColor as ColorString
+ inheritColor: visualColor as ColorString,
+ inheritOpacity: symbolStyle.opacity
}
);
diff --git a/src/chart/pie/PieView.ts b/src/chart/pie/PieView.ts
index 06a2924..bb0a22a 100644
--- a/src/chart/pie/PieView.ts
+++ b/src/chart/pie/PieView.ts
@@ -19,7 +19,7 @@
*/
-import { extend, retrieve2 } from 'zrender/src/core/util';
+import { extend, retrieve3 } from 'zrender/src/core/util';
import * as graphic from '../../util/graphic';
import { setStatesStylesFromModel, enableHoverEmphasis } from '../../util/states';
import ChartView from '../../view/Chart';
@@ -152,7 +152,6 @@ class PiePiece extends graphic.Sector {
private _updateLabel(seriesModel: PieSeriesModel, data: List, idx: number): void {
const sector = this;
const itemModel = data.getItemModel<PieDataItemOption>(idx);
- const labelModel = itemModel.getModel('label');
const labelLineModel = itemModel.getModel('labelLine');
const style = data.getItemVisual(idx, 'style');
@@ -166,12 +165,10 @@ class PiePiece extends graphic.Sector {
labelFetcher: data.hostModel as PieSeriesModel,
labelDataIndex: idx,
inheritColor: visualColor,
+ inheritOpacity: visualOpacity,
defaultText: seriesModel.getFormattedLabel(idx, 'normal')
|| data.getName(idx)
- },
- { normal: {
- opacity: retrieve2(labelModel.get('opacity'), visualOpacity)
- } }
+ }
);
const labelText = sector.getTextContent();
@@ -191,7 +188,7 @@ class PiePiece extends graphic.Sector {
// Default use item visual color
setLabelLineStyle(this, getLabelLineStatesModels(itemModel), {
stroke: visualColor,
- opacity: retrieve2(labelLineModel.get(['lineStyle', 'opacity']), visualOpacity)
+ opacity: retrieve3(labelLineModel.get(['lineStyle', 'opacity']), visualOpacity, 1)
});
}
}
diff --git a/src/chart/radar/RadarView.ts b/src/chart/radar/RadarView.ts
index 64054e9..ce1131e 100644
--- a/src/chart/radar/RadarView.ts
+++ b/src/chart/radar/RadarView.ts
@@ -255,7 +255,8 @@ class RadarView extends ChartView {
labelDataIndex: idx,
labelDimIndex: symbolPath.__dimIdx,
defaultText: defaultText as string,
- inheritColor: color as ColorString
+ inheritColor: color as ColorString,
+ inheritOpacity: itemStyle.opacity
}
);
});
diff --git a/src/chart/treemap/TreemapView.ts b/src/chart/treemap/TreemapView.ts
index 2255f3c..a64bba4 100644
--- a/src/chart/treemap/TreemapView.ts
+++ b/src/chart/treemap/TreemapView.ts
@@ -859,7 +859,8 @@ function renderNode(
}
else {
bg.invisible = false;
- const visualBorderColor = thisNode.getVisual('style').stroke;
+ const style = thisNode.getVisual('style');
+ const visualBorderColor = style.stroke;
const normalStyle = getItemStyleNormal(itemStyleNormalModel);
normalStyle.fill = visualBorderColor;
const emphasisStyle = getStateItemStyle(itemStyleEmphasisModel);
@@ -873,7 +874,7 @@ function renderNode(
const upperLabelWidth = thisWidth - 2 * borderWidth;
prepareText(
- bg, visualBorderColor, upperLabelWidth, upperHeight,
+ bg, visualBorderColor, upperLabelWidth, upperHeight, style.opacity,
{x: borderWidth, y: 0, width: upperLabelWidth, height: upperHeight}
);
}
@@ -928,7 +929,7 @@ function renderNode(
const blurStyle = getStateItemStyle(itemStyleBlurModel);
const selectStyle = getStateItemStyle(itemStyleSelectModel);
- prepareText(content, visualColor, contentWidth, contentHeight);
+ prepareText(content, visualColor, contentWidth, nodeStyle.opacity, contentHeight);
content.setStyle(normalStyle);
content.ensureState('emphasis').style = emphasisStyle;
@@ -949,6 +950,7 @@ function renderNode(
function prepareText(
rectEl: graphic.Rect,
visualColor: ColorString,
+ visualOpacity: number,
width: number,
height: number,
upperLabelRect?: RectLike
@@ -976,6 +978,7 @@ function renderNode(
{
defaultText: isShow ? text : null,
inheritColor: visualColor,
+ inheritOpacity: visualOpacity,
labelFetcher: seriesModel,
labelDataIndex: thisNode.dataIndex
}
diff --git a/src/label/labelStyle.ts b/src/label/labelStyle.ts
index fab4467..2c8f3e8 100644
--- a/src/label/labelStyle.ts
+++ b/src/label/labelStyle.ts
@@ -52,6 +52,12 @@ type TextCommonParams = {
*/
inheritColor?: ColorString
+ /**
+ * Specify a opacity when opacity is 'inherit',
+ * If inheritColor specified, it is used as default textFill.
+ */
+ inheritOpacity?: number
+
defaultOutsidePosition?: LabelOption['position']
/**
@@ -356,7 +362,7 @@ export function createTextConfig(
function setTextStyleCommon(
textStyle: TextStyleProps,
textStyleModel: Model,
- opt?: Pick<TextCommonParams, 'inheritColor' | 'disableBox'>,
+ opt?: Pick<TextCommonParams, 'inheritColor' | 'inheritOpacity' | 'disableBox'>,
isNotNormal?: boolean,
isAttached?: boolean
) {
@@ -441,7 +447,7 @@ function getRichItemNames(textStyleModel: Model<LabelOption>) {
return richItemNameMap;
}
const TEXT_PROPS_WITH_GLOBAL = [
- 'fontStyle', 'fontWeight', 'fontSize', 'fontFamily', 'opacity',
+ 'fontStyle', 'fontWeight', 'fontSize', 'fontFamily',
'textShadowColor', 'textShadowBlur', 'textShadowOffsetX', 'textShadowOffsetY'
] as const;
const TEXT_PROPS_SELF = [
@@ -457,7 +463,7 @@ function setTokenTextStyle(
textStyle: TextStyleProps['rich'][string],
textStyleModel: Model<LabelOption>,
globalTextStyle: LabelOption,
- opt?: Pick<TextCommonParams, 'inheritColor' | 'disableBox'>,
+ opt?: Pick<TextCommonParams, 'inheritColor' | 'inheritOpacity' | 'disableBox'>,
isNotNormal?: boolean,
isAttached?: boolean,
isBlock?: boolean
@@ -467,6 +473,7 @@ function setTokenTextStyle(
const inheritColor = opt && opt.inheritColor;
let fillColor = textStyleModel.getShallow('color');
let strokeColor = textStyleModel.getShallow('textBorderColor');
+ let opacity = retrieve2(textStyleModel.getShallow('opacity'), globalTextStyle.opacity);
if (fillColor === 'inherit' || fillColor === 'auto') {
if (__DEV__) {
if (fillColor === 'auto') {
@@ -520,6 +527,13 @@ function setTokenTextStyle(
textStyle.lineDashOffset = textBorderDashOffset;
}
+ if (!isNotNormal && (opacity == null)) {
+ opacity = opt && opt.inheritOpacity;
+ }
+ if (opacity != null) {
+ textStyle.opacity = opacity;
+ }
+
// TODO
if (!isNotNormal && !isAttached) {
// Set default finally.
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org