Merge pull request #2785 from VisActor/feat/data-zoom-show-background

Feat/data zoom show background
VisActor · Jun 6, 2024 · 9083943 · 9083943
2 parents aded348 + 8de2fb5
commit 9083943
Show file tree

Hide file tree

Showing 6 changed files with 58 additions and 22 deletions.
diff --git a/common/changes/@visactor/vchart/feat-data-zoom-show-background_2024-06-05-09-53.json b/common/changes/@visactor/vchart/feat-data-zoom-show-background_2024-06-05-09-53.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "feat: add option `showBackgroundChart` of DataZoom\n\n",
+      "type": "none",
+      "packageName": "@visactor/vchart"
+    }
+  ],
+  "packageName": "@visactor/vchart",
+  "email": "[email protected]"
+}
diff --git a/docs/assets/option/en/component/data-zoom.md b/docs/assets/option/en/component/data-zoom.md
@@ -184,6 +184,11 @@ The style of the selected part background.
   prefix = '####'
 ) }}
 
+### showBackgroundChart(boolean)
+
+support since **1.11.3**
+Whether to display the background chart
+
 ### backgroundChart(Object)
 
 The preview chart of the data zoom axis.

diff --git a/docs/assets/option/zh/component/data-zoom.md b/docs/assets/option/zh/component/data-zoom.md
@@ -164,6 +164,11 @@
   prefix = '####'
 ) }}
 
+### showBackgroundChart(boolean)
+
+自**1.11.3**版本开始支持
+是否显示背景图
+
 ### backgroundChart(Object)
 
 缩略轴的预览图表。
@@ -229,7 +234,8 @@
 该配置仅在 `auto` 设为 true 时生效。
 
 ### tolerance(number)
-背景图表节点压缩率, 如果不配置则默认将节点限制在10000个。自 1.10.0 版本开始支持。
+
+背景图表节点压缩率, 如果不配置则默认将节点限制在 10000 个。自 1.10.0 版本开始支持。
 
 {{ use: component-data-filter-base(
   prefix = '##'

diff --git a/packages/vchart/src/component/data-zoom/data-filter-base-component.ts b/packages/vchart/src/component/data-zoom/data-filter-base-component.ts
@@ -161,7 +161,6 @@ export abstract class DataFilterBaseComponent<T extends IDataFilterComponentSpec
     });
   }
 
-  protected abstract _getComponentAttrs(): any;
   protected abstract _createOrUpdateComponent(): void;
   protected abstract _computeWidth(): number;
   protected abstract _computeHeight(): number;

diff --git a/packages/vchart/src/component/data-zoom/data-zoom/data-zoom.ts b/packages/vchart/src/component/data-zoom/data-zoom/data-zoom.ts
@@ -27,7 +27,6 @@ import type { ILinearScale, IBaseScale } from '@visactor/vscale';
 // eslint-disable-next-line no-duplicate-imports
 import { LinearScale, isContinuous, isDiscrete } from '@visactor/vscale';
 import { ChartEvent, LayoutLevel, LayoutZIndex } from '../../../constant';
-import { IFilterMode } from '../interface';
 import type { IDataZoomSpec } from './interface';
 import { Factory } from '../../../core/factory';
 import type { IZoomable } from '../../../interaction/zoom';
@@ -331,15 +330,16 @@ export class DataZoom<T extends IDataZoomSpec = IDataZoomSpec> extends DataFilte
       previewPointsX: isNeedPreview && this._dataToPositionX,
       previewPointsY: isNeedPreview && this._dataToPositionY,
       tolerance: this._spec.tolerance,
-      ...(this._getComponentAttrs() as any)
+      ...(this._getComponentAttrs(isNeedPreview) as any)
     } as DataZoomAttributes;
   }
 
   protected _createOrUpdateComponent() {
     if (this._visible) {
       const xScale = this._isHorizontal ? this._stateScale : this._valueScale;
       const yScale = this._isHorizontal ? this._valueScale : this._stateScale;
-      const isNeedPreview = this._isScaleValid(xScale) && this._isScaleValid(yScale);
+      const isNeedPreview =
+        this._isScaleValid(xScale) && this._isScaleValid(yScale) && this._spec.showBackgroundChart !== false;
       const attrs = this._getAttrs(isNeedPreview);
       if (this._component) {
         this._component.setAttributes(attrs);
@@ -410,7 +410,7 @@ export class DataZoom<T extends IDataZoomSpec = IDataZoomSpec> extends DataFilte
     }
   }
 
-  protected _getComponentAttrs() {
+  protected _getComponentAttrs(isNeedPreview: boolean) {
     const {
       middleHandler = {},
       startText = {},
@@ -446,22 +446,32 @@ export class DataZoom<T extends IDataZoomSpec = IDataZoomSpec> extends DataFilte
         this._spec.selectedBackground.style
       ) as unknown as IRectGraphicAttribute,
       dragMaskStyle: transformToGraphic(this._spec.dragMask?.style) as unknown as IRectGraphicAttribute,
-      backgroundChartStyle: {
-        line: mergeSpec(transformToGraphic(backgroundChart.line?.style), { fill: false }),
-        area: {
-          curveType: 'basis',
-          visible: true,
-          ...transformToGraphic(backgroundChart.area?.style)
-        }
-      },
-      selectedBackgroundChartStyle: {
-        line: mergeSpec(transformToGraphic(selectedBackgroundChart.line?.style), { fill: false }),
-        area: {
-          curveType: 'basis',
-          visible: true,
-          ...transformToGraphic(selectedBackgroundChart.area?.style)
-        }
-      },
+      backgroundChartStyle: isNeedPreview
+        ? {
+            line: mergeSpec(transformToGraphic(backgroundChart.line?.style), { fill: false }),
+            area: {
+              curveType: 'basis',
+              visible: true,
+              ...transformToGraphic(backgroundChart.area?.style)
+            }
+          }
+        : {
+            line: { visible: false },
+            area: { visible: false }
+          },
+      selectedBackgroundChartStyle: isNeedPreview
+        ? {
+            line: mergeSpec(transformToGraphic(selectedBackgroundChart.line?.style), { fill: false }),
+            area: {
+              curveType: 'basis',
+              visible: true,
+              ...transformToGraphic(selectedBackgroundChart.area?.style)
+            }
+          }
+        : {
+            line: { visible: false },
+            area: { visible: false }
+          },
       disableTriggerEvent: this._option.disableTriggerEvent
     };
   }

diff --git a/packages/vchart/src/component/data-zoom/data-zoom/interface.ts b/packages/vchart/src/component/data-zoom/data-zoom/interface.ts
@@ -53,6 +53,11 @@ export interface IDataZoomStyle {
 
 /** spec */
 export interface IDataZoomSpec extends IDataZoomStyle, IDataFilterComponentSpec {
+  /**
+   * @since 1.11.3
+   * 是否展示背景图
+   */
+  showBackgroundChart?: boolean;
   /**
    * 数据过滤模式
    * @default 'filter' （dataZoom默认数据过滤模式）