Fix/gradient background

common/changes/@visactor/vchart/fix-gradient-background_2024-06-27-02-37.json

@@ -0,0 +1,10 @@
+{
+  "changes": [
+    {
+      "packageName": "@visactor/vchart",
+      "comment": "fix: background of chart should support gradient color",
+      "type": "none"
+    }
+  ],
+  "packageName": "@visactor/vchart"
+}

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

@@ -1,5 +1,17 @@
 {{ target: background }}
 
+Supports three formats:
+
+- Color string
+- Gradient color (Supported since version 1.11.6)
+- Image configuration
+
+**Gradient color usage:**
+
+{{ use: graphic-gradient }}
+
+**Image configuration structure is as follows:**
+
 Can be configured as a color string, or a picture configuration.
 
 The picture configuration structure is as follows

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

@@ -1,8 +1,16 @@
 {{ target: background }}
 
-可以配置为颜色字符串，或者是一个图片配置。
+支持三种格式：
 
-图片配置结构如下
+- 颜色字符串
+- 渐变色（自 1.11.6 版本开始支持）
+- 图片配置
+
+**渐变色使用如下：**
+
+{{ use: graphic-gradient }}
+
+**图片配置结构如下：**
 
 ```
 const type BackgroundImage = {

packages/vchart/src/core/vchart.ts

@@ -83,7 +83,8 @@ import {
   LoggerLevel,
   isEqual,
   get,
-  cloneDeep
+  cloneDeep,
+  isObject
 } from '@visactor/vutils';
 import type {
   DataLinkAxis,
@@ -1380,7 +1381,10 @@ export class VChart implements IVChart {
   }
 
   private _getBackground() {
-    const specBackground = typeof this._spec.background === 'string' ? this._spec.background : null;
+    const specBackground =
+      typeof this._spec.background === 'string' || (isObject(this._spec.background) && this._spec.background.gradient)
+        ? this._spec.background
+        : null;
     // spec > spec.theme > initOptions.theme
     return specBackground || (this._currentTheme.background as string) || this._option.background;
   }

packages/vchart/src/theme/interface.ts

@@ -12,7 +12,7 @@ import type {
 } from '../typings';
 import type { MarkTypeEnum } from '../mark/interface';
 import type { IColorKey, IThemeColorScheme } from './color-scheme/interface';
-import type { IGradientColor } from '@visactor/vrender-core';
+import type { IColor } from '@visactor/vrender-core';
 import type { IComponentTheme } from '../component/interface';
 import type { ITokenKey, TokenMap } from './token';
 
@@ -34,7 +34,7 @@ export interface ITheme {
    * 第 2 种配置：图表层级的样式属性
    */
   /** 图表背景色 */
-  background?: string | IGradientColor | IColorKey;
+  background?: IColor | IColorKey;
   /** 图表内边距 */
   padding?: ILayoutPaddingSpec;
   /** 图表字体配置 */

packages/vchart/src/typings/spec/common.ts

@@ -53,7 +53,7 @@ import type { IBrushSpec } from '../../component/brush';
 import type { ITotalLabelSpec } from '../../component/label';
 import type { ILegendSpec } from '../../component/legend';
 import type { ILayoutOrientPadding, ILayoutPaddingSpec } from '../layout';
-import type { ICustomPath2D, IRichTextCharacter } from '@visactor/vrender-core';
+import type { IColor, ICustomPath2D, IRichTextCharacter } from '@visactor/vrender-core';
 import type { ICommonAxisSpec } from '../../component/axis';
 import type { IMediaQuerySpec } from '..';
 import type { IModelSpec } from '../../model/interface';
@@ -213,6 +213,7 @@ export interface IChartSpec {
   theme?: Omit<ITheme, 'name'> | string;
   /**
    * 图表背景色配置，优先级高于构造函数中的 background 配置
+   * 自1.11.6版本支持渐变色对象的配置
    */
   background?: IBackgroundSpec;
 
@@ -244,7 +245,7 @@ export type IBackgroundStyleSpec = ConvertToMarkStyleSpec<Omit<IFillMarkSpec, 'w
   cornerRadius?: IRectMarkSpec['cornerRadius'];
 };
 
-export type IBackgroundSpec = string | IBackgroundStyleSpec;
+export type IBackgroundSpec = IColor | IBackgroundStyleSpec;
 
 /** data */
 export type IDataType = IDataValues | DataView;

packages/vchart/src/typings/visual.ts

@@ -15,7 +15,8 @@ import type {
   TextAlignType,
   TextBaselineType,
   IRichTextAttribute,
-  IGraphicStyle
+  IGraphicStyle,
+  IColor
 } from '@visactor/vrender-core';
 
 // 基础的visual 对应 scale 的属性
@@ -209,7 +210,7 @@ export interface IFillMarkSpec extends ICommonSpec {
   // TODO：waite VRender support this api
   // backgroundMode: number; // 填充模式（与具体图元有关）
   // can coexist with fill
-  background?: string | HTMLImageElement | HTMLCanvasElement | null;
+  background?: IColor | HTMLImageElement | HTMLCanvasElement | null;
 }
 
 export type IMarkHtmlSpec = Partial<IGraphicStyle['html']>;