DataV

# 进度池

（React版 (opens new window)） 
<dv-percent-pond :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}'标记。

← 飞线图 →