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']; };