# 动态环图
基于Charts封装。 (React版 (opens new window))
<dv-active-ring-chart :config="config" style="width:300px;height:300px" />
# 基本示例
点击以展示/隐藏config数据
export default {
data: [
{
name: '周口',
value: 55
},
{
name: '南阳',
value: 120
},
{
name: '西峡',
value: 78
},
{
name: '驻马店',
value: 66
},
{
name: '新乡',
value: 80
}
]
}
# 线条粗细
点击以展示/隐藏config数据
export default {
data: [
{
name: '周口',
value: 55
},
{
name: '南阳',
value: 120
},
{
name: '西峡',
value: 78
},
{
name: '驻马店',
value: 66
},
{
name: '新乡',
value: 80
}
],
lineWidth: 10
}
# 调节半径
点击以展示/隐藏config数据
export default {
radius: '40%',
activeRadius: '45%',
data: [
{
name: '周口',
value: 55
},
{
name: '南阳',
value: 120
},
{
name: '西峡',
value: 78
},
{
name: '驻马店',
value: 66
},
{
name: '新乡',
value: 80
}
],
digitalFlopStyle: {
fontSize: 20
}
}
# 显示原始值
点击以展示/隐藏config数据
export default {
radius: '40%',
activeRadius: '45%',
data: [
{
name: '周口',
value: 55
},
{
name: '南阳',
value: 120
},
{
name: '西峡',
value: 78
},
{
name: '驻马店',
value: 66
},
{
name: '新乡',
value: 80
}
],
digitalFlopStyle: {
fontSize: 20
},
showOriginValue: true
}
# config属性
属性 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
radius | 环半径 | String|Number | '50%'|100 | '50%' |
activeRadius | 环半径(动态) | String|Number | '55%'|110 | '55%' |
data | 环数据 | Array<Object> | data属性 | [] |
lineWidth | 环线条宽度 | Number | --- | 20 |
activeTimeGap | 切换间隔(ms) | Number | --- | 3000 |
color | 环颜色 | Array<String> | [1] | [] |
digitalFlopStyle | 数字翻牌器样式 | Object | --- | [2] |
digitalFlopToFixed | 数字翻牌器小数位数 | Number | --- | 0 |
digitalFlopUnit | 数字翻牌器单位 | String | --- | '' |
animationCurve | 动效曲线 | String | Transition (opens new window) | 'easeOutCubic' |
animationFrame | 动效帧数 | Number | [3] | 50 |
showOriginValue | 显示原始值 | Boolean | --- | false |
# config注释
[1] 颜色支持hex|rgb|rgba|颜色关键字
等四种类型。
[2] digitalFlopStyle
用于配置内置的数字翻牌器样式,详情可查阅数字翻牌器,你可以配置该项来设置数字翻牌器的文字颜色和大小。默认值如下:
digitalFlopStyle: {
fontSize: 25,
fill: '#fff'
}
[3] animationFrame
用于配置动画过程的帧数即动画时长。
# data属性
属性 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
name | 环对应名称 | String | --- | --- |
value | 环对应值 | Number | --- | --- |