渐变性间隔进度条

效果图

11. GradientDashProgress 组件 - 图1

GradientDashProgress 使用

引入

  1. import Vue from 'vue'
  2. import {GradientDashProgress} from 'special-ui'
  3. Vue.use(GradientDashProgress)

使用

<template>
<div class="container">
    <gradient-dash-progress :width="600" :raduis="2" :total="total" :num="num"/>
</div>
</template>
<script>
export default {
    data () {
        return {
            num: 20,
            total: 100
        }
    },
}
</script>
<style lang="scss" scoped>
.container {
  height: 100%;
}
</style>

组件参数

属性 说明 默认值
width 画布宽度 0
height 画布高度 0
total 总数 0
num 占比数 0
bacColor 间隔默认背景色 ‘#244971’
formColor 渐变开始颜色 ‘#0B3C65’
toColor 渐变结束颜色 ‘#37C6EA’
raduis 栅格矩形圆角 3
dash 栅格矩形宽、高和间隔 [5, 20, 3]
padding 左右间距 {left: 5, right: 5}