簡單實現一個流程圖（箭頭流程圖）

前言

在項目中有一個需求，做一個流程圖，本來想着ctrl+c/v來着方便些，網上查了一下，少之又少，就干脆自己寫了一下，供大家參考。示例圖如下。
本次開發用的是vue+scss形式，不過基本上都是css3+js而已，簡單易懂，同樣也好拓展。

圖例

思路

1. 父元素設置flex布局，子元素都是自適應，可隨着屏幕寬度變化而變化。
2. 設置雙偽元素::before/::after，一個在前，一個在后，通過設置border-top/bottom/left的大小，讓與父元素契合。
3. 通過:first-child/:last-child設置第一個和最后一個不顯示偽元素。
4. 需要給flow-charts-single設置右圓角，因為正常的情況下會有一條白線。設置圓角，並向偽元素再往左移動1px。看起來更加毫無違和感。
5. js相對簡單，也可以設置步驟，事件，顏色等等，通過js去設置即可

頁面

<div class="flow-charts">
    <div class="flow-charts-single" :class="{'disabled-flow-charts-single':item.isDisabled}" v-for="(item) in dealpieData" :key="item.id" :style="{'--color':!item.isDisabled?item.color:'#f5f5f5'}">
        <div class="number">{{!item.isDisabled?item.count:'暫無該功能'}}</div>
        <div class="name">{{item.name}}人數</div>
    </div>
</div>

樣式

.flow-charts{
    width: 100%;
    display: flex;
    justify-content: center;

    .flow-charts-single{
        flex: 1;
        height: 72px;
        background: var(--color);
        position: relative;
        display: inline-block;
        margin-right: 34px;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-bottom-right-radius: 2px;
        border-top-right-radius: 2px;
        .name{
            font-size: 12px;
            color: #fff;
            line-height: 18px;
            margin-top: 5px;
            font-weight: 400;
        }
        .number{
            font-size: 22px;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #FFFFFF;
            line-height: 22px;
        }
        &::after{
            content:'';
            border-bottom: 36px solid transparent;
            border-left: 26px solid var(--color);
            border-top: 36px solid transparent;
            // display: inline-block;
            position: absolute;
            right: -25px;
            top: 0;
        }
        &::before{
            content:'';
            border-bottom: 36px solid var(--color);
            border-left: 26px solid transparent;
            border-top: 36px solid var(--color);
            // display: inline-block;
            position: absolute;
            left: -25px;
            top: 0;
        }
        &:first-child{
            border-top-left-radius: 4px;
            border-bottom-left-radius: 4px;
            
            &::before{
                display: none;
            }
        }
        &:last-child{
            margin-right: 0;
            border-top-right-radius: 4px;
            border-bottom-right-radius: 4px;
            
            &::after{
                display: none;
            }
        }
    }
    .disabled-flow-charts-single{
        .name{
            color: #bfbfbf;
        }
        .number{
            color: #BFBFBF;
            font-size: 14px;
        }
    }
}

js

export default {
    name:'progress',
    data:function(){
        return {
            dealpieData:[{
                name:'通知',
                color:'red',
                count:100
            },{
                name:'簽到',
                color:'pink',
                count:200
            },{
                name:'報到',
                color:'green',
                count:0,
                isDisabled:true
            },{
                name:'參與',
                color:'red',
                count:120
            }]
            
        }
    },