Fix/data zoom of lock number domain

common/changes/@visactor/vchart/fix-data-zoom-of-lock-number-domain_2025-05-22-08-47.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "fix: fix data-zoom domain when the label of band size is number-like string, fix #3982\n\n",
+      "type": "none",
+      "packageName": "@visactor/vchart"
+    }
+  ],
+  "packageName": "@visactor/vchart",
+  "email": "[email protected]"
+}

packages/vchart/src/component/data-zoom/data-filter-base-component.ts

@@ -436,6 +436,7 @@ export abstract class DataFilterBaseComponent<T extends IDataFilterComponentSpec
     const dataCollection: any[] = [];
     const stateFields: string[] = [];
     const valueFields: string[] = [];
+    let isCategoryState: boolean;
 
     if (this._relatedAxisComponent) {
       const originalStateFields = {};
@@ -467,8 +468,6 @@ export abstract class DataFilterBaseComponent<T extends IDataFilterComponentSpec
               ? xAxisHelper
               : yAxisHelper;
           const valueAxisHelper = stateAxisHelper === xAxisHelper ? yAxisHelper : xAxisHelper;
-          const isValidateValueAxis = isContinuous(valueAxisHelper.getScale(0).type);
-          const isValidateStateAxis = isContinuous(stateAxisHelper.getScale(0).type);
 
           dataCollection.push(s.getRawData());
           // 这里获取原始的spec中的xField和yField，而非经过stack处理后的fieldX和fieldY，原因如下：
@@ -488,15 +487,16 @@ export abstract class DataFilterBaseComponent<T extends IDataFilterComponentSpec
           originalStateFields[s.id] =
             s.type === 'link' ? ['from_xField'] : stateAxisHelper === xAxisHelper ? xField : yField;
 
-          if (isValidateStateAxis) {
+          if (isContinuous(stateAxisHelper.getScale(0).type)) {
+            isCategoryState = false;
             stateFields.push(originalStateFields[s.id]);
           } else {
             stateFields.push(originalStateFields[s.id][0]);
           }
 
           if (this._valueField) {
             const valueField = s.type === 'link' ? ['from_yField'] : valueAxisHelper === xAxisHelper ? xField : yField;
-            if (isValidateValueAxis) {
+            if (isContinuous(valueAxisHelper.getScale(0).type)) {
               valueFields.push(...valueField);
             }
           }
@@ -536,7 +536,8 @@ export abstract class DataFilterBaseComponent<T extends IDataFilterComponentSpec
           input: {
             dataCollection: dataCollection,
             stateFields,
-            valueFields
+            valueFields,
+            isCategoryState
           },
           output: {
             stateField: this._stateField,

packages/vchart/src/component/data-zoom/util.ts

@@ -93,6 +93,7 @@ export interface IDataFilterComputeDomainOption {
     dataCollection: any[];
     stateFields: string[];
     valueFields: string[];
+    isCategoryState?: boolean;
     method: 'sum'; // todo: 也许可以提供多种数据统计方法 @chensiji
   };
   output: {
@@ -102,10 +103,12 @@ export interface IDataFilterComputeDomainOption {
 }
 
 export const dataFilterComputeDomain = (data: Array<any>, op: IDataFilterComputeDomainOption) => {
-  const { stateFields, valueFields, dataCollection } = op.input;
+  const { stateFields, valueFields, dataCollection, isCategoryState } = op.input;
   const { stateField, valueField } = op.output;
-  const resultObj = {};
+  const resultObj: any = {};
   const resultData: any[] = [];
+  const stateValues: any[] = [];
+  let hasLockDomain = false;
 
   dataCollection.forEach((dv: DataView, i) => {
     if (isNil(stateFields[i])) {
@@ -114,15 +117,20 @@ export const dataFilterComputeDomain = (data: Array<any>, op: IDataFilterCompute
     // 按照用户指定的domain进行排序(这里不通过getRawDataStatistics来取是因为时机不对，此时getRawDataStatistics还没有正确结果)
     const stateFieldInfo = dv.getFields()?.[stateFields[i]];
     if (stateFieldInfo && stateFieldInfo.lockStatisticsByDomain) {
+      hasLockDomain = true;
       stateFieldInfo.domain.forEach((d: any) => {
-        resultObj[d] = 0;
+        if (isNil(resultObj[d])) {
+          stateValues.push(d);
+          resultObj[d] = 0;
+        }
       });
     }
     dv.latestData.forEach((d: any) => {
       // 针对rangeColumn等xField为数组形式的图表，需要将xField的所有value都记录下来
       array(stateFields[i]).forEach(state => {
         if (!isNil(d[state])) {
           if (isNil(resultObj[d[state]])) {
+            stateValues.push(d[state]);
             resultObj[d[state]] = 0;
           }
           if (!isNil(valueFields[i])) {
@@ -134,11 +142,18 @@ export const dataFilterComputeDomain = (data: Array<any>, op: IDataFilterCompute
       });
     });
   });
-  Object.keys(resultObj).forEach((d, i) => {
-    const res = { [stateField]: d };
+
+  const sortedStateValues = hasLockDomain
+    ? stateValues
+    : isCategoryState === false
+    ? stateValues.sort((a, b) => a - b)
+    : Object.keys(resultObj);
+
+  sortedStateValues.forEach(state => {
+    const res = { [stateField]: state };
 
     if (valueField) {
-      res[valueField] = resultObj[d];
+      res[valueField] = resultObj[state];
     }
 
     resultData.push(res);