diff --git a/docs/api/plots/liquid.en.md b/docs/api/plots/liquid.en.md
index 0b8cec459a..8a7080824e 100644
--- a/docs/api/plots/liquid.en.md
+++ b/docs/api/plots/liquid.en.md
@@ -62,6 +62,14 @@ function shape(x: number, y: number, width: number, height: number) {
+#### shapeStyle
+
+**optional** _StyleAttr | Function_
+
+Shape graphic style.
+
+
+
#### pattern ✨
**optional** _object | Function_
diff --git a/docs/api/plots/liquid.zh.md b/docs/api/plots/liquid.zh.md
index 4d66197e43..dde494c125 100644
--- a/docs/api/plots/liquid.zh.md
+++ b/docs/api/plots/liquid.zh.md
@@ -62,6 +62,14 @@ function shape(x: number, y: number, width: number, height: number) {
+#### shapeStyle
+
+**optional** _StyleAttr | Function_
+
+形状的样式。
+
+
+
#### pattern ✨
**optional** _object | Function_
diff --git a/examples/progress-plots/liquid/demo/custom.ts b/examples/progress-plots/liquid/demo/custom.ts
index 7cd70cab30..c9076c7d27 100644
--- a/examples/progress-plots/liquid/demo/custom.ts
+++ b/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,
diff --git a/examples/progress-plots/liquid/demo/meta.json b/examples/progress-plots/liquid/demo/meta.json
index 05182ff240..78c2074b3f 100644
--- a/examples/progress-plots/liquid/demo/meta.json
+++ b/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",
diff --git a/src/plots/liquid/adaptor.ts b/src/plots/liquid/adaptor.ts
index 612ea2ae0b..9220a3e1a7 100644
--- a/src/plots/liquid/adaptor.ts
+++ b/src/plots/liquid/adaptor.ts
@@ -13,7 +13,7 @@ import { getLiquidData } from './utils';
*/
function geometry(params: Params): Params {
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): Params {
outline,
wave,
shape,
+ shapeStyle,
background,
animation,
};
diff --git a/src/plots/liquid/shapes/liquid.ts b/src/plots/liquid/shapes/liquid.ts
index 85eae3edc5..28556e2983 100644
--- a/src/plots/liquid/shapes/liquid.ts
+++ b/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, {
diff --git a/src/plots/liquid/types.ts b/src/plots/liquid/types.ts
index a320b466d5..8ffb4975e0 100644
--- a/src/plots/liquid/types.ts
+++ b/src/plots/liquid/types.ts
@@ -61,6 +61,10 @@ export interface LiquidOptions extends Omit {
* @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'];
};