原文地址

用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-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

實現(xiàn)思路

1. 最頂部的橢圓使用css的屬性border-radius: 50%;實現(xiàn)赘艳，橢圓的上下左右border寬度有出入，以實現(xiàn)視差效果: border-width: 3px 6px 10px 6px;
2. 漏斗每一個option使用css的屬性clip-path: polygon(0% 0%, 100% 0%, 85% 100%, 15% 100%);實現(xiàn)底部弧度克握。
3. 漏斗每一個option頂部用一個底部被切成孤度的白色遮罩遮蓋蕾管，以實現(xiàn)頂部的凹陷效果。
4. 把數(shù)據(jù)optionsData以對象的value屬性從大到小進行排序菩暗，并將label屬性值和value屬性值顯示在色塊中

注意事項

1. 每個色塊的底部寬度為頂部寬度的70%掰曾，而下一個色塊頂部需要比上一個色塊底部寬一些才能實現(xiàn)較好的視覺效果，本demo中采用的是76%停团。即：下一個色塊的頂部寬度為上一個色塊頂部寬度的76%旷坦。
2. 因為使用的遮罩實現(xiàn)的頂部凹陷效果掏熬，所以元素的z-index屬性，自上而下依次遞減秒梅。
3. 白色遮罩需要比下面色塊稍寬旗芬，以實現(xiàn)色塊兩邊尖尖的效果，可根據(jù)實際情況調(diào)整

原文地址