# 动态环图

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