DataX

动态环图

基于Charts封装。

<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属性

属性 说明 类型 可选值 默认值
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]
animationCurve 动效曲线 String Transition 'easeOutCubic'
animationFrame 动效帧数 Number [3] 50

config注释

[1] 颜色支持hex|rgb|rgba|颜色关键字等四种类型。

[2] digitalFlopStyle用于配置内置的数字翻牌器样式，详情可查阅数字翻牌器，你可以配置该项来设置数字翻牌器的文字颜色和大小。默认值如下：

digitalFlopStyle: {
  fontSize: 25,
  fill: '#fff'
}

[3] animationFrame用于配置动画过程的帧数即动画时长。

data属性

属性 说明 类型 可选值 默认值
name 环对应名称 String --- ---
value 环对应值 Number --- ---

← 胶囊柱图→