From 6babda73b6ca6ab90f149c67d5b69136025ccc78 Mon Sep 17 00:00:00 2001 From: Andrea Rota Date: Wed, 4 May 2022 15:21:49 +0200 Subject: [PATCH 1/3] fix(dataZoom): render data not equally distributed. close #16924 --- src/component/dataZoom/SliderZoomView.ts | 22 ++++++++++++++-------- 1 file changed, 14 insertions(+), 8 deletions(-) diff --git a/src/component/dataZoom/SliderZoomView.ts b/src/component/dataZoom/SliderZoomView.ts index 6669929fb7..84bd0d2c68 100644 --- a/src/component/dataZoom/SliderZoomView.ts +++ b/src/component/dataZoom/SliderZoomView.ts @@ -374,6 +374,7 @@ class SliderZoomView extends DataZoomView { data !== this._shadowData || otherDim !== this._shadowDim || size[0] !== oldSize[0] || size[1] !== oldSize[1] ) { + const thisDataExtent = data.getDataExtent(info.thisDim); let otherDataExtent = data.getDataExtent(otherDim); // Nice extent. const otherOffset = (otherDataExtent[1] - otherDataExtent[0]) * 0.3; @@ -387,26 +388,32 @@ class SliderZoomView extends DataZoomView { const areaPoints = [[size[0], 0], [0, 0]]; const linePoints: number[][] = []; const step = thisShadowExtent[1] / (data.count() - 1); - let thisCoord = 0; + const normalizationConstant = size[0] / (thisDataExtent[1] - thisDataExtent[0]); + let thisCoord = -step; // Optimize for large data shadow const stride = Math.round(data.count() / size[0]); let lastIsEmpty: boolean; - data.each([otherDim], function (value: ParsedValue, index) { - if (stride > 0 && (index % stride)) { + + data.each([info.thisDim, otherDim], function (thisValue: ParsedValue, otherValue: ParsedValue, index) { + if (stride > 0 && (index % stride) && info.thisAxis.type != 'time') { thisCoord += step; return; + } else if (stride > 0 && (index % stride)) { + return; } + thisCoord = info.thisAxis.type == 'time' ? (+thisValue - thisDataExtent[0]) * normalizationConstant : thisCoord + step; + // FIXME // Should consider axis.min/axis.max when drawing dataShadow. // FIXME // 应该使用统一的空判断？还是在list里进行空判断？ - const isEmpty = value == null || isNaN(value as number) || value === ''; + const isEmpty = otherValue == null || isNaN(otherValue as number) || otherValue === ''; // See #4235. const otherCoord = isEmpty - ? 0 : linearMap(value as number, otherDataExtent, otherShadowExtent, true); + ? 0 : linearMap(otherValue as number, otherDataExtent, otherShadowExtent, true); // Attempt to draw data shadow precisely when there are empty value. if (isEmpty && !lastIsEmpty && index) { @@ -421,7 +428,6 @@ class SliderZoomView extends DataZoomView { areaPoints.push([thisCoord, otherCoord]); linePoints.push([thisCoord, otherCoord]); - thisCoord += step; lastIsEmpty = isEmpty; }); @@ -439,14 +445,14 @@ class SliderZoomView extends DataZoomView { const model = dataZoomModel.getModel(isSelectedArea ? 'selectedDataBackground' : 'dataBackground'); const group = new graphic.Group(); const polygon = new graphic.Polygon({ - shape: {points: polygonPts}, + shape: { points: polygonPts }, segmentIgnoreThreshold: 1, style: model.getModel('areaStyle').getAreaStyle(), silent: true, z2: -20 }); const polyline = new graphic.Polyline({ - shape: {points: polylinePts}, + shape: { points: polylinePts }, segmentIgnoreThreshold: 1, style: model.getModel('lineStyle').getLineStyle(), silent: true, From 88c77e789bd0b98532a5f6ef252259877ae60d10 Mon Sep 17 00:00:00 2001 From: Andrea Rota Date: Wed, 4 May 2022 17:06:37 +0200 Subject: [PATCH 2/3] fix(dataZoom): render data not equally distributed. close #16924 --- src/component/dataZoom/SliderZoomView.ts | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/component/dataZoom/SliderZoomView.ts b/src/component/dataZoom/SliderZoomView.ts index 84bd0d2c68..f3a5eaeaff 100644 --- a/src/component/dataZoom/SliderZoomView.ts +++ b/src/component/dataZoom/SliderZoomView.ts @@ -396,14 +396,17 @@ class SliderZoomView extends DataZoomView { let lastIsEmpty: boolean; data.each([info.thisDim, otherDim], function (thisValue: ParsedValue, otherValue: ParsedValue, index) { - if (stride > 0 && (index % stride) && info.thisAxis.type != 'time') { + if (stride > 0 && (index % stride) && info.thisAxis.type !== 'time') { thisCoord += step; return; - } else if (stride > 0 && (index % stride)) { + } + else if (stride > 0 && (index % stride)) { return; } - thisCoord = info.thisAxis.type == 'time' ? (+thisValue - thisDataExtent[0]) * normalizationConstant : thisCoord + step; + thisCoord = info.thisAxis.type === 'time' + ? (+thisValue - thisDataExtent[0]) * normalizationConstant + : thisCoord + step; // FIXME // Should consider axis.min/axis.max when drawing dataShadow. From b6a041e50a8b62fe7ef49f48a4dc4f8257ceb603 Mon Sep 17 00:00:00 2001 From: Andrea Rota Date: Thu, 5 May 2022 15:20:38 +0200 Subject: [PATCH 3/3] fix(dataZoom): render data not equally distributed. close #16924 --- src/component/dataZoom/SliderZoomView.ts | 76 ++++++++++++------------ 1 file changed, 38 insertions(+), 38 deletions(-) diff --git a/src/component/dataZoom/SliderZoomView.ts b/src/component/dataZoom/SliderZoomView.ts index f3a5eaeaff..9c192b5b66 100644 --- a/src/component/dataZoom/SliderZoomView.ts +++ b/src/component/dataZoom/SliderZoomView.ts @@ -17,12 +17,12 @@ * under the License. */ -import {bind, each, isFunction, isString, indexOf} from 'zrender/src/core/util'; +import { bind, each, isFunction, isString, indexOf } from 'zrender/src/core/util'; import * as eventTool from 'zrender/src/core/event'; import * as graphic from '../../util/graphic'; import * as throttle from '../../util/throttle'; import DataZoomView from './DataZoomView'; -import {linearMap, asc, parsePercent} from '../../util/number'; +import { linearMap, asc, parsePercent } from '../../util/number'; import * as layout from '../../util/layout'; import sliderMove from '../helper/sliderMove'; import GlobalModel from '../../model/Global'; @@ -41,7 +41,7 @@ import { createSymbol, symbolBuildProxies } from '../../util/symbol'; import { deprecateLog } from '../../util/log'; import { PointLike } from 'zrender/src/core/Point'; import Displayable from 'zrender/src/graphic/Displayable'; -import {createTextStyle} from '../../label/labelStyle'; +import { createTextStyle } from '../../label/labelStyle'; import SeriesData from '../../data/SeriesData'; const Rect = graphic.Rect; @@ -227,7 +227,7 @@ class SliderZoomView extends DataZoomView { // If some of x/y/width/height are not specified, // auto-adapt according to target grid. const coordRect = this._findCoordRect(); - const ecSize = {width: api.getWidth(), height: api.getHeight()}; + const ecSize = { width: api.getWidth(), height: api.getHeight() }; // Default align by coordinate system rect. const positionInfo = this._orient === HORIZONTAL ? { @@ -261,7 +261,7 @@ class SliderZoomView extends DataZoomView { ecSize ); - this._location = {x: layoutRect.x, y: layoutRect.y}; + this._location = { x: layoutRect.x, y: layoutRect.y }; this._size = [layoutRect.width, layoutRect.height]; this._orient === VERTICAL && this._size.reverse(); } @@ -281,13 +281,13 @@ class SliderZoomView extends DataZoomView { // Transform barGroup. sliderGroup.attr( (orient === HORIZONTAL && !inverse) - ? {scaleY: otherAxisInverse ? 1 : -1, scaleX: 1 } - : (orient === HORIZONTAL && inverse) - ? {scaleY: otherAxisInverse ? 1 : -1, scaleX: -1 } - : (orient === VERTICAL && !inverse) - ? {scaleY: otherAxisInverse ? -1 : 1, scaleX: 1, rotation: Math.PI / 2} - // Dont use Math.PI, considering shadow direction. - : {scaleY: otherAxisInverse ? -1 : 1, scaleX: -1, rotation: Math.PI / 2} + ? { scaleY: otherAxisInverse ? 1 : -1, scaleX: 1 } + : (orient === HORIZONTAL && inverse) + ? { scaleY: otherAxisInverse ? 1 : -1, scaleX: -1 } + : (orient === VERTICAL && !inverse) + ? { scaleY: otherAxisInverse ? -1 : 1, scaleX: 1, rotation: Math.PI / 2 } + // Dont use Math.PI, considering shadow direction. + : { scaleY: otherAxisInverse ? -1 : 1, scaleX: -1, rotation: Math.PI / 2 } ); // Position barGroup @@ -389,6 +389,7 @@ class SliderZoomView extends DataZoomView { const linePoints: number[][] = []; const step = thisShadowExtent[1] / (data.count() - 1); const normalizationConstant = size[0] / (thisDataExtent[1] - thisDataExtent[0]); + const isTimeAxis = info.thisAxis.type === 'time'; let thisCoord = -step; // Optimize for large data shadow @@ -396,17 +397,16 @@ class SliderZoomView extends DataZoomView { let lastIsEmpty: boolean; data.each([info.thisDim, otherDim], function (thisValue: ParsedValue, otherValue: ParsedValue, index) { - if (stride > 0 && (index % stride) && info.thisAxis.type !== 'time') { - thisCoord += step; - return; - } - else if (stride > 0 && (index % stride)) { + if (stride > 0 && (index % stride)) { + if (!isTimeAxis) { + thisCoord += step; + } return; } - thisCoord = info.thisAxis.type === 'time' - ? (+thisValue - thisDataExtent[0]) * normalizationConstant - : thisCoord + step; + thisCoord = isTimeAxis + ? (+thisValue - thisDataExtent[0]) * normalizationConstant + : thisCoord + step; // FIXME // Should consider axis.min/axis.max when drawing dataShadow. @@ -497,8 +497,8 @@ class SliderZoomView extends DataZoomView { } if (showDataShadow !== true && indexOf( - SHOW_DATA_SHADOW_SERIES_TYPE, seriesModel.get('type') - ) < 0 + SHOW_DATA_SHADOW_SERIES_TYPE, seriesModel.get('type') + ) < 0 ) { return; } @@ -630,17 +630,17 @@ class SliderZoomView extends DataZoomView { thisGroup.add( handleLabels[handleIndex] = new graphic.Text({ - silent: true, - invisible: true, - style: createTextStyle(textStyleModel, { - x: 0, y: 0, text: '', - verticalAlign: 'middle', - align: 'center', - fill: textStyleModel.getTextColor(), - font: textStyleModel.getFont() - }), - z2: 10 - })); + silent: true, + invisible: true, + style: createTextStyle(textStyleModel, { + x: 0, y: 0, text: '', + verticalAlign: 'middle', + align: 'center', + fill: textStyleModel.getTextColor(), + font: textStyleModel.getFont() + }), + z2: 10 + })); }, this); @@ -681,8 +681,8 @@ class SliderZoomView extends DataZoomView { }); actualMoveZone.on('mouseover', () => { - api.enterEmphasis(moveHandle); - }) + api.enterEmphasis(moveHandle); + }) .on('mouseout', () => { api.leaveEmphasis(moveHandle); }); @@ -888,8 +888,8 @@ class SliderZoomView extends DataZoomView { return isFunction(labelFormatter) ? labelFormatter(value as number, valueStr) : isString(labelFormatter) - ? labelFormatter.replace('{value}', valueStr) - : valueStr; + ? labelFormatter.replace('{value}', valueStr) + : valueStr; } /** @@ -1091,7 +1091,7 @@ class SliderZoomView extends DataZoomView { function getOtherDim(thisDim: 'x' | 'y' | 'radius' | 'angle' | 'single' | 'z') { // FIXME // 这个逻辑和getOtherAxis里一致，但是写在这里是否不好 - const map = {x: 'y', y: 'x', radius: 'angle', angle: 'radius'}; + const map = { x: 'y', y: 'x', radius: 'angle', angle: 'radius' }; return map[thisDim as 'x' | 'y' | 'radius' | 'angle']; }