SSM框架下的图表设计

2018-11-20 03:19:17来源：博客园阅读 ()

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，哈哈）：