动态环图

基于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	---	---