From aaa2a48b92947b0a386e9412f4e708a8841303bb Mon Sep 17 00:00:00 2001 From: jiawulin001 Date: Sat, 21 May 2022 15:11:49 +0800 Subject: [PATCH 1/5] feat: barSeries.startValue added --- src/chart/bar/BarSeries.ts | 2 + src/layout/barGrid.ts | 16 +++-- src/layout/barPolar.ts | 9 ++- test/bar-startValue.html | 127 +++++++++++++++++++++++++++++++++++++ 4 files changed, 148 insertions(+), 6 deletions(-) create mode 100644 test/bar-startValue.html diff --git a/src/chart/bar/BarSeries.ts b/src/chart/bar/BarSeries.ts index eb838c11ff..e15fed2352 100644 --- a/src/chart/bar/BarSeries.ts +++ b/src/chart/bar/BarSeries.ts @@ -81,6 +81,8 @@ export interface BarSeriesOption showBackground?: boolean + startValue?: number + backgroundStyle?: ItemStyleOption & { borderRadius?: number | number[] } diff --git a/src/layout/barGrid.ts b/src/layout/barGrid.ts index 9ca8442e9a..09535ca6db 100644 --- a/src/layout/barGrid.ts +++ b/src/layout/barGrid.ts @@ -512,14 +512,20 @@ export function createProgressiveLayout(seriesType: string): StageHandler { while ((dataIndex = params.next()) != null) { const value = store.get(stacked ? stackedDimIdx : valueDimIdx, dataIndex); const baseValue = store.get(baseDimIdx, dataIndex) as number; - + const startValue = seriesModel.get('startValue'); let baseCoord = valueAxisStart; - let startValue; + let stackStartValue; + //If user specifies the starting value of bars, use it to adjust coordsys and update ticks + if (startValue) { + baseCoord = valueAxis.toGlobalCoord(valueAxis.dataToCoord(startValue)); + valueAxis.scale.unionExtent([startValue, startValue]); + valueAxis.scale.calcNiceTicks(); + } // Because of the barMinHeight, we can not use the value in // stackResultDimension directly. if (stacked) { - startValue = +value - (store.get(valueDimIdx, dataIndex) as number); + stackStartValue = +value - (store.get(valueDimIdx, dataIndex) as number); } let x; @@ -530,7 +536,7 @@ export function createProgressiveLayout(seriesType: string): StageHandler { if (isValueAxisH) { const coord = cartesian.dataToPoint([value, baseValue]); if (stacked) { - const startCoord = cartesian.dataToPoint([startValue, baseValue]); + const startCoord = cartesian.dataToPoint([stackStartValue, baseValue]); baseCoord = startCoord[0]; } x = baseCoord; @@ -545,7 +551,7 @@ export function createProgressiveLayout(seriesType: string): StageHandler { else { const coord = cartesian.dataToPoint([baseValue, value]); if (stacked) { - const startCoord = cartesian.dataToPoint([baseValue, startValue]); + const startCoord = cartesian.dataToPoint([baseValue, stackStartValue]); baseCoord = startCoord[1]; } x = coord[0] + columnOffset; diff --git a/src/layout/barPolar.ts b/src/layout/barPolar.ts index bc63fcba99..c35b3f64d8 100644 --- a/src/layout/barPolar.ts +++ b/src/layout/barPolar.ts @@ -104,7 +104,14 @@ function barLayoutPolar(seriesType: string, ecModel: GlobalModel, api: Extension const clampLayout = baseAxis.dim !== 'radius' || !seriesModel.get('roundCap', true); - const valueAxisStart = valueAxis.dataToCoord(0); + const startValue = seriesModel.get('startValue'); + const valueAxisStart = valueAxis.dataToCoord(startValue || 0); + //If user specifies the starting value of bars, use it to adjust coordsys and update ticks + if (startValue) { + valueAxis.scale.unionExtent([startValue, startValue]); + valueAxis.scale.calcNiceTicks(); + } + for (let idx = 0, len = data.count(); idx < len; idx++) { const value = data.get(valueDim, idx) as number; const baseValue = data.get(baseDim, idx) as number; diff --git a/test/bar-startValue.html b/test/bar-startValue.html new file mode 100644 index 0000000000..a76557d1f2 --- /dev/null +++ b/test/bar-startValue.html @@ -0,0 +1,127 @@ + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + + + + + + + + + From 7eae8148b8dfa08eb011bd2d2de382021429688a Mon Sep 17 00:00:00 2001 From: jiawulin001 Date: Mon, 13 Jun 2022 15:13:28 +0800 Subject: [PATCH 2/5] extra testcases added --- test/bar-startValue.html | 114 ++++++++++++++++++++++++++++++++++++--- 1 file changed, 106 insertions(+), 8 deletions(-) diff --git a/test/bar-startValue.html b/test/bar-startValue.html index a76557d1f2..73bb61fefd 100644 --- a/test/bar-startValue.html +++ b/test/bar-startValue.html @@ -39,6 +39,8 @@
+
+
@@ -53,6 +55,7 @@ ], function (echarts) { var option; var startValue0 = -200; + var ymin = -150; option = { xAxis: { type: 'category', @@ -62,7 +65,8 @@ } }, yAxis: { - type: 'value' + type: 'value', + min: ymin }, series: [{ data: [-120, 200, 150, 80, 70, 110, 130], @@ -73,6 +77,7 @@ var chart = testHelper.create(echarts, 'main0', { title: [ + `startValue has higher priority over min/max of axis,here startValue = ${startValue0}, yAxis.min = ${ymin}`, `The starting value of bars should be ${startValue0}`, ], option: option @@ -82,6 +87,48 @@ }); }); + + From 323eca770f652a8b8769361bce1379834c65c53e Mon Sep 17 00:00:00 2001 From: jiawulin001 Date: Tue, 14 Jun 2022 15:50:28 +0800 Subject: [PATCH 3/5] feat: rewrite changes to make dataZoom work Now the changes are more naturally co-op with original code and can be applied in dataZoom. --- src/coord/axisCommonTypes.ts | 1 + src/coord/scaleRawExtentInfo.ts | 2 +- src/layout/barGrid.ts | 17 ++++++------- src/layout/barPolar.ts | 9 +++---- test/bar-startValue.html | 42 ++++++++++++++++----------------- 5 files changed, 35 insertions(+), 36 deletions(-) diff --git a/src/coord/axisCommonTypes.ts b/src/coord/axisCommonTypes.ts index e3241cb02e..c6ecbab908 100644 --- a/src/coord/axisCommonTypes.ts +++ b/src/coord/axisCommonTypes.ts @@ -78,6 +78,7 @@ export interface AxisBaseOptionCommon extends ComponentOption, * + null/undefined: auto decide max value (consider pretty look and boundaryGap). */ max?: ScaleDataValue | 'dataMax' | ((extent: {min: number, max: number}) => ScaleDataValue); + startValue?: number; } diff --git a/src/coord/scaleRawExtentInfo.ts b/src/coord/scaleRawExtentInfo.ts index d0753cc985..7aab7d5248 100644 --- a/src/coord/scaleRawExtentInfo.ts +++ b/src/coord/scaleRawExtentInfo.ts @@ -98,7 +98,7 @@ export class ScaleRawExtentInfo { const isOrdinal = this._isOrdinal = scale.type === 'ordinal'; this._needCrossZero = scale.type === 'interval' && model.getNeedCrossZero && model.getNeedCrossZero(); - const modelMinRaw = this._modelMinRaw = model.get('min', true); + const modelMinRaw = this._modelMinRaw = model.get('min', true) || model.get('startValue', true); if (isFunction(modelMinRaw)) { // This callback alway provide users the full data extent (before data filtered). this._modelMinNum = parseAxisModelMinMax(scale, modelMinRaw({ diff --git a/src/layout/barGrid.ts b/src/layout/barGrid.ts index 09535ca6db..4c3198d52a 100644 --- a/src/layout/barGrid.ts +++ b/src/layout/barGrid.ts @@ -512,16 +512,9 @@ export function createProgressiveLayout(seriesType: string): StageHandler { while ((dataIndex = params.next()) != null) { const value = store.get(stacked ? stackedDimIdx : valueDimIdx, dataIndex); const baseValue = store.get(baseDimIdx, dataIndex) as number; - const startValue = seriesModel.get('startValue'); let baseCoord = valueAxisStart; let stackStartValue; - //If user specifies the starting value of bars, use it to adjust coordsys and update ticks - if (startValue) { - baseCoord = valueAxis.toGlobalCoord(valueAxis.dataToCoord(startValue)); - valueAxis.scale.unionExtent([startValue, startValue]); - valueAxis.scale.calcNiceTicks(); - } // Because of the barMinHeight, we can not use the value in // stackResultDimension directly. if (stacked) { @@ -609,5 +602,13 @@ function isInLargeMode(seriesModel: BarSeriesModel) { // See cases in `test/bar-start.html` and `#7412`, `#8747`. function getValueAxisStart(baseAxis: Axis2D, valueAxis: Axis2D) { - return valueAxis.toGlobalCoord(valueAxis.dataToCoord(valueAxis.type === 'log' ? 1 : 0)); + let startValue = valueAxis.model.get('startValue'); + if (!startValue) { + startValue = 0; + } + return valueAxis.toGlobalCoord( + valueAxis.dataToCoord( + valueAxis.type === 'log' + ? (startValue > 0 ? startValue : 1) + : startValue)); } diff --git a/src/layout/barPolar.ts b/src/layout/barPolar.ts index c35b3f64d8..5210240c6f 100644 --- a/src/layout/barPolar.ts +++ b/src/layout/barPolar.ts @@ -27,6 +27,7 @@ import RadiusAxis from '../coord/polar/RadiusAxis'; import GlobalModel from '../model/Global'; import ExtensionAPI from '../core/ExtensionAPI'; import { Dictionary } from '../util/types'; +import { PolarAxisModel, AngleAxisModel, RadiusAxisModel } from '../coord/polar/AxisModel'; type PolarAxis = AngleAxis | RadiusAxis; @@ -104,13 +105,9 @@ function barLayoutPolar(seriesType: string, ecModel: GlobalModel, api: Extension const clampLayout = baseAxis.dim !== 'radius' || !seriesModel.get('roundCap', true); - const startValue = seriesModel.get('startValue'); + const valueAxisModel = valueAxis.model as PolarAxisModel; + const startValue = valueAxisModel.get('startValue'); const valueAxisStart = valueAxis.dataToCoord(startValue || 0); - //If user specifies the starting value of bars, use it to adjust coordsys and update ticks - if (startValue) { - valueAxis.scale.unionExtent([startValue, startValue]); - valueAxis.scale.calcNiceTicks(); - } for (let idx = 0, len = data.count(); idx < len; idx++) { const value = data.get(valueDim, idx) as number; diff --git a/test/bar-startValue.html b/test/bar-startValue.html index 73bb61fefd..57cb62b06d 100644 --- a/test/bar-startValue.html +++ b/test/bar-startValue.html @@ -61,24 +61,24 @@ type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], axisLine: { - onZero: false + onZero: false } }, yAxis: { type: 'value', - min: ymin + min: ymin, + startValue: startValue0 }, series: [{ data: [-120, 200, 150, 80, 70, 110, 130], type: 'bar', - startValue: startValue0 }] }; var chart = testHelper.create(echarts, 'main0', { title: [ - `startValue has higher priority over min/max of axis,here startValue = ${startValue0}, yAxis.min = ${ymin}`, - `The starting value of bars should be ${startValue0}`, + `min/max of axis has higher priority over startValue,here startValue = ${startValue0}, yAxis.min = ${ymin}`, + `The starting value of bars should be ${ymin}`, ], option: option // height: 300, @@ -96,30 +96,35 @@ var option; var startValue0 = -200; var ymin = -300; - var ymax = 100; + var ymax = 300; option = { + dataZoom:[{ + type: 'slider', + yAxisIndex:[0], + right:100 + }], xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'], axisLine: { - onZero: false + onZero: false } }, yAxis: { type: 'value', + startValue: startValue0, min: ymin, max: ymax }, series: [{ data: [-120, 200, 150, 80, 70, 110, 130], type: 'bar', - startValue: startValue0 }] }; var chart = testHelper.create(echarts, 'main1', { title: [ - `startValue should work well with min/max of axis,`, + `startValue should work well with dataZoom,`, `here startValue = ${startValue0}, yAxis.min = ${ymin}, yAxis.max = ${ymax}`, ], option: option @@ -136,7 +141,8 @@ // './data/nutrients.json' ], function (echarts) { var option; - var startValue0 = -180; + var startValue0 = -140; + var radiusMin = -120; option = { angleAxis: { type: "category", @@ -144,14 +150,14 @@ }, radiusAxis: { scale: true, - min: -120, + startValue: startValue0, + min: radiusMin, max: -90, }, polar: {}, series: [{ type: 'bar', color: "#F53700", - startValue: startValue0, coordinateSystem: "polar", data: [-95,-110,-105,-115,-110,-120,-90,-98,-100,-110,-92,-107] }] @@ -159,7 +165,7 @@ var chart = testHelper.create(echarts, 'main2', { title: [ - `The starting value of polar bars should be ${startValue0}`, + `The starting value of polar bars should be ${radiusMin}`, ], option: option // height: 300, @@ -177,16 +183,12 @@ var option; var startValue0 = -3; option = { - title: [ - { - text: 'Radial Polar Bar Label Position (middle)' - } - ], polar: { radius: [30, '80%'] }, radiusAxis: { - max: 4 + max: 4, + startValue: startValue0, }, angleAxis: { type: 'category', @@ -198,7 +200,6 @@ type: 'bar', data: [2, 1.2, 2.4, 3.6], coordinateSystem: 'polar', - startValue: startValue0, label: { show: true, position: 'middle', @@ -206,7 +207,6 @@ } }, backgroundColor: '#fff', - animation: false }; var chart = testHelper.create(echarts, 'main3', { From 0d3a28962f5230e39cc0edc21abaed2c8b886446 Mon Sep 17 00:00:00 2001 From: jiawulin001 Date: Tue, 14 Jun 2022 16:46:11 +0800 Subject: [PATCH 4/5] fix: fix the build bug caused by changes --- src/coord/scaleRawExtentInfo.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/coord/scaleRawExtentInfo.ts b/src/coord/scaleRawExtentInfo.ts index 7aab7d5248..141487fbda 100644 --- a/src/coord/scaleRawExtentInfo.ts +++ b/src/coord/scaleRawExtentInfo.ts @@ -98,7 +98,11 @@ export class ScaleRawExtentInfo { const isOrdinal = this._isOrdinal = scale.type === 'ordinal'; this._needCrossZero = scale.type === 'interval' && model.getNeedCrossZero && model.getNeedCrossZero(); - const modelMinRaw = this._modelMinRaw = model.get('min', true) || model.get('startValue', true); + let axisMinValue = model.get('min', true); + if (axisMinValue === undefined) { + axisMinValue = model.get('startValue', true); + } + const modelMinRaw = this._modelMinRaw = axisMinValue; if (isFunction(modelMinRaw)) { // This callback alway provide users the full data extent (before data filtered). this._modelMinNum = parseAxisModelMinMax(scale, modelMinRaw({ From f74ede1e6323d8762ccc793aedfaf5f64cbd302a Mon Sep 17 00:00:00 2001 From: jiawulin001 Date: Tue, 14 Jun 2022 16:46:11 +0800 Subject: [PATCH 5/5] fix: fix the build bug caused by changes --- src/coord/scaleRawExtentInfo.ts | 6 +++++- src/layout/barPolar.ts | 2 +- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/coord/scaleRawExtentInfo.ts b/src/coord/scaleRawExtentInfo.ts index 7aab7d5248..6a05413064 100644 --- a/src/coord/scaleRawExtentInfo.ts +++ b/src/coord/scaleRawExtentInfo.ts @@ -98,7 +98,11 @@ export class ScaleRawExtentInfo { const isOrdinal = this._isOrdinal = scale.type === 'ordinal'; this._needCrossZero = scale.type === 'interval' && model.getNeedCrossZero && model.getNeedCrossZero(); - const modelMinRaw = this._modelMinRaw = model.get('min', true) || model.get('startValue', true); + let axisMinValue = model.get('min', true); + if (axisMinValue == null) { + axisMinValue = model.get('startValue', true); + } + const modelMinRaw = this._modelMinRaw = axisMinValue; if (isFunction(modelMinRaw)) { // This callback alway provide users the full data extent (before data filtered). this._modelMinNum = parseAxisModelMinMax(scale, modelMinRaw({ diff --git a/src/layout/barPolar.ts b/src/layout/barPolar.ts index 5210240c6f..8adea9ed99 100644 --- a/src/layout/barPolar.ts +++ b/src/layout/barPolar.ts @@ -27,7 +27,7 @@ import RadiusAxis from '../coord/polar/RadiusAxis'; import GlobalModel from '../model/Global'; import ExtensionAPI from '../core/ExtensionAPI'; import { Dictionary } from '../util/types'; -import { PolarAxisModel, AngleAxisModel, RadiusAxisModel } from '../coord/polar/AxisModel'; +import { PolarAxisModel } from '../coord/polar/AxisModel'; type PolarAxis = AngleAxis | RadiusAxis;