使用vue3實現(xiàn)數(shù)據(jù)漏斗圖

更新時間：2024年11月15日 10:17:58 作者：一個老碼農(nóng)

漏斗圖一般會借助一些第三方的庫來實現(xiàn),這些庫使用起來雖然簡單順手,但是如果要定制樣式就會不太方便,本文我們就來用vue3手擼一個漏斗圖吧

用vue3實現(xiàn)數(shù)據(jù)漏斗圖

在前端開發(fā)中，漏斗圖我們一般會借助一些第三方的庫來實現(xiàn)，如: echarts。這些庫使用起來雖然簡單順手，但是如果要定制樣式就會不太方便。今天我就來用vue3手擼一個漏斗圖。

代碼實現(xiàn)

比如有以下一組數(shù)據(jù)，我希望至上而下從大到小排序，并生成一個漏斗圖：

[
  { 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色塊上，以實現(xiàn)色塊的頂部凹陷效果 -->
      <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'])
// 數(shù)據(jù)
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>

效果圖如下：