java ssm饼图_SSM框架下的图表设计

1. 由于在自动生成的Mapper.xml文件里使用自定义结果集(即统计函数只取了其中的几个字段，但是其他的字段在转为json数据后还是会有字段，只是值为null，但对数据的选取造成难度。)效果不理想。

所以自己定义一个Mapper.xml文件和Mapper.java文件，如下：

GenMapper.xml:

${_parameter}

GenMapper.java:

import java.util.List;

import java.util.Map;

import org.springframework.stereotype.Component;

@Component

public interface GenMapper {

List> select(String sql);

}

2. 然后呢，设计Dao接口和Dao的实现类，在Daoimp中写sql语句，当然还可以封装sql语句。

DaoI.java:

public interface AdminuserDao {

//饼图查询

List> 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> 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> 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> 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> select(){

return adminuserService.select();

}

}

5. 最后jsp页面用ajax得到数据就可以制作图表了：

$(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}
{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);

}

}

});

});

PS：当然，肯定要引用js，我用的是：http://echarts.baidu.com/里面下载的echarts.js。

放张效果图(比较简陋，复杂的肯定需要复杂的sql，哈哈)：