ksh-plugins
简介
一些常用的可视化组件
组件列表
组件 | 说明 |
---|---|
ksh-roll-num | 数字滚动组件 |
ksh-self-inc | 数字自增滚动组件 |
ksh-rank-bar | 带排序功能的横向柱图 |
组件说明
ksh-roll-num
数字滚动组件
按需加载:
<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
数字自增滚动组件
按需加载:
<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
带排序功能的横向柱图
按需加载:
<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] }]"/>