ECharts柱状图及后台代码

最新推荐文章于 2023-05-07 15:19:26 发布

cocosun.

最新推荐文章于 2023-05-07 15:19:26 发布

阅读量1.2k

点赞数 1

分类专栏： echarts

本文链接：https://blog.csdn.net/qq_44045573/article/details/102737395

版权

echarts 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

html页面代码

<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
	<div id="container" style="height: 100%"></div>
	<script type="text/javascript" th:inline="javascript">
	   /*<![CDATA[*/  
	   var contextPath = [[@{/}]];
	   /*]]>*/ 
	</script>
	<script th:src="@{/static/components/jquery/jquery.min.js}"></script>
	<script th:src="@{/js/rite/honey.js}"></script> // 自己写的js页面引入路径
	<script type="text/javascript"
		src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
	<script type="text/javascript"
		src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
	<script type="text/javascript"
		src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
	<script type="text/javascript"
		src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
	<script type="text/javascript"
		src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
	<script type="text/javascript"
		src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
	<script type="text/javascript"
		src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>

</body>
</html>

js页面代码

$(document).ready(function() {
	initdata();
	echartsdata();
});

var dataee = []; // x轴的数据
var num1 = []; 
var num2 = [];
var num3 = [];
function initdata() {
	$.ajax({
		url : '', // 请求后台的路径
		type : 'get',
		dataType : 'json',
		async : false,
		success : function(res) {
            // 接收后台传输的数据
			dataee = res.data[0];
			num1 = res.data[1];
			num2 = res.data[2];
			num3 = res.data[3];
		}
	})
}

// 加载echart柱状图的数据
function echartsdata() {
	var dom = document.getElementById("container");
	var myChart = echarts.init(dom);
	var app = {};
	option = null;
	var posList = [ 'left', 'right', 'top', 'bottom', 'inside', 'insideTop',
			'insideLeft', 'insideRight', 'insideBottom', 'insideTopLeft',
			'insideTopRight', 'insideBottomLeft', 'insideBottomRight' ];

	app.configParameters = {
		rotate : {
			min : -90,
			max : 90
		},
		align : {
			options : {
				left : 'left',
				center : 'center',
				right : 'right'
			}
		},
		verticalAlign : {
			options : {
				top : 'top',
				middle : 'middle',
				bottom : 'bottom'
			}
		},
		position : {
			options : echarts.util.reduce(posList, function(map, pos) {
				map[pos] = pos;
				return map;
			}, {})
		},
		distance : {
			min : 0,
			max : 100
		}
	};

	app.config = {
		rotate : 90,
		align : 'left',
		verticalAlign : 'middle',
		position : 'insideBottom',
		distance : 15,
		onChange : function() {
			var labelOption = {
				normal : {
					rotate : app.config.rotate,
					align : app.config.align,
					verticalAlign : app.config.verticalAlign,
					position : app.config.position,
					distance : app.config.distance
				}
			};
			myChart.setOption({
				series : [ {
					label : labelOption
				}, {
					label : labelOption
				}, {
					label : labelOption
				}, {
					label : labelOption
				} ]
			});
		}
	};

	var labelOption = {
		normal : {
			show : true,
			position : app.config.position,
			distance : app.config.distance,
			align : app.config.align,
			verticalAlign : app.config.verticalAlign,
			rotate : app.config.rotate,
			formatter : '{c}  {name|{a}}',
			fontSize : 16,
			rich : {
				name : {
					textBorderColor : '#fff'
				}
			}
		}
	};

	option = {
		color : [ '#003366', '#006699', '#4cabce' ],
		tooltip : {
			trigger : 'axis',
			axisPointer : {
				type : 'shadow'
			}
		},
		legend : {
			data : [ '很满意', '满意', '一般' ]
		},
		toolbox : {
			show : true,
			orient : 'vertical',
			left : 'right',
			top : 'center',
			feature : {
				mark : {
					show : true
				},
				dataView : {
					show : true,
					readOnly : false
				},
				magicType : {
					show : true,
					type : [ 'line', 'bar', 'stack', 'tiled' ]
				},
				restore : {
					show : true
				},
				saveAsImage : {
					show : true
				}
			}
		},
		calculable : true,
		xAxis : [ {
			type : 'category',
			axisTick : {
				show : false
			},
			data : dataee
		} ],
		yAxis : [ {
			type : 'value'
		} ],
		series : [ {
			name : '很满意',
			type : 'bar',
			barGap : 0,
			label : labelOption,
			data : num1
		}, {
			name : '满意',
			type : 'bar',
			label : labelOption,
			data : num2
		}, {
			name : '一般',
			type : 'bar',
			label : labelOption,
			data : num3
		} ]
	};
	;
	if (option && typeof option === "object") {
		myChart.setOption(option, true);
	}
}

java后台代码

public ResultMsg<?> initdata() {
		List<Map<String, Object>> evaluationcount = evaluationRecordServiceImpl.countevaluation();  // 获取数据库分组数据
		List<String> evaluationId = new ArrayList<>();
		List<String> listnum1 = new ArrayList<>();
		List<String> listnum2 = new ArrayList<>();
		List<String> listnum3 = new ArrayList<>();
		for (int i = 0; i < evaluationcount.size(); i++) {
			Map<String, Object> mapdata = evaluationcount.get(i);
                    // Map<String,Object>转成JsonObject（自己的方法）
			JSONObject json = Commons.mapReturnJsonObj(mapdata); 
			int min; // 接收最小值
			if (!evaluationId.contains(json.get("evaluationName"))) { // 判断是否包含
				if (i != 0) { // 排除第一位
					if (listnum1.size() == listnum2.size() && listnum1.size() == listnum3.size()) { // 当三个集合长度一样时直接添加
						evaluationId.add(json.get("evaluationName").toString());
					} else { // 判断最小长度的集合 ，进行追加
						if (listnum1.size() < listnum2.size()) {
							min = listnum1.size();
						} else {
							min = listnum2.size();
						}
						if (min > listnum3.size()) {
							min = listnum3.size();
						} // 缺位补零
						if (min == listnum1.size()) {
							listnum1.add("0");
						} else if (min == listnum2.size()) {
							listnum2.add("0");
						} else if (min == listnum3.size()) {
							listnum3.add("0");
						}
						evaluationId.add(json.get("evaluationName").toString());
					}
				}

			}
			if ("1".equals(json.get("evaluation"))) {
				listnum1.add(json.get("count").toString());
			} else if ("2".equals(json.get("evaluation"))) {
				listnum2.add(json.get("count").toString());
			} else if ("3".equals(json.get("evaluation"))) {
				listnum3.add(json.get("count").toString());
			}
		}
		List<List<String>> list = new ArrayList<>();
		list.add(evaluationId);
		list.add(listnum1);
		list.add(listnum2);
		list.add(listnum3);
		return ResultUtils.returnSuccess(list); // 这是自己写的返回方法，可以直接传List<List<String>>数据类型
	}

数据库多字段分组查询语句

SELECT 字段A, 字段B, Count(*) as count FROM 表名 GROUP BY 字段A, 字段B

柱状图最终效果图

cocosun.

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
ECharts柱状图及后台代码

html页面代码 <!DOCTYPE html><html style="height: 100%"><head><meta charset="utf-8"></head><body style="height: 100%; margin: 0"> <div id="container" style...
复制链接

扫一扫