SSM框架下的图表设计
1. 由于在自动生成的Mapper.xml文件里使用自定义结果集（即统计函数只取了其中的几个字段，但是其他的字段在转为json数据后还是会有字段，只是值为null，但对数据的选取造成难度。）效果不理想。
所以自己定义一个Mapper.xml文件和Mapper.java文件，如下：
GenMapper.xml:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="dz.mapper.GenMapper">
<select id="select" resultType="map" parameterType="java.lang.String">
${_parameter}
</select>
</mapper>
GenMapper.java:
import java.util.List;
import java.util.Map;
import org.springframework.stereotype.Component;
@Component
public interface GenMapper {
List<Map<String,Object>> select(String sql);
}
2. 然后呢，设计Dao接口和Dao的实现类，在Daoimp中写sql语句，当然还可以封装sql语句。
DaoI.java:
public interface AdminuserDao {
//饼图查询
List<Map<String,Object>> select();
}
在实现类中，还需要自动装配GenMapper — DaoImp.java:
package dz.dao;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;
import dz.daoI.AdminuserDao;
import dz.entity.Adminuser;
import dz.entity.User;
import dz.mapper.AdminuserMapper;
import dz.mapper.GenMapper;
@Repository("adminuserDao")
public class AdminuserDaoImp implements AdminuserDao{
@Autowired
private AdminuserMapper adminuserMapper;
@Autowired
private GenMapper genMapper;
public GenMapper getGenMapper() {
return genMapper;
}
public void setGenMapper(GenMapper genMapper) {
this.genMapper = genMapper;
}
public AdminuserMapper getAdminuserMapper() {
return adminuserMapper;
}
public void setAdminuserMapper(AdminuserMapper adminuserMapper) {
this.adminuserMapper = adminuserMapper;
}
//饼图查询
@Override
public List<Map<String, Object>> select() {
// TODO Auto-generated method stub
String sql = "SELECT COUNT(asex) AS value,asex as name FROM adminuser GROUP BY asex";
return genMapper.select(sql);
}
}
3. 接着就是serviceI和serviceImp层（很简单的一层）：
ServiceI.java:
public interface AdminuserService {
//饼图查询
List<Map<String, Object>> select();
}
ServiceImp.java:
@Service("adminuserService")
public class AdminuserServiceImp implements AdminuserService{
@Autowired
private AdminuserDaoImp adminuserDao;
public AdminuserDaoImp getAdminuserDao() {
return adminuserDao;
}
public void setAdminuserDao(AdminuserDaoImp adminuserDao) {
this.adminuserDao = adminuserDao;
}
//饼图查询
@Override
public List<Map<String, Object>> select() {
// TODO Auto-generated method stub
return adminuserDao.select();
}
}
4.最后是Controller层，将数据以json格式传给jsp页面：
@RestController
@RequestMapping(value="/adminuser")
public class AdminuserController extends BaseController{
@Autowired
private AdminuserService adminuserService;
public AdminuserService getAdminuserService() {
return adminuserService;
}
public void setAdminuserService(AdminuserService adminuserService) {
this.adminuserService = adminuserService;
}
//饼图查询男女人数
@RequestMapping(value="/pie")
@ResponseBody
public List<Map<String, Object>> select(){
return adminuserService.select();
}
}
5. 最后jsp页面用ajax得到数据就可以制作图表了：
<div id="container" style="height: 500%"></div>
<script type="text/javascript">
$(function(){
$.ajax({
url:"adminuser/pie",
type:"post",
data:{},
dataType:"json",
success:function(datas){
//var value = new Array();
//var name = new Array();
//$(objs).each(function(i,obj){
// name.push(obj[0]);
// value.push(obj[1]);
//});
console.log(datas);
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;
option = {
backgroundColor: \'#fff\',
title: {
text: \'管理员男女比例饼图\',
left: \'center\',
top: 20,
textStyle: {
color: \'green\'
}
},
tooltip : {
trigger: \'item\',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
visualMap: {
show: false,
min: 80,
max: 600,
inRange: {
colorLightness: [0, 1]
}
},
series : [
{
name:\'管理员\',
type:\'pie\',
radius : \'55%\',
center: [\'50%\', \'50%\'],
data://[
//{value:335, name:\'直接访问\'},
//{value:310, name:\'邮件营销\'},
//{value:274, name:\'联盟广告\'},
//{value:235, name:\'视频广告\'},
//{value:400, name:\'搜索引擎\'}
//]
datas.sort(function (a, b) { return a.value - b.value; }),
roseType: \'radius\',
label: {
normal: {
textStyle: {
color: \'red\'
}
}
},
labelLine: {
normal: {
lineStyle: {
color: \'blue\'
},
smooth: 0.2,
length: 10,
length2: 20
}
},
itemStyle: {
normal: {
color: \'#c23531\',
shadowBlur: 200,
shadowColor: \'rgba(65, 142, 172, 0.5)\'
}
},
animationType: \'scale\',
animationEasing: \'elasticOut\',
animationDelay: function (idx) {
return Math.random() * 200;
}
}
]
};;
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
}
});
});
</script>
PS：当然，肯定要引用js，我用的是：http://echarts.baidu.com/里面下载的echarts.js。
放张效果图（比较简陋，复杂的肯定需要复杂的sql，哈哈）：
版权声明：本文为clack原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。