fix(z): use z2 to represent overlay in treemap

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);

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

src/core/echarts.ts

@@ -2158,7 +2158,12 @@ class ECharts extends Eventful<ECEventDefinition> {
                 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<ECEventDefinition> {
             }
             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<ECEventDefinition> {
                 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;
         }