Echarts 漏斗图

实例：

本节任务

任务一：漏斗图或金字塔图

任务描述

漏斗图（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 漏斗图相关推荐

echarts漏斗图自定义漏斗颜色、粗细、大小、间隔缝隙
目录 1.官网找样例 2.初步改造示例,有个雏形 3.细节改造和优化 4.全部代码 5.原始效果和完成效果对比碎碎念: UI效果图是这样的看到之后我一脸懵,按照常规阶梯思路,我又开始了度娘之旅. ...
echarts漏斗图
图表效果如下: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
关于Echarts漏斗图
实现的效果: 主要实现了漏斗图内和外侧同时能显示内容. 代码: <template><div><div ref="chart" style=" ...
vue + echarts 漏斗图实现里面数据外面标签漏斗不随值改变而变形
vue echarts 漏斗最近有一个需求漏斗统计,采用的echarts来实现需要实现如下效果最初版本旁边有描述,里面要有值: 第一步首先在项目里安装echarts; npm install ...
ECharts漏斗图(详细示例——满满的注释)
图表效果如下: 代码如下: <!DOCTYPE html> <html><head><meta charset="UTF-8">&l ...
html页面漏斗图,echarts 漏斗图示例
option = { color: ['#298DFF', '#2EC25B', '#FBD337'], backgroundColor: '#FFFFFF', barWidth: 8, title: ...
echarts 漏斗图
option = {title: {text: '漏斗图',subtext: '纯属虚构'},tooltip: {trigger: 'item',formatter: "{a} <br ...
echarts漏斗图配置
option = { color : [ 'rgba(255, 69, 0, 0.5)', 'rgba(255, 150, 0, 0.5)', 'rgba(255, 200, 0, 0.5)', 'r ...
echarts 漏斗图funnel
1.配置datadata:[{name:'xx',value:n,...}]2.配置seriesseries:[{min:n, 指定数据的最小值max:n, 指定数据的最大值minSize:'0%', ...

Echarts 漏斗图

主要参数讲解

Echarts 漏斗图相关推荐

最新文章

热门文章