實例：

• 本節任務

任務一：漏斗圖或金字塔圖

• 任務描述

漏斗圖（funnel）是倒三角形的條形圖，金字塔是正三角形的條形圖，這兩者適用于業務流程比較規范、周期較長、環節較多的流程分析。漏斗圖也是常用的BI類圖表之一，用戶通過漏斗圖或金字塔對各環節業務數據進行比較，不僅能夠直觀地發現和說明問題而且可以根據圖分析銷售各環節中哪些環節出了問題。為了更直觀地查看電商網站數據，需要在Echarts中繪制基本漏斗圖、基本金字塔、多漏斗圖和多金字塔進行展示。

????漏斗圖又稱倒三角圖，漏斗圖將數據呈現為幾個階段，每個階段的數據都是整體的一部分；從一個階須到另一個階段，數據占比自上而下下降，所有階段數據的占比總計100%。與餅圖一樣，漏斗圖呈現的也不是具體的數據。此外，漏斗圖還具有不需要使用任何數據軸的特點。

案例描述：

?????在電商網站中，一個完整的網上購物步驟大致為：瀏覽選購——添加到購物車——購物車結算——核對訂單信息——提交訂單——選擇支付方式——完成支付。某電商網站各購物步驟的數據如下：

所處環節	當前人數	整體轉化率
瀏覽選購	1000	100%
添加到購物車	600	60%
購物車結算	420	42%
核對訂單信息	25	25%
提交訂單	90	9%
選擇支付方式	40	4%
完成支付	25	2.5%

• 實現步驟

引入echarts.js庫文件

定義圖表容器大小

初如化echarts實例對象

配置圖表組件

var?option={series:[{name:'漏斗圖',type:'funnel',left:'3%',sort:'descending',top:60,bottom:60,width:'80%',min:0,max:100,minSize:'0%',maxSize:'100%',gap:2,label:{show:true,position:'inside'},data:[{value:100,name:'瀏覽器'},{value:60,name:'添加到購物車'},{value:42,name:'購物車結算'},{value:25,name:'核對訂單'},{value:9,name:'提交訂單'},{value:4,name:'選擇支付方式'},{value:2.5,name:'完成支付'}]}]}

• 主要參數講解

?sort：descending //金字塔是升序：ascending;漏斗圖是降序:descending

minSize:’0%’?設置每一塊的最小寬度

maxSize:’100%’ 設置每一塊的最大寬度

gap:2,設置每一塊之間的間隔

Min:0,設置最小的數據值，默認為0，映射到minSize.

Max:100,設置最大的數據值，默認為100，映射到maxSize

• 知識拓展

繪制多漏斗圖或多金字塔

提示：sort取descending是漏斗，取ascending是金字塔。

總結

以上是生活随笔為你收集整理的Echarts 漏斗图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。