web数据可视化(Echarts版)4-10多漏斗图(代码仅供参考)

白日梦想家☜

已于 2023-05-20 12:48:59 修改

阅读量570

点赞数 1

分类专栏： HTML 文章标签： echarts 前端信息可视化

于 2023-05-19 12:47:33 首次发布

本文链接：https://blog.csdn.net/m0_63471474/article/details/130764332

版权

HTML 专栏收录该内容

40 篇文章 11 订阅

订阅专栏

echarts.js文件下载地址:Apache ECharts

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="echarts.js"></script>
		<title></title>
	</head>
	<body>
		<div id = "main" style="width: 800px; height: 800px;"></div>
		<script type="text/javascript">
			var myChart =echarts.init(document.getElementById("main"));
			var option={
				color:["red",'green','blue','#8CC485','32CD32','#7CFC00','#19CAAD','grey'],
				
				title:{
					text:'多漏斗图和多金字塔',left:200,top:'top'
				},
				tooltip:{trigger:'item',formatter:"{a} <br/>{b} : {c}%"},
                toolbox:{
                    left:750,top:12,
					orient:'vertical',top:'center',
                    feature:{dataView:{readOnly:false},restore:{},saveAsImage:{}}
             },
             legend:{
                 orient:'vertical',left:'left',left:22,top:12,
				 data:['展示','点击','访问','咨询','订单']
             },
            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:{bormal:{position:'left'}},
				     data:[
					     {value:45,name:'访问'},{value:15,name:'咨询'},{value:5,name:'订单'},
					     {value:65,name:'点击'},{value:100,name:'展示'}
				]
			},
			
			]
			}
			myChart.setOption(option);
		</script>
	</body>
</html>