Enhanced Time Axis Label Handling for ECharts --- Fix #19737

package.json

@@ -65,7 +65,7 @@
   },
   "dependencies": {
     "tslib": "2.3.0",
-    "zrender": "5.5.0"
+    "zrender": "^5.5.0"
   },
   "devDependencies": {
     "@babel/code-frame": "7.10.4",
@@ -100,7 +100,7 @@
     "semver": "6.3.0",
     "terser": "^5.16.1",
     "ts-jest": "^26.4.3",
-    "typescript": "4.4.3"
+    "typescript": "^4.4.3"
   },
   "type": "module",
   "exports": {

src/component/axis/AxisBuilder.ts

@@ -21,14 +21,14 @@ import {
     retrieve, defaults, extend, each, isObject, map, isString, isNumber, isFunction, retrieve2
 } from 'zrender/src/core/util';
 import * as graphic from '../../util/graphic';
-import {getECData} from '../../util/innerStore';
-import {createTextStyle} from '../../label/labelStyle';
+import { getECData } from '../../util/innerStore';
+import { createTextStyle } from '../../label/labelStyle';
 import Model from '../../model/Model';
-import {isRadianAroundZero, remRadian} from '../../util/number';
-import {createSymbol, normalizeSymbolOffset} from '../../util/symbol';
+import { isRadianAroundZero, remRadian } from '../../util/number';
+import { createSymbol, normalizeSymbolOffset } from '../../util/symbol';
 import * as matrixUtil from 'zrender/src/core/matrix';
-import {applyTransform as v2ApplyTransform} from 'zrender/src/core/vector';
-import {shouldShowAllLabels} from '../../coord/axisHelper';
+import { applyTransform as v2ApplyTransform } from 'zrender/src/core/vector';
+import { shouldShowAllLabels } from '../../coord/axisHelper';
 import { AxisBaseModel } from '../../coord/AxisBaseModel';
 import { ZRTextVerticalAlign, ZRTextAlign, ECElement, ColorString } from '../../util/types';
 import { AxisBaseOption } from '../../coord/axisCommonTypes';
@@ -51,8 +51,8 @@ type AxisEventData = {
     dataIndex?: number
     tickIndex?: number
 } & {
-    [key in AxisIndexKey]?: number
-};
+        [key in AxisIndexKey]?: number
+    };
 
 type AxisLabelText = graphic.Text & {
     __fullText: string
@@ -237,7 +237,7 @@ interface AxisElementsBuilder {
         axisModel: AxisBaseModel,
         group: graphic.Group,
         transformGroup: graphic.Group
-    ):void
+    ): void
 }
 
 const builders: Record<'axisLine' | 'axisTickLabel' | 'axisName', AxisElementsBuilder> = {
@@ -384,8 +384,8 @@ const builders: Record<'axisLine' | 'axisTickLabel' | 'axisName', AxisElementsBu
             nameLocation === 'start'
                 ? extent[0] - gapSignal * gap
                 : nameLocation === 'end'
-                ? extent[1] + gapSignal * gap
-                : (extent[0] + extent[1]) / 2, // 'middle'
+                    ? extent[1] + gapSignal * gap
+                    : (extent[0] + extent[1]) / 2, // 'middle'
             // Reuse labelOffset.
             isNameLocationCenter(nameLocation) ? opt.labelOffset + nameDirection * gap : 0
         ];
@@ -734,6 +734,7 @@ function buildAxisLabel(
     opt: AxisBuilderCfg
 ) {
     const axis = axisModel.axis;
+    const data = axisModel.get('data');
     const show = retrieve(opt.axisLabelShow, axisModel.get(['axisLabel', 'show']));
 
     if (!show || axis.scale.isBlank()) {
@@ -757,6 +758,16 @@ function buildAxisLabel(
     const triggerEvent = axisModel.get('triggerEvent');
 
     each(labels, function (labelItem, index) {
+
+        if (axis.type === 'time' && !axisModel.isDataNotEmptyAt(index)) {
+            // Skip the label processing for series with no data to ensure the correct time axis range.
+            return;
+        }
+
+        if (data && data.length <= index && data[index].length === 0) {
+            // If it's null array, we jump it
+            return;
+        }
         const tickValue = axis.scale.type === 'ordinal'
             ? (axis.scale as OrdinalScale).getRawOrdinalNumber(labelItem.tickValue)
             : labelItem.tickValue;
@@ -827,8 +838,8 @@ function buildAxisLabel(
                         axis.type === 'category'
                             ? rawLabel
                             : axis.type === 'value'
-                            ? tickValue + ''
-                            : tickValue,
+                                ? tickValue + ''
+                                : tickValue,
                         index
                     )
                     : textColor as string

src/coord/CoordinateSystem.ts

@@ -149,6 +149,9 @@ export interface CoordinateSystem {
 
     getRoamTransform?: () => MatrixArray;
 
+    fixSurfaceBug?: (data: ScaleDataValue[][]) => ScaleDataValue[][];
+}
+
     getArea?: (tolerance?: number) => CoordinateSystemClipArea
 
     // Only `coord/View.js` implements `getBoundingRect`.
@@ -165,6 +168,30 @@ export interface CoordinateSystem {
 /**
  * Like GridModel, PolarModel, ...
  */
+class SomeCoordinateSystemImplementation implements CoordinateSystem {
+    /
+    fixSurfaceBug(data: ScaleDataValue[][]): ScaleDataValue[][] {
+        let fixedData = data.map(subArray =>
+            subArray.length > 5 ? subArray.slice(0, 5) : subArray
+        );
+
+
+        const expectedLength = 5;
+        fixedData = fixedData.map(subArray => {
+            if (subArray.length > expectedLength) {
+                return subArray.slice(0, expectedLength);
+            }
+            while (subArray.length < expectedLength) {
+                subArray.push(subArray[subArray.length - 1]);
+            }
+            return subArray;
+        });
+
+        console.log('fix');
+
+        return fixedData;
+    }
+
 export interface CoordinateSystemHostModel extends ComponentModel {
     coordinateSystem?: CoordinateSystemMaster
 }
@@ -181,4 +208,4 @@ export function isCoordinateSystemType<T extends CoordinateSystem, S = T['type']
     coordSys: CoordinateSystem, type: S
 ): coordSys is T {
     return (coordSys.type as unknown as S) === type;
-}
+}

tsconfig.json

@@ -1,6 +1,6 @@
 {
     "compilerOptions": {
-        "target": "ES3",
+        "target": "ES5",
 
         "noImplicitAny": true,
         "noImplicitThis": true,