# ksh-plugins

## 简介

一些常用的可视化组件

## 组件列表

| 组件 | 说明 |
|-----|------|
| ksh-roll-num | 数字滚动组件 |
| ksh-self-inc | 数字自增滚动组件 |
| ksh-rank-bar | 带排序功能的横向柱图 |

## 组件说明

### ksh-roll-num
```html
数字滚动组件

按需加载：
    <script>
      import KshRollNum from 'ksh-plugins/lib/KshRollNum';
      export default {
        components: { KshRollNum },
      }
    </script>
参数：number   数字[Number]
     fixed    保留的小数位，默认是number的小数位[Number]
     duration 动画持续时间（ms），默认2000[Number, String]
eg: <ksh-roll-num class="roll-num" :number="5678"/>
```

### ksh-self-inc
```html
数字自增滚动组件

按需加载：
    <script>
      import KshSelfInc from 'ksh-plugins/lib/KshSelfInc';
      export default {
        components: { KshSelfInc },
      }
    </script>
参数：number     原始数字[Number]
     firstRate  首先展示的数值是原始数据的百分比，必须小于1[Number]
     splint     自增次数，默认10次[Number]
     time       自增间隔(ms)，不能小于2000ms，默认5000ms[Number]
     fixedBit   自增过程中强制数字精确到的小数位数[Number]
eg: <ksh-self-inc class="roll-num" :number="5678"/>
```

### ksh-rank-bar
```html
带排序功能的横向柱图

按需加载：
    <script>
      import KshRankBar from 'ksh-plugins/lib/KshRankBar';
      export default {
        components: { KshRankBar },
      }
    </script>
参数：data    柱图数据源value:值，name:名称，可选字段unit:单位[Array]
     minRate 柱图最小长度（单位%），默认：'2'[Number, String]
     padding 图表容器的padding值，与css的padding值写法一致，默认：'10px 15px'[String]
eg: <ksh-rank-bar style="width: 500px;background-color: #1F314B;" :data="[{ value, name, [unit] }]"/>
```