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}'标记。