Enhance/mosaic

common/changes/@visactor/vchart/enhance-mosaic_2025-05-08-01-58.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vchart",
+      "comment": "feat: mosaic chart supports bandWidthField and percent config, closed #3945",
+      "type": "none"
+    }
+  ],
+  "packageName": "@visactor/vchart"
+}

docs/assets/option/en/common/cartesian-series.md

@@ -13,6 +13,7 @@
   noPreset = ${noPreset},
   preset = ${preset},
   noStack = ${noStack},
+  percent = ${percent},
   defaultPreset = ${defaultPreset}
 ) }}
 

docs/assets/option/en/common/series.md

@@ -90,6 +90,14 @@ Whether to offset the silhouette around the central axis. Useful for drawing som
 
 {{ /if }}
 
+{{ if: !${percent} }}
+
+#${prefix} percent(boolean)
+
+Whether to display the data as a percentage.
+
+{{ /if }}
+
 {{ if: !${noInvalidType} }}
 
 #${prefix} invalidType(string)

docs/assets/option/en/series/mosaic.md

@@ -9,14 +9,24 @@
   noType = ${noType},
   noData = ${noData},
   noMorph = ${noMorph},
-  useInChart = ${useInChart},
   noStack = ${noStack},
+  percent = ${percent},
+  useInChart = ${useInChart},
   seriesType = 'mosaic',
   seriesMarks = ['bar'],
   preset = 'grow' + '|' + 'fadeIn' + '|' + 'scaleIn',
   defaultPreset = 'grow'
 ) }}
 
+#${prefix} bandWidthField(string)
+
+Supported since version 1.13.10.
+
+Column size mapping field, if not declared, will be mapped according to the proportion of total value under the same dimension by default
+
+1. Automatic mapping height when bar chart direction
+2. Automatic mapping width when vertical diagram direction
+
 #${prefix} bar(Object)
 
 Bar element style configuration.

docs/assets/option/zh/common/cartesian-series.md

@@ -13,6 +13,7 @@
   noPreset = ${noPreset},
   preset = ${preset},
   noStack = ${noStack},
+  percent = ${percent},
   defaultPreset = ${defaultPreset}
 ) }}
 

docs/assets/option/zh/common/series.md

@@ -90,6 +90,14 @@
 
 {{ /if }}
 
+{{ if: !${percent} }}
+
+#${prefix} percent(boolean)
+
+否对数据进行百分比处理。
+
+{{ /if }}
+
 {{ if: !${noInvalidType} }}
 
 #${prefix} invalidType(string)

docs/assets/option/zh/series/mosaic.md

@@ -9,14 +9,23 @@
   noType = ${noType},
   noData = ${noData},
   noMorph = ${noMorph},
+    noStack = ${noStack},
+  percent = ${percent},
   useInChart = ${useInChart},
-  noStack = ${noStack},
   seriesType = 'mosaic',
   seriesMarks = ['bar'],
   preset = 'grow' + '|' + 'fadeIn' + '|' + 'scaleIn',
   defaultPreset = 'grow'
 ) }}
 
+#${prefix} bandWidthField(string)
+
+自 `1.13.10` 版本开始支持。
+
+- 柱子尺寸映射字段，如果不声明默认会根据相同维度下的总值占比进行映射
+  - 条形图方向时自动映射高度
+  - 竖形图方向时自动映射宽度
+
 #${prefix} bar(Object)
 
 bar 图元样式配置。

packages/vchart/src/chart/mosaic/mosaic-transformer.ts

@@ -15,7 +15,8 @@ export class MosaicChartSpecTransformer<
       'barBackground',
       'barMinHeight',
       'stackCornerRadius',
-      'bar'
+      'bar',
+      'bandWidthField'
     ]);
   }
 

packages/vchart/src/chart/mosaic/mosaic.ts

@@ -39,7 +39,6 @@ export class MosaicChart<T extends IMosaicChartSpec = IMosaicChartSpec> extends
       const stackData = s.getStackData();
       const stackValue = s.getStackValue();
       const stackValueField = s.getStackValueField(); // yField
-
       if (stackData && stackValueField) {
         stackMosaicTotal(stackValueGroup[stackValue] as IStackCacheNode, stackValueField);
         stackMosaic(s, stackValueGroup[stackValue] as IStackCacheNode);

packages/vchart/src/series/mosaic/interface.ts

@@ -40,6 +40,13 @@ export interface IMosaicSeriesSpec extends Omit<IBarSeriesSpec, 'type' | 'label'
       >;
     }
   >;
+  /**
+   * 柱子尺寸映射字段，如果不声明默认会根据相同维度下的总值占比进行映射
+   * - 条形图方向时自动映射高度
+   * - 竖形图方向时自动映射宽度
+   * @since 1.13.10
+   */
+  bandWidthField?: string;
 }
 
 export type IMosaicSeriesTheme = IBarSeriesTheme;

packages/vchart/src/series/mosaic/mosaic.ts

@@ -28,13 +28,18 @@ export class MosaicSeries<T extends IMosaicSeriesSpec = IMosaicSeriesSpec> exten
   static readonly transformerConstructor = BarSeriesSpecTransformer as any;
   readonly transformerConstructor = BarSeriesSpecTransformer as any;
 
+  private _bandWidthField?: string;
+  get bandWidthField() {
+    return this._bandWidthField;
+  }
   getStack() {
     return true;
   }
 
   getPercent() {
-    return !!this.getSeriesField();
+    return this._spec.percent;
   }
+
   getGroupFields() {
     return this.direction === 'vertical' ? this._specXField : this._specYField;
   }
@@ -60,6 +65,10 @@ export class MosaicSeries<T extends IMosaicSeriesSpec = IMosaicSeriesSpec> exten
       this.setFieldX(MOSAIC_CAT_END_PERCENT);
       this.setFieldX2(MOSAIC_CAT_START_PERCENT);
     }
+
+    if (this._spec.bandWidthField) {
+      this._bandWidthField = this._spec.bandWidthField;
+    }
   }
 
   parseLabelStyle(labelStyle: any, labelSpec: any) {
@@ -98,7 +107,7 @@ export class MosaicSeries<T extends IMosaicSeriesSpec = IMosaicSeriesSpec> exten
             };
 
       labelStyle.dataFilter = (data: any) => {
-        const filteredData = {};
+        const filteredData: any = {};
 
         data.forEach((d: any) => {
           const datum = d.data;

packages/vchart/src/util/data.ts

@@ -21,6 +21,7 @@ import { isValid, toValidNumber } from './type';
 import { max, sum } from './math';
 import type { ISeries, ISeriesStackDataMeta } from '../series/interface';
 import type { IRegion } from '../region/interface';
+import { MosaicSeries } from '../series';
 
 export function mergeFields(
   targetFields: {
@@ -236,11 +237,20 @@ export function stackMosaic(s: ISeries, stackCache: IStackCacheNode, mosaicData?
       key: `${stackCache.groupField}`,
       values: groupValues.map(group => {
         const groupValues = stackCache.nodes[group];
+        let value;
+        if ((s as MosaicSeries).bandWidthField) {
+          value =
+            groupValues.values.find(v => isValid(v[(s as MosaicSeries).bandWidthField]))?.[
+              (s as MosaicSeries).bandWidthField
+            ] ?? groupValues.total;
+        } else {
+          value = groupValues.total;
+        }
 
         return {
           groupValue: group,
-          value: groupValues.total,
-          end: groupValues.total
+          value,
+          end: value
         };
       })
     };