Q-Ring 动态环图

参考 dataV-动态环图 (opens new window)

<QRing :config="config" :data="data" style="width:300px;height:300px" ></QRing>

基本示例

<template>
  <div style="background: black" class="flex-center-cus">
    <QRing :config="config" style="width:300px;height:300px"  :data="data"></QRing>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        config: {
        },
        data: [
          {
            name: '周口',
            value: 55
          },
          {
            name: '南阳',
            value: 120
          },
          {
            name: '西峡',
            value: 78
          },
          {
            name: '驻马店',
            value: 66
          },
          {
            name: '新乡',
            value: 80
          }
        ]
      }
    }
  }
</script>

Expand Copy Copy

进阶示例

<template>
  <div style="background: black" class="flex-center-cus">
    <QRing :config="config" style="width:300px;height:300px" :data="data"></QRing>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        config: {
          radius: '40%',
          activeRadius: '45%',
          lineWidth: 10,
          activeTimeGap: 5000,
        },
        data: [
          {
            name: '周口',
            value: 55
          },
          {
            name: '南阳',
            value: 120
          },
          {
            name: '西峡',
            value: 78
          },
          {
            name: '驻马店',
            value: 66
          },
          {
            name: '新乡',
            value: 80
          }
        ]
      }
    }
  }
</script>

Expand Copy Copy

Attributes

config 属性

属性名	说明	类型	可选值	默认值
radius	环半径	String / Number	'50%' / 100	'50%'
activeRadius	环半径（动态）	String / Number	'55%' / 110	'55%'
data(对应: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	—	—