用vue3实现数据漏斗图
在前端开发中，漏斗图我们一般会借助一些第三方的库来实现，如: echarts。这些库使用起来虽然简单顺手，但是如果要定制样式就会不太方便。今天我就来用vue3手撸一个漏斗图。
代码实现
比如有以下一组数据，我希望至上而下从大到小排序，并生成一个漏斗图：
[
{ label: 'A', value: 100 },
{ label: 'B', value: 200 },
{ label: 'C', value: 50 },
{ label: 'D', value: 800 },
{ label: 'E', value: 500 }
]
废话不多说，直接上代码：
<template>
<div class="funnel-container">
<div class="top-title">这是一个漏斗</div>
<div v-for="(option, index) in sortOptions()" :key="index" class="funnel-item">
<!-- 白色遮罩，底部为弧形，遮在下一个option色块上，以实现色块的顶部凹陷效果 -->
<div
class="white-rad"
:style="{
width: `${index === 0 ? topWidth : topWidth * Math.pow(0.76, index) + 5}px`,
zIndex: topZIndex - (index + 1) * 2 + 1
}"
/>
<!-- 每一个option的色块 -->
<div
class="funnel-step"
:style="{
width: `${topWidth * Math.pow(0.76, index)}px`,
zIndex: topZIndex - (index + 1) * 2,
backgroundColor: colors[index]
}"
>
<!-- 色块中显示的文字 -->
<p>{{ option.label }} {{ option.value }}</p>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
// 最顶部title的zindex
const topZIndex = ref(100)
// 最顶部title和第一个option的宽度
const topWidth = ref(320)
// 颜色值
const colors = ref(['#7c0a3a', '#d42d2a', '#ff8833', '#2790c3', '#005587'])
// 数据
const optionsData = ref([
{ label: 'A', value: 100 },
{ label: 'B', value: 200 },
{ label: 'C', value: 50 },
{ label: 'D', value: 800 },
{ label: 'E', value: 500 }
])
// 从大到小排序
const sortOptions = () => {
optionsData.value.sort((a, b) => b.value - a.value)
return optionsData.value
}
</script>
<style>
.funnel-container {
width: 320px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
margin: 50px;
}
/* 顶部椭圆形title */
.funnel-container .top-title {
margin: 0;
padding: 10px;
background-color: #935d71;
color: #fff;
border-width: 3px 6px 10px 6px;
border-style: solid;
border-color: #520a2a;
border-radius: 50%;
z-index: 100;
position: relative;
height: 55px;
width: 320px;
}
.funnel-container .funnel-item {
width: 100%;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
/* option的白色遮罩 */
.funnel-container .funnel-item .white-rad {
background-color: white;
height: 55px;
margin-top: -50px;
border-radius: 0 0 50% 50%;
position: relative;
}
/* 每一个option色块，利用clip-path属性裁剪为底部弧形效果 */
.funnel-container .funnel-item .funnel-step {
margin-top: -25px;
border-radius: 0 0 50% 50%;
position: relative;
clip-path: polygon(0% 0%, 100% 0%, 85% 100%, 15% 100%);
height: 100px;
}
/* 色块上的文字 */
.funnel-step p {
color: white;
text-align: center;
margin-top: 40px;
font-weight: 500;
}
</style>
效果图如下：
效果图.jpg
实现思路
- 最顶部的椭圆使用
css的属性border-radius: 50%;实现，椭圆的上下左右border宽度有出入，以实现视差效果:border-width: 3px 6px 10px 6px; - 漏斗每一个
option使用css的属性clip-path: polygon(0% 0%, 100% 0%, 85% 100%, 15% 100%);实现底部弧度。 - 漏斗每一个
option顶部用一个底部被切成孤度的白色遮罩遮盖，以实现顶部的凹陷效果。 - 把数据
optionsData以对象的value属性从大到小进行排序，并将label属性值和value属性值显示在色块中
注意事项
- 每个色块的底部宽度为顶部宽度的
70%，而下一个色块顶部需要比上一个色块底部宽一些才能实现较好的视觉效果，本demo中采用的是76%。即：下一个色块的顶部宽度为上一个色块顶部宽度的76%。 - 因为使用的遮罩实现的顶部凹陷效果，所以元素的
z-index属性，自上而下依次递减。 - 白色遮罩需要比下面色块稍宽，以实现色块两边尖尖的效果，可根据实际情况调整
