diff --git a/src/chart/helper/Line.ts b/src/chart/helper/Line.ts index bbfb774ba5..82cc49de76 100644 --- a/src/chart/helper/Line.ts +++ b/src/chart/helper/Line.ts @@ -17,7 +17,7 @@ * under the License. */ -import { isArray, each } from 'zrender/src/core/util'; +import { isArray, each, retrieve2 } from 'zrender/src/core/util'; import * as vector from 'zrender/src/core/vector'; import * as symbolUtil from '../../util/symbol'; import ECLinePath from './LinePath'; @@ -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: retrieve2(z2, 0), shape: { percent: 1 } diff --git a/src/chart/helper/Symbol.ts b/src/chart/helper/Symbol.ts index 58ddc36a66..88c3708141 100644 --- a/src/chart/helper/Symbol.ts +++ b/src/chart/helper/Symbol.ts @@ -27,7 +27,7 @@ import { ColorString, BlurScope, AnimationOption, ZRColor, AnimationOptionMixin import SeriesModel from '../../model/Series'; import { PathProps } from 'zrender/src/graphic/Path'; import { SymbolDrawSeriesScope, SymbolDrawItemModelOption } from './SymbolDraw'; -import { extend } from 'zrender/src/core/util'; +import { extend, retrieve2 } from 'zrender/src/core/util'; import { setLabelStyle, getLabelStatesModels } from '../../label/labelStyle'; import ZRImage from 'zrender/src/graphic/Image'; import { saveOldStyle } from '../../animation/basicTransition'; @@ -64,6 +64,7 @@ class Symbol extends graphic.Group { data: SeriesData, idx: number, symbolSize: number[], + z2: number, keepAspect: boolean ) { // Remove paths created before @@ -80,7 +81,7 @@ class Symbol extends graphic.Group { ); symbolPath.attr({ - z2: 100, + z2: retrieve2(z2, 100), 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'); + } } diff --git a/src/component/marker/MarkAreaModel.ts b/src/component/marker/MarkAreaModel.ts index ecc71dfc86..6c80f9d564 100644 --- a/src/component/marker/MarkAreaModel.ts +++ b/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, diff --git a/src/component/marker/MarkAreaView.ts b/src/component/marker/MarkAreaView.ts index 9ecf7d32ee..e1f3d7bc47 100644 --- a/src/component/marker/MarkAreaView.ts +++ b/src/component/marker/MarkAreaView.ts @@ -26,7 +26,7 @@ import * as graphic from '../../util/graphic'; import { toggleHoverEmphasis, setStatesStylesFromModel } from '../../util/states'; import * as markerHelper from './markerHelper'; import MarkerView from './MarkerView'; -import { retrieve, mergeAll, map, curry, filter, HashMap, extend, isString } from 'zrender/src/core/util'; +import { retrieve, mergeAll, map, curry, filter, HashMap, extend, isString, retrieve2 } from 'zrender/src/core/util'; import { ScaleDataValue, ZRColor } from '../../util/types'; import { CoordinateSystem, isCoordinateSystemType } from '../../coord/CoordinateSystem'; import MarkAreaModel, { MarkArea2DDataItemOption } from './MarkAreaModel'; @@ -301,8 +301,9 @@ class MarkAreaView extends MarkerView { allClipped: allClipped }); - - const style = areaData.getItemModel(idx).getModel('itemStyle').getItemStyle(); + const itemModel = areaData.getItemModel(idx); + const style = itemModel.getModel('itemStyle').getItemStyle(); + const z2 = itemModel.get('z2'); 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', retrieve2(z2, 0)); }); 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: retrieve2(z2, 0), 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: retrieve2(z2, 0), shape: { points: layout.points } diff --git a/src/component/marker/MarkLineModel.ts b/src/component/marker/MarkLineModel.ts index 80f524aae7..eca95eef1a 100644 --- a/src/component/marker/MarkLineModel.ts +++ b/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 { diff --git a/src/component/marker/MarkLineView.ts b/src/component/marker/MarkLineView.ts index 2c6d5e53e9..68c048b4df 100644 --- a/src/component/marker/MarkLineView.ts +++ b/src/component/marker/MarkLineView.ts @@ -349,8 +349,8 @@ class MarkLineView extends MarkerView { // Update visual and layout of line lineData.each(function (idx) { - const lineStyle = lineData.getItemModel(idx) - .getModel('lineStyle').getLineStyle(); + const itemModel = lineData.getItemModel(idx); + const lineStyle = itemModel.getModel('lineStyle').getLineStyle(); // lineData.setItemVisual(idx, { // color: lineColor || fromData.getItemVisual(idx, 'color') // }); @@ -358,12 +358,14 @@ class MarkLineView extends MarkerView { fromData.getItemLayout(idx), toData.getItemLayout(idx) ]); + const z2 = itemModel.get('z2'); if (lineStyle.stroke == null) { lineStyle.stroke = fromData.getItemVisual(idx, 'style').fill; } lineData.setItemVisual(idx, { + z2: retrieve2(z2, 0), fromSymbolKeepAspect: fromData.getItemVisual(idx, 'symbolKeepAspect'), fromSymbolOffset: fromData.getItemVisual(idx, 'symbolOffset'), fromSymbolRotate: fromData.getItemVisual(idx, 'symbolRotate'), diff --git a/src/component/marker/MarkPointModel.ts b/src/component/marker/MarkPointModel.ts index 1b672317c7..35a4592890 100644 --- a/src/component/marker/MarkPointModel.ts +++ b/src/component/marker/MarkPointModel.ts @@ -36,6 +36,7 @@ import { interface MarkPointStateOption { itemStyle?: ItemStyleOption label?: SeriesLabelOption + z2?: number } export interface MarkPointDataItemOption extends MarkPointStateOption, StatesOptionMixin, diff --git a/src/component/marker/MarkPointView.ts b/src/component/marker/MarkPointView.ts index 3e4499c0d4..5cdfe0a334 100644 --- a/src/component/marker/MarkPointView.ts +++ b/src/component/marker/MarkPointView.ts @@ -29,7 +29,7 @@ import MarkPointModel, {MarkPointDataItemOption} from './MarkPointModel'; import GlobalModel from '../../model/Global'; import MarkerModel from './MarkerModel'; import ExtensionAPI from '../../core/ExtensionAPI'; -import { HashMap, isFunction, map, filter, curry, extend } from 'zrender/src/core/util'; +import { HashMap, isFunction, map, filter, curry, extend, retrieve2 } from 'zrender/src/core/util'; import { getECData } from '../../util/innerStore'; import { getVisualFromData } from '../../visual/helper'; import { ZRColor } from '../../util/types'; @@ -143,12 +143,14 @@ class MarkPointView extends MarkerView { } const style = itemModel.getModel('itemStyle').getItemStyle(); + const z2 = itemModel.get('z2'); const color = getVisualFromData(seriesData, 'color') as ZRColor; if (!style.fill) { style.fill = color; } mpData.setItemVisual(idx, { + z2: retrieve2(z2, 0), symbol: symbol, symbolSize: symbolSize, symbolRotate: symbolRotate, diff --git a/src/data/SeriesData.ts b/src/data/SeriesData.ts index bc48a9a4d6..ba02a21b15 100644 --- a/src/data/SeriesData.ts +++ b/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 diff --git a/test/marker-z2.html b/test/marker-z2.html new file mode 100644 index 0000000000..d38cd2cbf4 --- /dev/null +++ b/test/marker-z2.html @@ -0,0 +1,400 @@ + + + + + + + + + + + + + +
+
+
+ + + + + + + +