From 1f92d8ffd9df9ac3cafb2f89cb3a66c34b47212e Mon Sep 17 00:00:00 2001 From: susiwen8 Date: Mon, 11 Apr 2022 23:33:15 +0800 Subject: [PATCH 1/4] feat(dataZoom): `valueRange` for `dataZoom` event --- src/component/dataZoom/SliderZoomView.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/component/dataZoom/SliderZoomView.ts b/src/component/dataZoom/SliderZoomView.ts index 132f1cecc0..6257e9f206 100644 --- a/src/component/dataZoom/SliderZoomView.ts +++ b/src/component/dataZoom/SliderZoomView.ts @@ -131,6 +131,7 @@ class SliderZoomView extends DataZoomView { private _shadowSize: number[]; private _shadowPolygonPts: number[][]; private _shadowPolylinePts: number[][]; + private _valueRange: number[] = []; init(ecModel: GlobalModel, api: ExtensionAPI) { this.api = api; @@ -815,6 +816,7 @@ class SliderZoomView extends DataZoomView { start: range[0], end: range[1] }).valueWindow : axisProxy.getDataValueWindow(); + this._valueRange = dataInterval; labelTexts = [ this._formatLabel(dataInterval[0], axis), @@ -1048,7 +1050,9 @@ class SliderZoomView extends DataZoomView { dataZoomId: this.dataZoomModel.id, animation: realtime ? REALTIME_ANIMATION_CONFIG : null, start: range[0], - end: range[1] + end: range[1], + startValue: this._valueRange[0], + endValue: this._valueRange[1] }); } From e22a278361134dea7b7d9e323e9a7d06c64c3abe Mon Sep 17 00:00:00 2001 From: susiwen8 Date: Fri, 24 Jun 2022 10:57:01 +0800 Subject: [PATCH 2/4] fix: `startValue` and `endValue` should be updated if `showDetail` is false --- src/component/dataZoom/SliderZoomView.ts | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/src/component/dataZoom/SliderZoomView.ts b/src/component/dataZoom/SliderZoomView.ts index b8d2244497..b813b9a515 100644 --- a/src/component/dataZoom/SliderZoomView.ts +++ b/src/component/dataZoom/SliderZoomView.ts @@ -804,21 +804,21 @@ class SliderZoomView extends DataZoomView { // FIXME // date型，支持formatter，autoformatter（ec2 date.getAutoFormatter） - if (dataZoomModel.get('showDetail')) { - const axisProxy = dataZoomModel.findRepresentativeAxisProxy(); + const axisProxy = dataZoomModel.findRepresentativeAxisProxy(); - if (axisProxy) { - const axis = axisProxy.getAxisModel().axis; - const range = this._range; + if (axisProxy) { + const axis = axisProxy.getAxisModel().axis; + const range = this._range; - const dataInterval = nonRealtime - // See #4434, data and axis are not processed and reset yet in non-realtime mode. - ? axisProxy.calculateDataWindow({ - start: range[0], end: range[1] - }).valueWindow - : axisProxy.getDataValueWindow(); - this._valueRange = dataInterval; + const dataInterval = nonRealtime + // See #4434, data and axis are not processed and reset yet in non-realtime mode. + ? axisProxy.calculateDataWindow({ + start: range[0], end: range[1] + }).valueWindow + : axisProxy.getDataValueWindow(); + this._valueRange = dataInterval; + if (dataZoomModel.get('showDetail')) { labelTexts = [ this._formatLabel(dataInterval[0], axis), this._formatLabel(dataInterval[1], axis) From 2030f90742523d812168d3dfb078132f2cb9c738 Mon Sep 17 00:00:00 2001 From: susiwen8 Date: Wed, 10 Aug 2022 22:52:48 +0800 Subject: [PATCH 3/4] fix: the timing fo calculating `_valueRange` --- src/component/dataZoom/SliderZoomView.ts | 35 +++++++++++++++--------- 1 file changed, 22 insertions(+), 13 deletions(-) diff --git a/src/component/dataZoom/SliderZoomView.ts b/src/component/dataZoom/SliderZoomView.ts index 4618cb42c0..889483dcbc 100644 --- a/src/component/dataZoom/SliderZoomView.ts +++ b/src/component/dataZoom/SliderZoomView.ts @@ -698,6 +698,7 @@ class SliderZoomView extends DataZoomView { private _resetInterval() { const range = this._range = this.dataZoomModel.getPercentRange(); + this.setValueRange(range); const viewExtent = this._getViewExtent(); this._handleEnds = [ @@ -729,6 +730,7 @@ class SliderZoomView extends DataZoomView { linearMap(handleEnds[0], viewExtend, percentExtent, true), linearMap(handleEnds[1], viewExtend, percentExtent, true) ]); + this.setValueRange(range); return !lastRange || lastRange[0] !== range[0] || lastRange[1] !== range[1]; } @@ -805,21 +807,13 @@ class SliderZoomView extends DataZoomView { // FIXME // date型，支持formatter，autoformatter（ec2 date.getAutoFormatter） - const axisProxy = dataZoomModel.findRepresentativeAxisProxy(); + if (dataZoomModel.get('showDetail')) { + const axisProxy = dataZoomModel.findRepresentativeAxisProxy(); - if (axisProxy) { - const axis = axisProxy.getAxisModel().axis; - const range = this._range; - - const dataInterval = nonRealtime - // See #4434, data and axis are not processed and reset yet in non-realtime mode. - ? axisProxy.calculateDataWindow({ - start: range[0], end: range[1] - }).valueWindow - : axisProxy.getDataValueWindow(); - this._valueRange = dataInterval; + if (axisProxy) { + const axis = axisProxy.getAxisModel().axis; + const dataInterval = this._valueRange; - if (dataZoomModel.get('showDetail')) { labelTexts = [ this._formatLabel(dataInterval[0], axis), this._formatLabel(dataInterval[1], axis) @@ -993,6 +987,8 @@ class SliderZoomView extends DataZoomView { linearMap(brushShape.x + brushShape.width, viewExtend, percentExtent, true) ]); + this.setValueRange(this._range); + this._handleEnds = [brushShape.x, brushShape.x + brushShape.width]; this._updateView(); @@ -1000,6 +996,19 @@ class SliderZoomView extends DataZoomView { this._dispatchZoomAction(false); } + private setValueRange(range: number[]) { + const axisProxy = this.dataZoomModel.findRepresentativeAxisProxy(); + if (axisProxy) { + const dataInterval = this.dataZoomModel.get('realtime') + // See #4434, data and axis are not processed and reset yet in non-realtime mode. + ? axisProxy.calculateDataWindow({ + start: range[0], end: range[1] + }).valueWindow + : axisProxy.getDataValueWindow(); + this._valueRange = dataInterval; + } + } + private _onBrush(e: ZRElementEvent) { if (this._brushing) { // For mobile device, prevent screen slider on the button. From 671a100500a4dabe751151f5c62d9bbef7b2b315 Mon Sep 17 00:00:00 2001 From: susiwen8 Date: Wed, 10 Aug 2022 23:02:02 +0800 Subject: [PATCH 4/4] test: add test case for dataZom --- test/connect-manually.html | 4 +++- test/homepage3.js | 4 +++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/test/connect-manually.html b/test/connect-manually.html index 178a83a5d1..83d8f7ba43 100644 --- a/test/connect-manually.html +++ b/test/connect-manually.html @@ -153,7 +153,9 @@ type: 'dataZoom', dataZoomIndex: params.batch[0].dataZoomIndex, start: params.batch[0].start, - end: params.batch[0].end + end: params.batch[0].end, + startValue: params.batch[0].startValue, + endValue: params.batch[0].endValue }, true); }); }); diff --git a/test/homepage3.js b/test/homepage3.js index 616de63d67..a42d6d9f1f 100644 --- a/test/homepage3.js +++ b/test/homepage3.js @@ -554,7 +554,9 @@ function renderHomepage3Demo(echarts) { type: 'dataZoom', dataZoomIndex: 0, start: payload.start, - end: payload.end + end: payload.end, + startValue: payload.startValue, + endValue: payload.endValue }, true); });