# 胶囊柱图
(React版 (opens new window))<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 | --- | --- |