-
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
-
柱状图最终效果图