feat(Liquid): Add shapeStyle config (#3411)

* feat(Liquid): Add shapeStyle config

* fix(Liquid): factor should be 1 when waveCount <= 1

Co-authored-by: 诸岳 <[email protected]>

Author: dengfuping

docs/api/plots/liquid.en.md

@@ -62,6 +62,14 @@ function shape(x: number, y: number, width: number, height: number) {
 
 <embed src="@/docs/common/color.en.md"></embed>
 
+#### shapeStyle
+
+<description>**optional** _StyleAttr | Function_</description>
+
+Shape graphic style.
+
+<embed src="@/docs/common/shape-style.en.md"></embed>
+
 #### pattern ✨
 
 <description>**optional** _object | Function_</description>

docs/api/plots/liquid.zh.md

@@ -62,6 +62,14 @@ function shape(x: number, y: number, width: number, height: number) {
 
 <embed src="@/docs/common/color.zh.md"></embed>
 
+#### shapeStyle
+
+<description>**optional** _StyleAttr | Function_</description>
+
+形状的样式。
+
+<embed src="@/docs/common/shape-style.zh.md"></embed>
+
 #### pattern ✨
 
 <description>**optional** _object | Function_</description>

examples/progress-plots/liquid/demo/custom.ts

@@ -15,6 +15,9 @@ const liquidPlot = new Liquid('container', {
       ['Z'],
     ];
   },
+  shapeStyle: {
+    fill: 'pink',
+  },
   outline: {
     border: 4,
     distance: 8,

examples/progress-plots/liquid/demo/meta.json

@@ -50,7 +50,7 @@
         "zh": "形状自定义的水波图",
         "en": "Liquid plot - custom shape"
       },
-      "screenshot": "https://gw.alipayobjects.com/mdn/rms_d314dd/afts/img/A*9MbOSZwdKmYAAAAAAAAAAAAAARQnAQ"
+      "screenshot": "https://mdn.alipayobjects.com/huamei_twhmfu/afts/img/A*NvzFTJjCr3MAAAAAAAAAAAAADu2HAQ/original"
     },
     {
       "filename": "style.ts",

src/plots/liquid/adaptor.ts

@@ -13,7 +13,7 @@ import { getLiquidData } from './utils';
  */
 function geometry(params: Params<LiquidOptions>): Params<LiquidOptions> {
   const { chart, options } = params;
-  const { percent, liquidStyle, radius, outline, wave, shape, animation } = options;
+  const { percent, liquidStyle, radius, outline, wave, shape, shapeStyle, animation } = options;
 
   chart.scale({
     percent: {
@@ -48,6 +48,7 @@ function geometry(params: Params<LiquidOptions>): Params<LiquidOptions> {
     outline,
     wave,
     shape,
+    shapeStyle,
     background,
     animation,
   };

src/plots/liquid/shapes/liquid.ts

@@ -223,7 +223,7 @@ export function addWaterWave(
 
   // 循环 waveCount 个数
   for (let idx = 0; idx < waveCount; idx++) {
-    const factor = waveCount <= 1 ? 0 : idx / (waveCount - 1);
+    const factor = waveCount <= 1 ? 1 : idx / (waveCount - 1);
 
     // 画波
     const wave = group.addShape('path', {
@@ -389,7 +389,7 @@ registerShape('interval', 'liquid-fill-gauge', {
     const cy = 0.5;
 
     const { customInfo } = cfg;
-    const { radius: radio, shape, background, animation } = customInfo as CustomInfo;
+    const { radius: radio, shape, shapeStyle, background, animation } = customInfo as CustomInfo;
     const outline: LiquidOptions['outline'] = customInfo.outline;
     const wave: LiquidOptions['wave'] = customInfo.wave;
     const { border, distance } = outline;
@@ -417,7 +417,18 @@ registerShape('interval', 'liquid-fill-gauge', {
     const buildPath = typeof shape === 'function' ? shape : builtInShapeByName[shape] || builtInShapeByName['circle'];
     const shapePath = buildPath(center.x, center.y, innerRadius * 2, innerRadius * 2);
 
-    // 1. 绘制一个波
+    // 1. 当 shapeStyle 不为空时，绘制形状样式作为背景
+    if (shapeStyle) {
+      container.addShape('path', {
+        name: 'shape',
+        attrs: {
+          path: shapePath,
+          ...shapeStyle,
+        },
+      });
+    }
+    
+    // 2. 绘制一个波
     const waves = container.addGroup({
       name: 'waves',
     });
@@ -444,7 +455,7 @@ registerShape('interval', 'liquid-fill-gauge', {
       animation
     );
 
-    // 2. 绘制一个 distance 宽的 border
+    // 5. 绘制一个 distance 宽的 border
     container.addShape('path', {
       name: 'distance',
       attrs: {
@@ -455,7 +466,7 @@ registerShape('interval', 'liquid-fill-gauge', {
       },
     });
 
-    // 3. 绘制一个 border 宽的 border
+    // 6. 绘制一个 border 宽的 border
     container.addShape('path', {
       name: 'wrap',
       attrs: mix(outlineAttrs, {

src/plots/liquid/types.ts

@@ -61,6 +61,10 @@ export interface LiquidOptions extends Omit<Options, 'data'> {
    * @title 水波图的样式
    */
   readonly liquidStyle?: StyleAttr;
+  /**
+   * @title 形状的样式
+   */
+  readonly shapeStyle?: StyleAttr;
   /**
    * @title 指标文本组件
    */
@@ -88,6 +92,7 @@ export type CustomInfo = {
   outline?: LiquidOptions['outline'];
   wave?: LiquidOptions['wave'];
   shape?: LiquidOptions['shape'];
+  shapeStyle?: LiquidOptions['shapeStyle'];
   background?: string;
   animation?: LiquidOptions['animation'];
 };