實(shí)例：

• 本節(jié)任務(wù)

任務(wù)一：漏斗圖或金字塔圖

• 任務(wù)描述

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

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

案例描述：

?????在電商網(wǎng)站中，一個(gè)完整的網(wǎng)上購(gòu)物步驟大致為：瀏覽選購(gòu)——添加到購(gòu)物車——購(gòu)物車結(jié)算——核對(duì)訂單信息——提交訂單——選擇支付方式——完成支付。某電商網(wǎng)站各購(gòu)物步驟的數(shù)據(jù)如下：

所處環(huán)節(jié)	當(dāng)前人數(shù)	整體轉(zhuǎn)化率
瀏覽選購(gòu)	1000	100%
添加到購(gòu)物車	600	60%
購(gòu)物車結(jié)算	420	42%
核對(duì)訂單信息	25	25%
提交訂單	90	9%
選擇支付方式	40	4%
完成支付	25	2.5%

• 實(shí)現(xiàn)步驟

引入echarts.js庫(kù)文件

定義圖表容器大小

初如化echarts實(shí)例對(duì)象

配置圖表組件

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:'添加到購(gòu)物車'},{value:42,name:'購(gòu)物車結(jié)算'},{value:25,name:'核對(duì)訂單'},{value:9,name:'提交訂單'},{value:4,name:'選擇支付方式'},{value:2.5,name:'完成支付'}]}]}

• 主要參數(shù)講解

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

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

maxSize:’100%’ 設(shè)置每一塊的最大寬度

gap:2,設(shè)置每一塊之間的間隔

Min:0,設(shè)置最小的數(shù)據(jù)值，默認(rèn)為0，映射到minSize.

Max:100,設(shè)置最大的數(shù)據(jù)值，默認(rèn)為100，映射到maxSize

• 知識(shí)拓展

繪制多漏斗圖或多金字塔

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。