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},
]

效果图

div+css画漏斗图相关推荐

div+css画一个小猪佩奇
用DIV+CSS画一个小猪佩奇,挺可爱的,嘻嘻. 1.HTML部分:(全是DIV)  <div class="pig_container& ...
【DIV CSS】代码作业练习DIV CSS太极阴阳图
1. DIV CSS 练习:太极阴阳图. 基本思路:由三个div块元素组成: #taiji太极阴阳图底面 #yin太极阴阳图阴面小圆 #yang太极阴阳图阳面小圆 (太极阴阳图:上为阳下为阴 ...
【DIV+CSS】代码作业练习DIV+CSS太极阴阳图
1. DIV + CSS 练习:太极阴阳图. 基本思路:由三个div块元素组成: #taiji太极阴阳图底面 #yin太极阴阳图阴面小圆 #yang太极阴阳图阳面小圆 (太极阴阳图:上为阳下 ...
python画漏斗图_python绘制漏斗图步骤详解
pyecharts中的Funnel函数可以绘制漏斗图,自动根据数据大小生成由大到小自上而下排列的一个漏斗样的图形. 1.导入Funnel模块. from pyecharts import Funnel ...
python画漏斗图_只需简单几步，教你用python完成漏斗图的绘制
商业分析中经常会用到漏斗图.尤其是在网站流量监控.电商商品转化等一些数据运营方面.漏斗图之所以是漏斗就就是倒三角的形状,是因为用户或者流量,集中从某个功能点进入,很大可能会按照产品本身设定的流程来完成 ...
css html弄出哆啦a梦,用css画一个哆啦A梦
原图: 效果图: 虽然说没用啥什么高级的技巧,但这让我感受到了CSS的乐趣! 好好学习,天天向上! body{ background-color: #66B3FF; height: 300px; ov ...
css加三角阴影,用CSS画一个带阴影的三角形的示例代码
1. 思路怎么用CSS3画一个带阴影的三角形呢 ? 有童鞋说, 这还不简单吗网上有很多解决方案, 但其实大多都是实现不太完美的, 存在一些问题假设我们做一个向下的三角形箭头常见的方法大致有两种 ...
html css ps切图教程,Photoshop（PS）CSS切图必用工具
Adobe PHOTOSHOP日常咱们又被称为PS. div CSS必备切图工具PS截图多数人对于PHOTOSHOP的了解仅限于"一个很好的图象编辑软件",并不晓得它的诸多使用方 ...
Divbrush 网页Div css画板定位布局系统 v1.8
Divbrush 网页Div css画板定位布局系统软件是一款专业制作DIV+CSS的切图与样式布局的网页前期设计软件. Divbrushv1.0基本上实现了可视化DIV容器布局的画板辅助功能,通过图 ...

div+css画漏斗图

div+css画漏斗图相关推荐

最新文章

热门文章