动态环图

基于Charts封装。 （Vue版）

<ActiveRingChart 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
animationCurve	动效曲线	String	Transition	'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	---	---