div+css画漏斗图

需求：系统需要画一个漏斗图，需要对漏斗进行各行操作并且每行留出空格，通过某些操作需要进行部分漏斗的隐藏。需求比较复杂，虽然echarts提供的漏斗图很方便，但是操作起来比较困难，所以选用div+css。

思路：采用无高度div，通过动态传入设置div的border-top、border-left、border-right来完成梯形四边形，采用上下叠加的方式完成漏斗图。其中类似border-top，在vue的标签中应写成borderTop，上边框设为50px，左右边框之和为当前div宽度与下一个div宽度差值，并设为无色，则可完成漏斗图。。

<div class="grid-content"  v-for="(item , cuIndex) in customerOverview" :key="cuIndex">
<div class="funnelChart"  
 :style="{width:item.funnleWidth+'px',
  borderTop:' 50px solid '+funnleColor[cuIndex+1],
  borderLeft:item.nextWidth+'px solid transparent', 
  borderRight: item.nextWidth+'px solid transparent'}">
</div>
</div>
<style>
.funnelChart{
  height: 0;
}
</style>

动态数据如下：

funnleColor: ['#3C6EF0', '#2CA6E1', '#26A872', '#FFBA12', '#FF6E4C', '#E1251B'],
customerOverview：[
{funnleWidth: 265, nextWidth: 10},
{funnleWidth: 245, nextWidth: 20},
{funnleWidth: 205, nextWidth: 30},
{funnleWidth: 145, nextWidth: 20},
{funnleWidth: 105, nextWidth: 20},
{funnleWidth: 65, nextWidth: 32.5},
]

效果图