html + css 手写漏斗图

HerayChen

于 2024-07-10 13:55:52 发布

阅读量525

点赞数 7

文章标签： html css 前端

本文链接：https://blog.csdn.net/qq_45832807/article/details/140321809

版权

在这里插入图片描述

<div class="chart-block" style="width: 265px; margin: 0px auto;">
        <div class="grid-content">
            <div class="funnelChart" style="position: relative; font-size: 16px; color: rgb(255, 255, 255);
            font-weight: bold; height: 0px; text-align: center; width: 400px; margin-left: 0px;
            border-top: 40px solid rgb(60, 110, 240); border-left: 20px solid transparent; border-right: 20px solid transparent;">
                <span
                    style="top: -28px; position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap;">商业机会：20个</span>
            </div>
        </div>
        <div class="grid-content">
            <div class="funnelChart"
                 style="position: relative; font-size: 16px; color: rgb(255, 255, 255); font-weight: bold; height: 0px; text-align: center; width: 360px; margin-left: 20px; border-top: 40px solid rgb(44, 166, 225); border-left: 20px solid transparent; border-right: 20px solid transparent;">
                <span
                    style="top: -28px; position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap;">邀约量房：20个</span>
            </div>
        </div>
        <div class="grid-content">
            <div class="funnelChart"
                 style="position: relative; font-size: 16px; color: rgb(255, 255, 255); font-weight: bold; height: 0px; text-align: center; width: 320px; margin-left: 40px; border-top: 40px solid rgb(38, 168, 114); border-left: 22px solid transparent; border-right: 22px solid transparent;">
                <span
                    style="top: -28px; position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap;">设计：20个</span>
            </div>
        </div>
        <div class="grid-content">
            <div class="funnelChart"
                 style="position: relative; font-size: 16px; color: rgb(255, 255, 255); font-weight: bold; height: 0px; text-align: center; width: 276px; margin-left: 62px; border-top: 40px solid rgb(255, 186, 18); border-left: 20px solid transparent; border-right: 20px solid transparent;">
            <span
                style="top: -28px; position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap;">报价：20个</span>
            </div>
        </div>
        <div class="grid-content">
            <div class="funnelChart"
                 style="position: relative; font-size: 16px; color: rgb(255, 255, 255); font-weight: bold; height: 0px; text-align: center; width: 235px; margin-left: 83px; border-top: 40px solid rgb(255, 110, 76); border-left: 20px solid transparent; border-right: 20px solid transparent;">
            <span
                style="top: -28px; position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap;">邀客户到店：20个</span>
            </div>
        </div>
        <div class="grid-content">
            <div class="funnelChart"
                 style="position: relative; font-size: 16px; color: rgb(255, 255, 255); font-weight: bold; height: 0px; text-align: center; width: 195px; margin-left: 103px; border-top: 40px solid rgb(225, 37, 27); border-left: 18px solid transparent; border-right: 18px solid transparent;">
            <span
                style="top: -28px; position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap;">签约或交定金：20个</span>
            </div>
        </div>
        <div class="grid-content">
            <div class="funnelChart"
                 style="position: relative; font-size: 16px; color: rgb(255, 255, 255); font-weight: bold; height: 0px; text-align: center; width: 86px; margin-left: 121px; border-top: 153px solid rgb(154, 145, 235); border-left: 80px solid transparent; border-right: 80px solid transparent;">
            <span
                style="top: -136px; position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap;">挂单：20个</span>
            </div>
        </div>
    </div>

实现原理通过：borderTop定宽 + borderLeft/borderRight控制其形状（梯形或者三角形），然后用marginLeft调整他的位置从而组装成漏斗图。

可调节vue代码demo：

<template>
    <div class="chart-block" style="width: 265px;margin: 0 auto;">
        修改的梯形索引: <a-input v-model:value="index"  placeholder="修改的梯形索引"/>
        宽度: <a-input-number v-model:value="customerOverview[index].funnleWidth" placeholder="左右角度" /><br />
        左右角度: <a-input-number v-model:value="customerOverview[index].nextWidth" placeholder="左右角度" /><br />
        左右间距: <a-input-number v-model:value="customerOverview[index].left" placeholder="左右间距" /><br />
        梯形高度: <a-input-number v-model:value="customerOverview[index].top" placeholder="梯形高度" /><br />
        <a-button type="primary" @click="download()">打印</a-button>
        <div class="grid-content"  v-for="(item , cuIndex) in customerOverview" :key="cuIndex">
            <div class="funnelChart" style="position: relative;font-size: 16px;color: #fff;font-weight: bold;height: 0; text-align: center;"
                 :style="{width:item.funnleWidth+'px', marginLeft: item.left +'px',
  borderTop: item.top + 'px solid '+funnleColor[cuIndex],
  borderLeft:item.nextWidth+'px solid transparent',
  borderRight: item.nextWidth+'px solid transparent'}">
                <span :style="{top: cuIndex === 6 ? '-136px' : '-28px'}" style="position: absolute;left: 50%;transform: translateX(-50%);white-space: nowrap;">{{ item.text }}</span>
            </div>
        </div>
    </div>
</template>
<script lang="ts">
import {Vue, Component} from 'vue-facing-decorator';

@Component({})
export default class chart extends Vue {
    //  修改的索引
    index = 0;
    funnleColor = ['#3C6EF0', '#2CA6E1', '#26A872', '#FFBA12', '#FF6E4C', '#E1251B', '#9a91eb'];
    customerOverview =[
        {funnleWidth: 400, nextWidth: 20, left: 0, top: 40, text: '商业机会：20个'},
        {funnleWidth: 360, nextWidth: 20, left: 20, top: 40, text: '邀约量房：20个'},
        {funnleWidth: 320, nextWidth: 22, left: 40, top: 40, text: '设计：20个'},
        {funnleWidth: 276, nextWidth: 20, left: 62, top: 40, text: '报价：20个'},
        {funnleWidth: 235, nextWidth: 20, left: 83, top: 40, text: '邀客户到店：20个'},
        {funnleWidth: 195, nextWidth: 18, left: 103, top: 40, text: '签约或交定金：20个'},
        {funnleWidth: 86, nextWidth: 80, left: 121, top: 153, text: '挂单：20个'},
    ];
    download() {
        console.log('customerOverview', this.customerOverview)
    }
}
</script>

<style scoped lang="less">

</style>