feat(marker): markPoint markLine markArea add z2 option to suport

change level

Author: sz-p

src/chart/helper/Line.ts

@@ -164,9 +164,11 @@ class Line extends graphic.Group {
     _createLine(lineData: LineList, idx: number, seriesScope?: LineDrawSeriesScope) {
         const seriesModel = lineData.hostModel;
         const linePoints = lineData.getItemLayout(idx);
+        const z2  = lineData.getItemVisual(idx, 'z2');
         const line = createLine(linePoints);
         line.shape.percent = 0;
         graphic.initProps(line, {
+            z2,
             shape: {
                 percent: 1
             }

src/chart/helper/Symbol.ts

@@ -64,6 +64,7 @@ class Symbol extends graphic.Group {
         data: SeriesData,
         idx: number,
         symbolSize: number[],
+        z2: number,
         keepAspect: boolean
     ) {
         // Remove paths created before
@@ -79,8 +80,8 @@ class Symbol extends graphic.Group {
             symbolType, -1, -1, 2, 2, null, keepAspect
         );
 
-        symbolPath.attr({
-            z2: 100,
+        symbolPath.attr({ 
+            z2,
             culling: true,
             scaleX: symbolSize[0] / 2,
             scaleY: symbolSize[1] / 2
@@ -156,12 +157,13 @@ class Symbol extends graphic.Group {
         const symbolType = data.getItemVisual(idx, 'symbol') || 'circle';
         const seriesModel = data.hostModel as SeriesModel;
         const symbolSize = Symbol.getSymbolSize(data, idx);
+        const z2  = Symbol.getSymbolZ2(data, idx);
         const isInit = symbolType !== this._symbolType;
         const disableAnimation = opts && opts.disableAnimation;
 
         if (isInit) {
             const keepAspect = data.getItemVisual(idx, 'symbolKeepAspect');
-            this._createSymbol(symbolType as string, data, idx, symbolSize, keepAspect);
+            this._createSymbol(symbolType as string, data, idx, symbolSize, z2, keepAspect);
         }
         else {
             const symbolPath = this.childAt(0) as ECSymbol;
@@ -405,6 +407,9 @@ class Symbol extends graphic.Group {
     static getSymbolSize(data: SeriesData, idx: number) {
         return normalizeSymbolSize(data.getItemVisual(idx, 'symbolSize'));
     }
+    static getSymbolZ2(data: SeriesData, idx: number) {
+        return data.getItemVisual(idx, 'z2');
+    }
 }
 
 

src/component/marker/MarkAreaModel.ts

@@ -25,6 +25,7 @@ import GlobalModel from '../../model/Global';
 interface MarkAreaStateOption {
     itemStyle?: ItemStyleOption
     label?: SeriesLabelOption
+    z2?: number
 }
 
 interface MarkAreaDataItemOptionBase extends MarkAreaStateOption,

src/component/marker/MarkAreaView.ts

@@ -301,8 +301,9 @@ class MarkAreaView extends MarkerView {
                 allClipped: allClipped
             });
 
-
-            const style = areaData.getItemModel<MarkAreaMergedItemOption>(idx).getModel('itemStyle').getItemStyle();
+            const itemModel = areaData.getItemModel<MarkAreaMergedItemOption>(idx);
+            const style = itemModel.getModel('itemStyle').getItemStyle();
+            const z2 = itemModel.getModel('z2').option;
             const color = getVisualFromData(seriesData, 'color') as ZRColor;
             if (!style.fill) {
                 style.fill = color;
@@ -315,14 +316,17 @@ class MarkAreaView extends MarkerView {
             }
             // Visual
             areaData.setItemVisual(idx, 'style', style);
+            areaData.setItemVisual(idx, 'z2', z2);
         });
 
 
         areaData.diff(inner(polygonGroup).data)
             .add(function (idx) {
                 const layout = areaData.getItemLayout(idx);
+                const z2 = areaData.getItemVisual(idx, 'z2');
                 if (!layout.allClipped) {
                     const polygon = new graphic.Polygon({
+                        z2,
                         shape: {
                             points: layout.points
                         }
@@ -334,9 +338,11 @@ class MarkAreaView extends MarkerView {
             .update(function (newIdx, oldIdx) {
                 let polygon = inner(polygonGroup).data.getItemGraphicEl(oldIdx) as graphic.Polygon;
                 const layout = areaData.getItemLayout(newIdx);
+                const z2 = areaData.getItemVisual(newIdx, 'z2');
                 if (!layout.allClipped) {
                     if (polygon) {
                         graphic.updateProps(polygon, {
+                            z2,
                             shape: {
                                 points: layout.points
                             }

src/component/marker/MarkLineModel.ts

@@ -34,7 +34,8 @@ interface MarkLineStateOption {
      * itemStyle for symbol
      */
     itemStyle?: ItemStyleOption
-    label?: SeriesLineLabelOption
+    label?: SeriesLineLabelOption,
+    z2?: number
 }
 interface MarkLineDataItemOptionBase extends MarkLineStateOption,
     StatesOptionMixin<MarkLineStateOption, StatesMixinBase> {

src/component/marker/MarkLineView.ts

@@ -349,21 +349,23 @@ class MarkLineView extends MarkerView {
 
         // Update visual and layout of line
         lineData.each(function (idx) {
-            const lineStyle = lineData.getItemModel<MarkLineMergedItemOption>(idx)
-                .getModel('lineStyle').getLineStyle();
+            const itemModel = lineData.getItemModel<MarkLineMergedItemOption>(idx);
+            const lineStyle = itemModel.getModel('lineStyle').getLineStyle();
             // lineData.setItemVisual(idx, {
             //     color: lineColor || fromData.getItemVisual(idx, 'color')
             // });
             lineData.setItemLayout(idx, [
                 fromData.getItemLayout(idx),
                 toData.getItemLayout(idx)
             ]);
+            const z2 = itemModel.getModel('z2').option;
 
             if (lineStyle.stroke == null) {
                 lineStyle.stroke = fromData.getItemVisual(idx, 'style').fill;
             }
 
             lineData.setItemVisual(idx, {
+                z2,
                 fromSymbolKeepAspect: fromData.getItemVisual(idx, 'symbolKeepAspect'),
                 fromSymbolOffset: fromData.getItemVisual(idx, 'symbolOffset'),
                 fromSymbolRotate: fromData.getItemVisual(idx, 'symbolRotate'),

src/component/marker/MarkPointModel.ts

@@ -36,6 +36,7 @@ import {
 interface MarkPointStateOption {
     itemStyle?: ItemStyleOption
     label?: SeriesLabelOption
+    z2?: number
 }
 export interface MarkPointDataItemOption extends
     MarkPointStateOption, StatesOptionMixin<MarkPointStateOption, StatesMixinBase>,

src/component/marker/MarkPointView.ts

@@ -143,12 +143,14 @@ class MarkPointView extends MarkerView {
             }
 
             const style = itemModel.getModel('itemStyle').getItemStyle();
+            const z2 = itemModel.getModel('z2').option;
             const color = getVisualFromData(seriesData, 'color') as ZRColor;
             if (!style.fill) {
                 style.fill = color;
             }
 
             mpData.setItemVisual(idx, {
+                z2,
                 symbol: symbol,
                 symbolSize: symbolSize,
                 symbolRotate: symbolRotate,

src/data/SeriesData.ts

@@ -113,7 +113,7 @@ export interface DefaultDataVisual {
     symbolRotate?: number
     symbolKeepAspect?: boolean
     symbolOffset?: string | number | (string | number)[]
-
+    z2: number,
     liftZ?: number
     // For legend.
     legendIcon?: string