168Echarts - 漏斗图（Multiple Funnels）

效果图

源代码

	
		
		ECharts
		
		
		
		
	

	
		
		

		
			// 基于准备好的dom，初始化echarts实例
			var myChart = echarts.init(document.getElementById('main'));
			var option;
			option = {
				title: {
					text: '漏斗图',
					subtext: '纯属虚构',
					left: 'left',
					top: 'bottom'
				},
				tooltip: {
					trigger: 'item',
					formatter: "{a} {b} : {c}%"
				},
				toolbox: {
					orient: 'vertical',
					top: 'center',
					feature: {
						dataView: {
							readOnly: false
						},
						restore: {},
						saveAsImage: {}
					}
				},
				legend: {
					orient: 'vertical',
					left: 'left',
					data: ['展现', '点击', '访问', '咨询', '订单']
				},
				calculable: true,
				series: [{
						name: '漏斗图',
						type: 'funnel',
						width: '40%',
						height: '45%',
						left: '5%',
						top: '50%',
						data: [{
								value: 60,
								name: '访问'
							},
							{
								value: 30,
								name: '咨询'
							},
							{
								value: 10,
								name: '订单'
							},
							{
								value: 80,
								name: '点击'
							},
							{
								value: 100,
								name: '展现'
							}
						]
					},
					{
						name: '金字塔',
						type: 'funnel',
						width: '40%',
						height: '45%',
						left: '5%',
						top: '5%',
						sort: 'ascending',
						data: [{
								value: 60,
								name: '访问'
							},
							{
								value: 30,
								name: '咨询'
							},
							{
								value: 10,
								name: '订单'
							},
							{
								value: 80,
								name: '点击'
							},
							{
								value: 100,
								name: '展现'
							}
						]
					},
					{
						name: '漏斗图',
						type: 'funnel',
						width: '40%',
						height: '45%',
						left: '55%',
						top: '5%',
						label: {
							normal: {
								position: 'left'
							}
						},
						data: [{
								value: 60,
								name: '访问'
							},
							{
								value: 30,
								name: '咨询'
							},
							{
								value: 10,
								name: '订单'
							},
							{
								value: 80,
								name: '点击'
							},
							{
								value: 100,
								name: '展现'
							}
						]
					},
					{
						name: '金字塔',
						type: 'funnel',
						width: '40%',
						height: '45%',
						left: '55%',
						top: '50%',
						sort: 'ascending',
						label: {
							normal: {
								position: 'left'
							}
						},
						data: [{
								value: 60,
								name: '访问'
							},
							{
								value: 30,
								name: '咨询'
							},
							{
								value: 10,
								name: '订单'
							},
							{
								value: 80,
								name: '点击'
							},
							{
								value: 100,
								name: '展现'
							}
						]
					}
				]
			};

			myChart.setOption(option);