# 胶囊柱图

React版
<dv-capsule-chart :config="config" style="width:300px;height:200px" />
点击复制

# 基本示例

点击以展示/隐藏config数据
export default {
  data: [
    {
      name: '南阳',
      value: 167
    },
    {
      name: '周口',
      value: 67
    },
    {
      name: '漯河',
      value: 123
    },
    {
      name: '郑州',
      value: 55
    },
    {
      name: '西峡',
      value: 98
    }
  ]
}

# 单位显示

点击以展示/隐藏config数据
export default {
  data: [
    {
      name: '南阳',
      value: 167
    },
    {
      name: '周口',
      value: 67
    },
    {
      name: '漯河',
      value: 123
    },
    {
      name: '郑州',
      value: 55
    },
    {
      name: '西峡',
      value: 98
    },
  ],
  unit: '单位'
}

# 更换颜色

点击以展示/隐藏config数据
export default {
  data: [
    {
      name: '南阳',
      value: 167
    },
    {
      name: '周口',
      value: 123
    },
    {
      name: '漯河',
      value: 98
    },
    {
      name: '郑州',
      value: 75
    },
    {
      name: '西峡',
      value: 66
    },
  ],
  colors: ['#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#96bfff'],
  unit: '单位'
}

# 显示数值

点击以展示/隐藏config数据
export default {
  data: [
    {
      name: '南阳',
      value: 167
    },
    {
      name: '周口',
      value: 123
    },
    {
      name: '漯河',
      value: 98
    },
    {
      name: '郑州',
      value: 75
    },
    {
      name: '西峡',
      value: 66
    },
  ],
  colors: ['#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#96bfff'],
  unit: '单位',
  showValue: true
}

# config属性

属性 说明 类型 可选值 默认值
data 柱数据 Array<Object> data属性 []
unit 单位 String --- ''
colors 环颜色 Array<String> [1] [2]
showValue 显示数值 Boolean --- false

# config注释

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

[2] 默认配色为['#37a2da', '#32c5e9', '#67e0e3', '#9fe6b8', '#ffdb5c', '#ff9f7f', '#fb7293']

# data属性

属性 说明 类型 可选值 默认值
name 柱名称 String --- ---
value 柱对应值 Number --- ---