图标统计

文章目录

图标统计

柱形统计图
扇形统计图
折线统计

柱形统计图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/echarts.js"></script>
		<style>
			#main1{
				height: 500px;
				width: 800px;
				margin: 0 auto;
				
			}
		</style>
	</head>
	<body>
		<div id="main1"></div>
		<script>//条形统计
			var myBarChart = echarts.init(document.getElementById('main1'));
			myBarChart.showLoading(); //加载数据的时候会出现动画效果
			var buildNames=["A栋","B栋","C栋"]; //该数组保存的是楼栋的名字
			var buildRoomCounts = [10,8,15]; //保存楼栋的房间个数
			var renteds = [4,3,6]; //保存出租数
			var solds = [2,3,4]; //保存售出数
			//根据小区的编号请求数据
			//开始设计图标统计的相关参数
			var option={ //设置图表统计的相关配置
				title:{//定义y轴上方的名称
					text:'数量/(间)'
				},
				tooltip:{
					//定义悬浮提示信息，此时是默认的
				},
				legend:{
					data:['房间总数','已出售','已出租'],
				},
				xAxis:{ //定义x轴的内容
					type:'category', //如果为category，则以类别的形式进行统计，还可以是time，但是该类型一般是在折线统计图中使用（股票）
					//楼栋的名称
					data:buildNames
					//data:['10号楼','20号楼','30号楼']
				},
				yAxis:{
					max:15,
					min:0,
					splitNumber:15 //定义刻度
					},
					//series: 定义出现统计条的基本信息
					//一个series中的每个对象 表示一个类别中的条形的信息
					series:[
					{ //统计房间数
						type:'bar',
						name:'房间总数',
						data:buildRoomCounts,
						//data:[1,2,3,10]
					},{ //统计房间的出租数量
						type:'bar',
						name:'已出租',
						data:renteds
					},{ //统计房间的出售数量
						type:'bar',
						name:'已出售',
						data:solds
					}]
					//lable:{
						//normal:{
						//	show:true,
						//	position:'top',
						//	textStyle:{
							//	color:'black'
							//}
						//}
					//}
			};
			myBarChart.setOption(option);
			myBarChart.hideLoading();//隐藏加载动画
		</script>
	</body>
</html>

图标统计

扇形统计图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/echarts.js"></script>
		<style>
			#main1,#main2{
				height: 500px;
				width: 800px;
				margin: 0 auto;
				border: solid pink 1px;
			}
		</style>
	</head>
	<body>
		<div id="main1"></div>
		<div id="main2"></div>
		<script>
			//初始化echarts图标
			var pieChart1 = echarts.init(document.getElementById('main1'));
			var option1 = { //为统计图进行基本的设置
				title:{
					show:"true", //是否显示标题，默认显示，可以不设置
					text:"已出租比例分析",//图标标题文本内容
					top:"60px",
					left:"center"  //标题的水平方向位置
				},
				tooltip:{
					//'item'：数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用
					//'axix'：坐标轴触发，主要在柱状图，折线图等会使用类目轴的图标中使用
					trigger:'item',
					formatter:"{a}<br/>{b}:{c}({d}%)"
				},
				series:[{
					name:'已出租比例分析',
					type:'pie', //统计类型是按照扇形比例统计
					radius:'55%', //扇形半径
					center:['50%','60%'], //扇形出现的位置控制
					data:[
						{name:"A 栋",value:3},
						{name:"B 栋",value:4},
						{name:"C 栋",value:5},
						{name:"D 栋",value:6},
					]
				}]
			};
			// 为对象echarts对象加载数据
			pieChart1.setOption(option1);
			
			//统计出售比例的扇形统计图
			var pieChart2 = echarts.init(document.getElementById('main2'));
			var option2 = { //为统计图进行基本的设置
				title:{
					show:"true", //是否显示标题，默认显示，可以不设置
					text:"已出售比例分析",//图标标题文本内容
					top:"60px",
					left:"center"  //标题的水平方向位置
				},
				tooltip:{
					//'item'：数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用
					//'axix'：坐标轴触发，主要在柱状图，折线图等会使用类目轴的图标中使用
					trigger:'item',
					formatter:"{a}<br/>{b}:{c}({d}%)"
				},
				series:[{
					name:'已出售比例分析',
					type:'pie', //统计类型是按照扇形比例统计
					radius:'55%', //扇形半径
					center:['50%','60%'], //扇形出现的位置控制
					data:[
						{name:"A 栋",value:3},
						{name:"B 栋",value:8},
						{name:"C 栋",value:7},
						{name:"D 栋",value:2},
					]
				}]
			};
			// 为对象echarts对象加载数据
			pieChart2.setOption(option2);
		</script>
	</body>
