echarts 对比柱状图、多图表

最新推荐文章于 2025-03-21 13:51:12 发布

--新芽-

最新推荐文章于 2025-03-21 13:51:12 发布

阅读量2.5k

点赞数 2

本文链接：https://blog.youkuaiyun.com/hhhhhhhhhtr/article/details/107354594

版权

本文介绍了使用ECharts实现的三种图表展示方式：对比柱状图、多图表组合及包含饼图的多图文布局。通过具体代码示例，展示了如何配置标题、图例、轴线及系列数据，实现数据的直观对比与呈现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

对比柱状图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>对比柱状图</title>
		<script src="js/echarts.min.js"></script>
		<style>
			#app{ width: 800px; height: 600px;}
		</style>
	</head>
	<body>
		<div id="app"></div>
		<script>
			var myChart = echarts.init(document.getElementById("app"),"light")
			var option={
				title:{text:"用户数据"},//标题
				yAxis:{type:"category",data:["北京","上海","广州","深圳"]},
				xAxis:{},
				tooltip:{trigger:'axis',axisPointer:{type:'shadow'}},//提示文本 轴线触发
				legend:{data:["新增","流失","留存"]},//
				//图例
				series:[
					{name:"新增用户",type:"bar",data:[40,100,100,25],label:{show:true},position:"insideRight",stack:"all"},
					{name:"流失用户",type:"bar",data:[20,50,40,8],label:{show:true},position:"insideRight",stack:"all"},
					{name:"留存用户",type:"bar",data:[40,50,20,10],label:{show:true},position:"insideRight",stack:"all"}
				//名称 类型 数据
				// position 位置 :left right bottom top inside
				// stack 取值一样 堆叠在一起
				],
			}
			myChart.setOption(option);
		</script>
	</body>
</html>

在这里插入图片描述

多图文

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>对比柱状图</title>
		<script src="js/echarts.min.js"></script>
		<style>
			#app{ width: 800px; height: 600px;}
		</style>
	</head>
	<body>
		<div id="app"></div>
		<script>
			var myChart = echarts.init(document.getElementById("app"),"light")
			var option={
				
				title:{text:"用户数据"},//标题
				yAxis:{type:"category",data:["北京","上海","广州","深圳"]},
				xAxis:{},
				tooltip:{trigger:'axis',axisPointer:{type:'shadow'}},//提示文本 轴线触发
				legend:{data:["新增","流失","留存"]},//
				grid:{right:260,top:100},//位置
				//图例
				series:[
					{name:"新增用户",type:"bar",data:[40,100,100,25],label:{show:true},position:"insideRight",stack:"all"},
					{name:"流失用户",type:"bar",data:[20,50,40,8],label:{show:true},position:"insideRight",stack:"all"},
					{name:"留存用户",type:"bar",data:[40,50,20,10],label:{show:true},position:"insideRight",stack:"all"},
					{name:"忠诚用户",type:"pie",radius:120,center:["70%","20%"], data:[{name:"北京",value:20},{name:"上海",value:30},{name:"广州",value:40},{name:"深圳",value:10},]}
				//名称 类型 数据
				// position 位置 :left right bottom top inside
				// stack 堆叠在一起
				],
			}
			myChart.setOption(option);
		</script>
	</body>
</html>

在这里插入图片描述

多图表

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/echarts.min.js"></script>
		<style>
			#app{ width: 800px; height:900px;}
		</style>
	</head>
	<body>
		<div id="app"></div>
		<script>
			var myChart = echarts.init(document.getElementById("app"),"light")
			var option={
				
				title:{text:"用户数据"},//标题
				xAxis:[
					{gridIndex:0,data:["北京","上海","广州","深圳"]},
					{gridIndex:1,data:["北京","上海","广州","深圳"]},
					// data:["北京","上海","广州","深圳"]
				],
				yAxis:[
					// gridIndex 指定位置
					{gridIndex:0,},
					{gridIndex:1},
				],
				tooltip:{trigger:'axis',axisPointer:{type:'shadow'}},//提示文本 轴线触发
				legend:{data:["新增","流失","留存"]},//
				//整体划分位置和高度
				grid:[
					{height:280},
					{height:280,y:360},
					],
				//图例
				series:[
					// xAxisIndex  指定轴线
					{name:"新增用户",xAxisIndex:0,yAxisIndex:0, type:"bar",data:[{name:'北京',value:40},{name:'上海',value:30},{name:'广州',value:50},{name:'深圳',value:80},],position:"insideRight"},
					{name:"流失用户",xAxisIndex:1,yAxisIndex:1,type:"bar",data:[{name:'北京',value:140},{name:'上海',value:130},{name:'广州',value:150},{name:'深圳',value:180},],position:"insideRight"},
					
				//名称 类型 数据
				// position 位置 :left right bottom top inside
				// stack 堆叠在一起
				],
			}
			myChart.setOption(option);
		</script>
	</body>
</html>

在这里插入图片描述