165Echarts - 漏斗图（Funnel Chart）

效果图

源代码

	
		
		ECharts
		
		
		
		
	

	
		
		

		
			// 基于准备好的dom，初始化echarts实例
			var myChart = echarts.init(document.getElementById('main'));
			var option;
			option = {
				title: {
					text: '漏斗图',
					subtext: '纯属虚构'
				},
				tooltip: {
					trigger: 'item',
					formatter: "{a} {b} : {c}%"
				},
				toolbox: {
					feature: {
						dataView: {
							readOnly: false
						},
						restore: {},
						saveAsImage: {}
					}
				},
				legend: {
					data: ['展现', '点击', '访问', '咨询', '订单']
				},
				calculable: true,
				series: [{
					name: '漏斗图',
					type: 'funnel',
					left: '10%',
					top: 60,
					//x2: 80,
					bottom: 60,
					width: '80%',
					// height: {totalHeight} - y - y2,
					min: 0,
					max: 100,
					minSize: '0%',
					maxSize: '100%',
					sort: 'descending',
					gap: 2,
					label: {
						show: true,
						position: 'inside'
					},
					labelLine: {
						length: 10,
						lineStyle: {
							width: 1,
							type: 'solid'
						}
					},
					itemStyle: {
						borderColor: '#fff',
						borderWidth: 1
					},
					emphasis: {
						label: {
							fontSize: 20
						}
					},
					data: [{
							value: 60,
							name: '访问'
						},
						{
							value: 40,
							name: '咨询'
						},
						{
							value: 20,
							name: '订单'
						},
						{
							value: 80,
							name: '点击'
						},
						{
							value: 100,
							name: '展现'
						}
					]
				}]
			};

			myChart.setOption(option);