funnel_comp

a lib about funnel base on vue

Usage no npm install needed!

<script type="module">
  import funnelComp from 'https://cdn.skypack.dev/funnel_comp';
</script>

README

vue-funnel

  • 这是一个数据漏斗ui组件

Table of Contents

介绍

  • 本组件不依赖任何第三方 ui组件库 ,纯粹的支持所有的vue项目工程。
  • 对插槽内容做了加工处理,灵活程度较高

安装

yarn add vue-funnel or npm i vue-funnel

⬆ Back to Top

demo1

示例图片

07-2019

示例code

  <template>
    <div class="vue-funnel-test" style="margin:50px auto;">
      <vue-funnel style="margin:50px 100px;" :colors="colors" :isLeft="true">
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <div slot="info0">信息显示1</div>
        <div slot="info1">信息显示2</div>
        <div slot="info2">信息显示3</div>
      </vue-funnel>
    </div>
</template>
<script>
export default {
  name: 'vue-funnel-test',
  components: {
    'vue-funnel': () => import('@/components/vue-funnel/index')
  },
  data() {
    return {
      colors: ['#576DE7', '#8B74F2', '#A37EEF']
    }
  }
}
</script>

⬆ Back to Top

demo2

示例图片

07-2019

示例code

  <template>
    <div class="vue-funnel-test" style="margin:50px auto;">
      <vue-funnel style="margin:50px 100px;" :colors="colors" :isLeft="false">
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <div slot="info0">信息显示1</div>
        <div slot="info1">信息显示2</div>
        <div slot="info2">信息显示3</div>
      </vue-funnel>
    </div>
</template>
<script>
export default {
  name: 'vue-funnel-test',
  components: {
    'vue-funnel': () => import('@/components/vue-funnel/index')
  },
  data() {
    return {
      colors: ['#576DE7', '#8B74F2', '#A37EEF']
    }
  }
}
</script>

⬆ Back to Top

参数说明

参数 说明 类型 默认值
colors 梯形背景颜色配置 Array 内置颜色array
isLeft 漏斗图的位置 Boolean true
maxWidth 底部梯形的宽度 Number 300
minWidth 顶部梯形的宽度 Number 150
rowHeight 梯形高度 Number 50
rowSpace 梯形间距 Number 8

⬆ Back to Top

slots说明

name 说明
- 默认插槽,用于显示梯形里面的自定义内容
info${rowIndex->行索引值} 用于自定义显示同一行的内容
arrow-${left or right}${rowIndex->行索引值} 用于显示两侧三角形的自定义内容

⬆ Back to Top