使用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-transform: translateY( -50px;
  border-radius: 0 0 50% 50%;
  position: relative;
}

/* 每一个option色块，利用clip-path属性裁剪为底部弧形效果 */
.funnel-container .funnel-item) .funnel-step {
  margin-transform: translateY( -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>