</html>

图标统计

折线统计

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/echarts.js"></script>
		<style>
			#main1{
				height: 500px;
				width: 800px;
				margin: 0 auto;
				
			}
		</style>
	</head>
	<body>
		<div id="main1"></div>
		<script>
			//折线图
			var myLine = echarts.init(document.getElementById('main1'));
			var option = {
				//backgroundColor:'pink',
				title:{
					text:'未来一周气温变化',
					subtext:'摄氏度/ ℃'
				},
				tooltip:{
					//控制悬浮提示框信息ooltip的trigger的值可以有'item'，'axis'
					//'item'：数据项图形触发，主要在散点图，饼图等无类目轴的图标中使用
					//'axis'：坐标轴触发，主要在柱状图，折线图等会使用类目轴的图标中使用
					tigger:'axis'
				},
				ledend:{
					//orient 设置布局方式，默认水平布局，可选值：'horizontal(水平)'，'vertical(垂直)'
					//orient：'horizontal',
					//x 设置水平安放位置，默认全图居中，可选值：'center'，'left'，'right'，{number}(x坐标,单位px)
					x:'250',
					//y 设置垂直安放位置，默认全图顶端，可选值：'top'，'bottom'，'center'，{number}(y坐标,单位px)
					y:'10',
					data:['最高气温','最低气温']
				},
				toolbox:{  //工具框配置
					show:true,
					feature:{
						dataView:{show:true,readOnly:false}, //数据视图
						magicType:{show:true,type:['line','bar']}, //其他形状转换
						restore:{show:true}, //是否显示刷新
						saveAslmage:{show:true} //下载
					}
				},
				xAxis:[
				{
					type:'category',
					boundaryGap:false, //控制折线是否从y轴开始
					data:['周一','周二','周三','周四','周五','周六','周日'],
					axisLine:{ //控制X轴样式
						lineStyle:{
							//设置x轴颜色
							color:'#912CEE'
						}
					},
					// 设置X轴数据旋转倾斜
					axisLable:{
						rotate:45, //旋转角度
						interval:0 //设置X轴数据间隔几个显示一个，0表示每个都显示
					}
				}],
				yAxis:{
					type:'value', //表示显示具体的数值
					min:-10, //设置y轴刻度的最小值
					max:70, //设置y轴刻度的最大值
					splitNumber:10, //刻度的个数
					
					axisLable:{
						formatter:'{value} ℃'
					}
				},
				series:[ //设置折线的相关配置
				{
					name:'最高气温',
					type:'line',
					data:[11,11,15,13,12,13,10],
					markPoint:{//是否重点显示最高和最低气温
						data:[
							{type:'max',name:'最大值'},
							{type:'min',name:'最小值'}
						]
					},
					markLine:{ //是否显示平均线
						data:[
							{type:'average',name:'平均值'}
						]
					}
				},
				{
					name:'最低气温',
					type:'line',
					data:[1,-2,2,5,3,2,0],
					markPoint:{
						data:[
							{name:'周最低',value:-2,xAxis:1,yAxis:-1.5}
						]
					},
					markLine:{
						data:[
							{type:'average',name:'平均值'}
						]
					}
				}
				]
			};
			myLine.setOption(option);
		</script>
	</body>
</html>

图标统计