diff --git a/src/component/axis/AxisBuilder.ts b/src/component/axis/AxisBuilder.ts index c262931039..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'; @@ -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) 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(); 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/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[] } 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 {