SSM框架下的图表设计

发布时间：2020-12-16 23:41:49 所属栏目：百科来源：网络整理

导读：1. 由于在自动生成的Mapper.xml文件里使用自定义结果集（即统计函数只取了其中的几个字段，但是其他的字段在转为json数据后还是会有字段，只是值为null，但对数据的选取造成难度。）效果不理想。所以自己定义一个Mapper.xml文件和Mapper.java文件，如下： G

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!