From 05ed207e006e5757da3a84618ccb231d7cb1a9de Mon Sep 17 00:00:00 2001 From: pissang Date: Tue, 6 Apr 2021 19:02:42 +0800 Subject: [PATCH] fix(z): use z2 to represent overlay in treemap --- src/chart/line/LineView.ts | 2 +- src/chart/treemap/TreemapView.ts | 23 ++++++++++++----------- src/core/echarts.ts | 20 +++++++++++--------- 3 files changed, 24 insertions(+), 21 deletions(-) diff --git a/src/chart/line/LineView.ts b/src/chart/line/LineView.ts index 3721deddd..47933b9be 100644 --- a/src/chart/line/LineView.ts +++ b/src/chart/line/LineView.ts @@ -843,7 +843,7 @@ class LineView extends ChartView { // ensure label text of the temporal symbol is on the top of line and area polygon const symbolLabel = symbol.getSymbolPath().getTextContent(); - symbolLabel && (symbolLabel.z = this._polyline.z + 1); + symbolLabel && (symbolLabel.z2 = this._polyline.z2 + 1); (symbol as SymbolExtended).__temp = true; data.setItemGraphicEl(dataIndex, symbol); diff --git a/src/chart/treemap/TreemapView.ts b/src/chart/treemap/TreemapView.ts index d784c81fa..8f540d4a3 100644 --- a/src/chart/treemap/TreemapView.ts +++ b/src/chart/treemap/TreemapView.ts @@ -17,14 +17,15 @@ * under the License. */ -import {bind, each, indexOf, curry, extend, retrieve, normalizeCssArray, isFunction} from 'zrender/src/core/util'; +import {bind, each, indexOf, curry, extend, normalizeCssArray, isFunction} from 'zrender/src/core/util'; import * as graphic from '../../util/graphic'; import {getECData} from '../../util/innerStore'; import { isHighDownDispatcher, setAsHighDownDispatcher, setDefaultStateProxy, - enableHoverFocus + enableHoverFocus, + Z2_EMPHASIS_LIFT } from '../../util/states'; import DataDiffer from '../../data/DataDiffer'; import * as helper from '../helper/treeHelper'; @@ -64,9 +65,10 @@ const Rect = graphic.Rect; const DRAG_THRESHOLD = 3; const PATH_LABEL_NOAMAL = 'label'; const PATH_UPPERLABEL_NORMAL = 'upperLabel'; -const Z_BASE = 10; // Should bigger than every z. -const Z_BG = 1; -const Z_CONTENT = 2; +// Should larger than emphasis states lift z +const Z2_BASE = Z2_EMPHASIS_LIFT * 10; // Should bigger than every z2. +const Z2_BG = Z2_EMPHASIS_LIFT * 2; +const Z2_CONTENT = Z2_EMPHASIS_LIFT * 3; const getStateItemStyle = makeStyleMapper([ ['fill', 'color'], @@ -797,7 +799,7 @@ function renderNode( } // Background - const bg = giveGraphic('background', Rect, depth, Z_BG); + const bg = giveGraphic('background', Rect, depth, Z2_BG); bg && renderBackground(group, bg, isParent && thisLayout.upperLabelHeight); const focus = nodeModel.get(['emphasis', 'focus']); @@ -824,7 +826,7 @@ function renderNode( } } else { - const content = giveGraphic('content', Rect, depth, Z_CONTENT); + const content = giveGraphic('content', Rect, depth, Z2_CONTENT); content && renderContent(group, content); if (bg && isHighDownDispatcher(bg)) { @@ -1034,7 +1036,7 @@ function renderNode( else if (!thisInvisible) { element = new Ctor(); if (element instanceof Displayable) { - element.z = calculateZ(depth, z); + element.z2 = calculateZ2(depth, z); } prepareAnimationWhenNoOld(lasts, element); } @@ -1096,9 +1098,8 @@ function renderNode( // upper ones. So we calculate z based on depth. // Moreover, we try to shrink down z interval to [0, 1] to avoid that // treemap with large z overlaps other components. -function calculateZ(depth: number, zInLevel: number) { - const zb = depth * Z_BASE + zInLevel; - return (zb - 1) / zb; +function calculateZ2(depth: number, z2InLevel: number) { + return depth * Z2_BASE + z2InLevel; } export default TreemapView; \ No newline at end of file diff --git a/src/core/echarts.ts b/src/core/echarts.ts index 6e0dbe699..dd9098773 100644 --- a/src/core/echarts.ts +++ b/src/core/echarts.ts @@ -2158,7 +2158,12 @@ class ECharts extends Eventful { return; } // Set z and zlevel - _updateZ(view.group, model.get('z'), model.get('zlevel'), -Infinity); + _updateZ( + view.group, + model.get('z') || 0, + model.get('zlevel') || 0, + -Infinity + ); }; function _updateZ(el: Element, z: number, zlevel: number, maxZ2: number): number { @@ -2177,8 +2182,8 @@ class ECharts extends Eventful { } else { // not Group - z != null && ((el as Displayable).z = z); - zlevel != null && ((el as Displayable).zlevel = zlevel); + (el as Displayable).z = z; + (el as Displayable).zlevel = zlevel; maxZ2 = Math.max((el as Displayable).z2, maxZ2); } @@ -2189,17 +2194,14 @@ class ECharts extends Eventful { label.zlevel = zlevel; // lift z2 of text content // TODO if el.emphasis.z2 is spcefied, what about textContent. - if (isFinite(maxZ2)) { - label.z2 = maxZ2 + 2; - } + isFinite(maxZ2) && (label.z2 = maxZ2 + 2); } if (labelLine) { const textGuideLineConfig = el.textGuideLineConfig; labelLine.z = z; labelLine.zlevel = zlevel; - if (isFinite(maxZ2)) { - labelLine.z2 = maxZ2 + ((textGuideLineConfig && textGuideLineConfig.showAbove) ? 1 : -1); - } + isFinite(maxZ2) + && (labelLine.z2 = maxZ2 + (textGuideLineConfig && textGuideLineConfig.showAbove ? 1 : -1)); } return maxZ2; } -- GitLab