G2
G2
G6
F2
L7
墨者学院
关于 G2
图表示例
API 文档
使用教程
English
折线图
基础折线图
双折线图
多折线图
其他折线图
条形图
分组条形图
堆叠条形图
基础条形图
柱状图
基础柱状图
分组柱状图
堆叠柱状图
直方图
饼图
环图
玫瑰图
基础饼图
嵌套饼图
点图
散点图
面积图
基础面积图
堆叠面积图
区间面积图
箱形图
箱型图
烛形图
烛形图
热力图
热力图
仪表盘
仪表盘
漏斗图
漏斗图
地图
地图
雷达图
雷达图
分面
分面
关系图
关系图
其他图表
其他
迷你图
组件使用
组件
漏斗图
基础漏斗图
Basic Funnel Chart,基础漏斗图。
源码
复制成功
复制失败
全屏
复制
运行
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,height=device-height"> <title>基础漏斗图</title> <style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;height:100%;margin:0;}</style> </head> <body> <div id="mountNode"></div> <script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script> <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.5.1/dist/g2.min.js"></script> <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.10.1/dist/data-set.min.js"></script> <script> var _DataSet = DataSet, DataView = _DataSet.DataView; var data = [{ action: '浏览网站', pv: 50000 }, { action: '放入购物车', pv: 35000 }, { action: '生成订单', pv: 25000 }, { action: '支付订单', pv: 15000 }, { action: '完成交易', pv: 8000 }]; var dv = new DataView().source(data); dv.transform({ type: 'map', callback: function callback(row) { row.percent = row.pv / 50000; return row; } }); data = dv.rows; var chart = new G2.Chart({ container: 'mountNode', forceFit: true, height: window.innerHeight, padding: [20, 120, 95] }); chart.source(data, { percent: { nice: false } }); chart.axis(false); chart.tooltip({ showTitle: false, itemTpl: '<li data-index={index} style="margin-bottom:4px;">' + '<span style="background-color:{color};" class="g2-tooltip-marker"></span>' + '{name}<br/>' + '<span style="padding-left: 16px">浏览人数:{pv}</span><br/>' + '<span style="padding-left: 16px">占比:{percent}</span><br/>' + '</li>' }); chart.coord('rect').transpose().scale(1, -1); chart.intervalSymmetric().position('action*percent').shape('funnel').color('action', ['#0050B3', '#1890FF', '#40A9FF', '#69C0FF', '#BAE7FF']).label('action*pv', function(action, pv) { return action + ' ' + pv; }, { offset: 35, labelLine: { lineWidth: 1, stroke: 'rgba(0, 0, 0, 0.15)' } }).tooltip('action*pv*percent', function(action, pv, percent) { return { name: action, percent: parseInt(percent * 100) + '%', pv: pv }; }); data.forEach(function(obj) { // 中间标签文本 chart.guide().text({ top: true, position: { action: obj.action, percent: 'median' }, content: parseInt(obj.percent * 100) + '%', // 显示的文本内容 style: { fill: '#fff', fontSize: '12', textAlign: 'center', shadowBlur: 2, shadowColor: 'rgba(0, 0, 0, .45)' } }); }); chart.render(); </script> </body> </html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,height=device-height"> <title>基础漏斗图</title> <style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;height:100%;margin:0;}</style> </head> <body style="background: #1f1f1f;"> <div id="mountNode"></div> <script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script> <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g2-3.5.1/dist/g2.min.js"></script> <script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.data-set-0.10.1/dist/data-set.min.js"></script> <script>G2.Global.setTheme('dark');</script> <script> var _DataSet = DataSet, DataView = _DataSet.DataView; var data = [{ action: '浏览网站', pv: 50000 }, { action: '放入购物车', pv: 35000 }, { action: '生成订单', pv: 25000 }, { action: '支付订单', pv: 15000 }, { action: '完成交易', pv: 8000 }]; var dv = new DataView().source(data); dv.transform({ type: 'map', callback: function callback(row) { row.percent = row.pv / 50000; return row; } }); data = dv.rows; var chart = new G2.Chart({ container: 'mountNode', forceFit: true, height: window.innerHeight, padding: [20, 120, 95] }); chart.source(data, { percent: { nice: false } }); chart.axis(false); chart.tooltip({ showTitle: false, itemTpl: '<li data-index={index} style="margin-bottom:4px;">' + '<span style="background-color:{color};" class="g2-tooltip-marker"></span>' + '{name}<br/>' + '<span style="padding-left: 16px">浏览人数:{pv}</span><br/>' + '<span style="padding-left: 16px">占比:{percent}</span><br/>' + '</li>' }); chart.coord('rect').transpose().scale(1, -1); chart.intervalSymmetric().position('action*percent').shape('funnel').color('action', ['#0050B3', '#1890FF', '#40A9FF', '#69C0FF', '#BAE7FF']).label('action*pv', function(action, pv) { return action + ' ' + pv; }, { offset: 35, labelLine: { lineWidth: 1, stroke: 'rgba(0, 0, 0, 0.15)' } }).tooltip('action*pv*percent', function(action, pv, percent) { return { name: action, percent: parseInt(percent * 100) + '%', pv: pv }; }); data.forEach(function(obj) { // 中间标签文本 chart.guide().text({ top: true, position: { action: obj.action, percent: 'median' }, content: parseInt(obj.percent * 100) + '%', // 显示的文本内容 style: { fill: '#fff', fontSize: '12', textAlign: 'center', shadowBlur: 2, shadowColor: 'rgba(0, 0, 0, .45)' } }); }); chart.render(); </script> </body> </html>
图表简介
Basic Funnel Chart,基础漏斗图。
了解更多
图表用法
漏斗图适用于业务流程比较规范、周期长、环节多的单流程单向分析,通过漏斗各环节业务数据的比较能够直观地发现和说明问题所在的环节,进而做出决策。漏斗图用梯形面积表示某个环节业务量与上一个环节之间的差异。漏斗图从上到下,有逻辑上的顺序关系,表现了随着业务流程的推进业务目标完成的情况。
关联图表
条形图
相关链接
BizCharts
Viser