From f4ac290dcbee052e5e1337d9b68013995fc745a4 Mon Sep 17 00:00:00 2001
From: Savas Vedova <svedova@gitlab.com>
Date: Mon, 23 Aug 2021 13:24:30 +0300
Subject: [PATCH 1/5] Fix: time axis overlapped labels
---
src/component/axis/AxisBuilder.ts | 11 +++++++++++
src/label/labelLayoutHelper.ts | 8 ++++----
2 files changed, 15 insertions(+), 4 deletions(-)
diff --git a/src/component/axis/AxisBuilder.ts b/src/component/axis/AxisBuilder.ts
index c262931039..eb7c2ca973 100644
--- a/src/component/axis/AxisBuilder.ts
+++ b/src/component/axis/AxisBuilder.ts
@@ -33,6 +33,7 @@ import { AxisBaseOption } from '../../coord/axisCommonTypes';
import Element from 'zrender/src/Element';
import { PathStyleProps } from 'zrender/src/graphic/Path';
import OrdinalScale from '../../scale/Ordinal';
+import { prepareLayoutList, hideOverlap } from '../../label/labelLayoutHelper';
const PI = Math.PI;
@@ -347,6 +348,16 @@ const builders: Record<'axisLine' | 'axisTickLabel' | 'axisName', AxisElementsBu
fixMinMaxLabelShow(axisModel, labelEls, ticksEls);
buildAxisMinorTicks(group, transformGroup, axisModel, opt.tickDirection);
+
+ const labelList = prepareLayoutList(labelEls.map(label => ({
+ label,
+ priority: label.style.text?.includes('primary') ? 1 : 0,
+ defaultAttr: {
+ ignore: label.ignore
+ }
+ })));
+
+ hideOverlap(labelList);
},
axisName(opt, axisModel, group, transformGroup) {
diff --git a/src/label/labelLayoutHelper.ts b/src/label/labelLayoutHelper.ts
index d22bb77894..2f42db5c7c 100644
--- a/src/label/labelLayoutHelper.ts
+++ b/src/label/labelLayoutHelper.ts
@@ -24,12 +24,12 @@ import type Element from 'zrender/src/Element';
interface LabelLayoutListPrepareInput {
label: ZRText
- labelLine: Polyline
- computedLayoutOption: LabelLayoutOption
+ labelLine?: Polyline
+ computedLayoutOption?: LabelLayoutOption
priority: number
defaultAttr: {
ignore: boolean
- labelGuideIgnore: boolean
+ labelGuideIgnore?: boolean
}
}
@@ -44,7 +44,7 @@ export interface LabelLayoutInfo {
layoutOption: LabelLayoutOption
defaultAttr: {
ignore: boolean
- labelGuideIgnore: boolean
+ labelGuideIgnore?: boolean
}
transform: number[]
}
From ec9b3fc3ea5e69315e2a1c3e009f9991e10f3c4a Mon Sep 17 00:00:00 2001
From: Savas Vedova <svedova@gitlab.com>
Date: Tue, 24 Aug 2021 16:22:27 +0300
Subject: [PATCH 2/5] Use tick level to determine the priority
---
src/component/axis/AxisBuilder.ts | 20 ++++++++++++--------
src/coord/axisTickLabelBuilder.ts | 2 ++
src/util/types.ts | 1 +
3 files changed, 15 insertions(+), 8 deletions(-)
diff --git a/src/component/axis/AxisBuilder.ts b/src/component/axis/AxisBuilder.ts
index eb7c2ca973..b9b8ed7e2f 100644
--- a/src/component/axis/AxisBuilder.ts
+++ b/src/component/axis/AxisBuilder.ts
@@ -349,15 +349,17 @@ const builders: Record<'axisLine' | 'axisTickLabel' | 'axisName', AxisElementsBu
buildAxisMinorTicks(group, transformGroup, axisModel, opt.tickDirection);
- const labelList = prepareLayoutList(labelEls.map(label => ({
- label,
- priority: label.style.text?.includes('primary') ? 1 : 0,
- defaultAttr: {
- ignore: label.ignore
- }
- })));
+ if (axisModel.type === 'xAxis.time') {
+ const labelList = prepareLayoutList(labelEls.map(label => ({
+ label,
+ priority: label.zlevel,
+ defaultAttr: {
+ ignore: label.ignore
+ }
+ })));
- hideOverlap(labelList);
+ hideOverlap(labelList);
+ }
},
axisName(opt, axisModel, group, transformGroup) {
@@ -820,6 +822,8 @@ function buildAxisLabel(
transformGroup.add(textEl);
textEl.updateTransform();
+ textEl.zlevel = labelItem.level;
+
labelEls.push(textEl);
group.add(textEl);
diff --git a/src/coord/axisTickLabelBuilder.ts b/src/coord/axisTickLabelBuilder.ts
index 332e542e83..fbc2e5c975 100644
--- a/src/coord/axisTickLabelBuilder.ts
+++ b/src/coord/axisTickLabelBuilder.ts
@@ -62,6 +62,7 @@ const inner = makeInner<InnerStore, any>();
export function createAxisLabels(axis: Axis): {
labels: {
+ level?: number,
formattedLabel: string,
rawLabel: string,
tickValue: number
@@ -176,6 +177,7 @@ function makeRealNumberLabels(axis: Axis) {
return {
labels: zrUtil.map(ticks, function (tick, idx) {
return {
+ level: tick.level,
formattedLabel: labelFormatter(tick, idx),
rawLabel: axis.scale.getLabel(tick),
tickValue: tick.value
diff --git a/src/util/types.ts b/src/util/types.ts
index ab1a6b1b2b..1686e56d45 100644
--- a/src/util/types.ts
+++ b/src/util/types.ts
@@ -377,6 +377,7 @@ export type ParsedValueNumeric = number | OrdinalNumber;
export type ScaleDataValue = ParsedValueNumeric | OrdinalRawValue | Date;
export interface ScaleTick {
+ level?: number,
value: number
};
export interface TimeScaleTick extends ScaleTick {
From 7d33cfb062d7035c5c3bce61bcb5a269d0762daf Mon Sep 17 00:00:00 2001
From: Savas Vedova <svedova@gitlab.com>
Date: Tue, 24 Aug 2021 16:24:59 +0300
Subject: [PATCH 3/5] Add comment to describe the fix
---
src/component/axis/AxisBuilder.ts | 2 ++
1 file changed, 2 insertions(+)
diff --git a/src/component/axis/AxisBuilder.ts b/src/component/axis/AxisBuilder.ts
index b9b8ed7e2f..4d2b4977eb 100644
--- a/src/component/axis/AxisBuilder.ts
+++ b/src/component/axis/AxisBuilder.ts
@@ -349,6 +349,8 @@ const builders: Record<'axisLine' | 'axisTickLabel' | 'axisName', AxisElementsBu
buildAxisMinorTicks(group, transformGroup, axisModel, opt.tickDirection);
+ // This bit fixes the label overlap issue for the Time chart.
+ // See https://github.com/apache/echarts/issues/14266 for more.
if (axisModel.type === 'xAxis.time') {
const labelList = prepareLayoutList(labelEls.map(label => ({
label,
From 319ac07d0604b4914809cb27ec142baf0de033e1 Mon Sep 17 00:00:00 2001
From: Savas Vedova <svedova@gitlab.com>
Date: Wed, 25 Aug 2021 20:55:25 +0300
Subject: [PATCH 4/5] Use z2 instead of zlevel for priority
---
src/component/axis/AxisBuilder.ts | 8 +++-----
1 file changed, 3 insertions(+), 5 deletions(-)
diff --git a/src/component/axis/AxisBuilder.ts b/src/component/axis/AxisBuilder.ts
index 4d2b4977eb..31d6a9c8bb 100644
--- a/src/component/axis/AxisBuilder.ts
+++ b/src/component/axis/AxisBuilder.ts
@@ -351,10 +351,10 @@ const builders: Record<'axisLine' | 'axisTickLabel' | 'axisName', AxisElementsBu
// This bit fixes the label overlap issue for the Time chart.
// See https://github.com/apache/echarts/issues/14266 for more.
- if (axisModel.type === 'xAxis.time') {
+ if (axisModel.get('type') === 'time') {
const labelList = prepareLayoutList(labelEls.map(label => ({
label,
- priority: label.zlevel,
+ priority: label.z2,
defaultAttr: {
ignore: label.ignore
}
@@ -781,7 +781,7 @@ function buildAxisLabel(
y: opt.labelOffset + opt.labelDirection * labelMargin,
rotation: labelLayout.rotation,
silent: silent,
- z2: 10,
+ z2: labelItem.level,
style: createTextStyle(itemLabelModel, {
text: formattedLabel,
align: itemLabelModel.getShallow('align', true)
@@ -824,8 +824,6 @@ function buildAxisLabel(
transformGroup.add(textEl);
textEl.updateTransform();
- textEl.zlevel = labelItem.level;
-
labelEls.push(textEl);
group.add(textEl);
From 563fc01a1aec3a9859943e7bc11ecddc3a457fcf Mon Sep 17 00:00:00 2001
From: Savas Vedova <svedova@gitlab.com>
Date: Thu, 26 Aug 2021 12:48:42 +0300
Subject: [PATCH 5/5] Use map and have a fallback z2 value
---
src/component/axis/AxisBuilder.ts | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/src/component/axis/AxisBuilder.ts b/src/component/axis/AxisBuilder.ts
index 31d6a9c8bb..6fad867a6a 100644
--- a/src/component/axis/AxisBuilder.ts
+++ b/src/component/axis/AxisBuilder.ts
@@ -17,7 +17,7 @@
* under the License.
*/
-import {retrieve, defaults, extend, each, isObject} from 'zrender/src/core/util';
+import {retrieve, defaults, extend, each, isObject, map} from 'zrender/src/core/util';
import * as graphic from '../../util/graphic';
import {getECData} from '../../util/innerStore';
import {createTextStyle} from '../../label/labelStyle';
@@ -352,7 +352,7 @@ const builders: Record<'axisLine' | 'axisTickLabel' | 'axisName', AxisElementsBu
// This bit fixes the label overlap issue for the Time chart.
// See https://github.com/apache/echarts/issues/14266 for more.
if (axisModel.get('type') === 'time') {
- const labelList = prepareLayoutList(labelEls.map(label => ({
+ const labelList = prepareLayoutList(map(labelEls, label => ({
label,
priority: label.z2,
defaultAttr: {
@@ -781,7 +781,7 @@ function buildAxisLabel(
y: opt.labelOffset + opt.labelDirection * labelMargin,
rotation: labelLayout.rotation,
silent: silent,
- z2: labelItem.level,
+ z2: 10 + (labelItem.level || 0),
style: createTextStyle(itemLabelModel, {
text: formattedLabel,
align: itemLabelModel.getShallow('align', true)