data_view/docs/guide/percentPond.md

---

sidebarDepth: 2

进度池

<dv-percent-pond :config="config" style="width:200px;height:100px;" />

基本示例

<<< @/docs/guide/codeData/percentPond/demo1.js

调节边框

<<< @/docs/guide/codeData/percentPond/demo2.js

线条间隙

<<< @/docs/guide/codeData/percentPond/demo3.js

局部渐变

<<< @/docs/guide/codeData/percentPond/demo4.js

定制块隙长度

<<< @/docs/guide/codeData/percentPond/demo5.js

::: tip TIP 百分比标签已通过CSSdisplay:none隐藏。 :::

config属性

属性|说明|类型|可选值|默认值 :--:|:--:|:--:|:--:|:--: value|进度池数值|Number|0-100|0 colors|进度池配色|Array<String>|[1]|[2] borderWidth|边框宽度|Number|---|3 borderGap|边框间隙|Number|---|3 lineDash|线条间隙|Array<Number>|---|[5, 1] textColor|文字颜色|String|[1]|#fff borderRadius|边框半径|Number|---|5 localGradient|局部渐变|Boolean|---|false formatter|信息格式化|String|---|'{value}%'^[3]

注释

[1] 颜色支持hex|rgb|rgba|颜色关键字等四种类型。

[2] 默认配色为['#3DE7C9', '#00BAFF'], 自动应用渐变色，若不想使用渐变色，请配置两个相同的颜色。

[3] 自动使用value的值替换字符串中的'{value}'标记。