sidebarDepth: 2

动态环图

基于Charts封装。

<dv-active-ring-chart :config="config" style="width:300px;height:300px" />

基本示例

<<< @/docs/guide/codeData/activeRingChart/demo1.js

线条粗细

<<< @/docs/guide/codeData/activeRingChart/demo2.js

调节半径

<<< @/docs/guide/codeData/activeRingChart/demo3.js

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

config注释

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

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

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

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

data属性

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

activeRingChart.md 2.9 KB History Raw