Fix: time axis overlapped labels

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';
@@ -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,20 @@ const builders: Record<'axisLine' | 'axisTickLabel' | 'axisName', AxisElementsBu
         fixMinMaxLabelShow(axisModel, labelEls, ticksEls);
 
         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.get('type') === 'time') {
+            const labelList = prepareLayoutList(map(labelEls, label => ({
+                label,
+                priority: label.z2,
+                defaultAttr: {
+                    ignore: label.ignore
+                }
+            })));
+
+            hideOverlap(labelList);
+        }
     },
 
     axisName(opt, axisModel, group, transformGroup) {
@@ -766,7 +781,7 @@ function buildAxisLabel(
             y: opt.labelOffset + opt.labelDirection * labelMargin,
             rotation: labelLayout.rotation,
             silent: silent,
-            z2: 10,
+            z2: 10 + (labelItem.level || 0),
             style: createTextStyle(itemLabelModel, {
                 text: formattedLabel,
                 align: itemLabelModel.getShallow('align', true)

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

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[]
 }

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 {