echarts 简介
一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
特征
丰富的可视化类型，多种数据格式无需转换直接使用，千万数据的前端展现，移动端优化，绚丽的特效，多渲染方案，跨平台使用，深度的交互式数据探索，多维数据的支持以及丰富的视觉编码手段，动态数据，通过 GL 实现更多更强大绚丽的三维可视化，无障碍访问（4.0+）
idea 中使用
- 导入相关文件（下载地址：https://www.echartsjs.com/download.html）
官网选择一种图形
jsp页面
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<script src="${path}/echarts/jquery-1.11.3.js"></script>
<script src="${path}/echarts/jquery.min.js"></script>
<script src="${path}/echarts/echarts.js"></script>
<head>
<title>Title</title>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<div id="app" style="width: 600px;height:400px;"></div>
</body>
<script>
$(function () {
var classes=[];
var jis =[];
var bis =[];
$.ajax({
url:'${path}/query.do',
type:'post',
dataType:'json',
async:false,
success:function(data){
classes=data.classes;
jis=data.jis;
bis=data.bis;
}
});
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
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'
}
}
}
};
var option = {
color: ['#003366', '#006699', '#4cabce', '#e5323e'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['Forest', 'Steppe', 'Desert', 'Wetland']
},
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: classes
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '计试',
type: 'bar',
barGap: 0,
label: labelOption,
data: jis
},
{
name: '笔试',
type: 'bar',
label: labelOption,
data: bis
},
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
})
</script>
</html>
控制层
@RequestMapping("query")
@ResponseBody
public Map<String,Object> query(){
/* List<String> list = echartsService.query();*/
List<Map<String,Integer>> jilist = echartsService.queryJi();
List<Map<String,Integer>> bilist = echartsService.queryBi();
List<Integer> classes = new ArrayList<>();
List<Integer> jis = new ArrayList<>();
List<Integer> bis = new ArrayList<>();
for(int i=0;i<jilist.size();i++){
classes.add(jilist.get(i).get("班级"));
jis.add(jilist.get(i).get("机试"));
bis.add(bilist.get(i).get("笔试"));
}
Map<String,Object> map = new HashMap<>();
map.put("classes",classes);
map.put("jis",jis);
map.put("bis",bis);
return map;
}
持久层
<!--queryJi-->
<select id="queryJi" resultType="map">
SELECT c.cla_name AS '班级',AVG(s.stu_ji) AS '机试'from t_class c INNER JOIN
t_stu s on c.cla_id=s.cla_id GROUP BY s.cla_id
</select>
<!--queryBi-->
<select id="queryBi" resultType="map">
SELECT c.cla_name AS '班级',AVG(s.stu_bi) AS '笔试'from t_class c INNER JOIN
t_stu s on c.cla_id=s.cla_id GROUP BY s.cla_id
</select>
数据库的建表结构
t_stu
t_class
设置外键
效果图
