进度池

（Vue版）

<PercentPond config={config} style={{width: '200px', height: '100px'}} />

点击复制

基本示例

点击以展示/隐藏config数据

export default {
  value: 66
}

调节边框

点击以展示/隐藏config数据

export default {
  value: 66,
  borderWidth: 5,
  borderRadius: 10,
  borderGap: 5
}

线条间隙

点击以展示/隐藏config数据

export default {
  value: 66,
  lineDash: [10, 2]
}

局部渐变

点击以展示/隐藏config数据

export default {
  value: 66,
  localGradient: true
}

定制块隙长度

点击以展示/隐藏config数据

const fullWidth = 300
const borderGap = 3
const borderWidth = 3
const usefulWidth = fullWidth - (borderGap + borderWidth) * 2

const pieceLength = [0.25, 0.5, 0.25]
const pieceGap = 3

const lineDash = pieceLength
  .map(l => [usefulWidth * l, pieceGap])
  .reduce((all, current) => [...all, ...current], [])

export default {
  value: 100,
  colors: ['#01c4f9', '#c135ff'],
  lineDash
}

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