java ssm饼图_SSM echarts 饼状图 动态加载

还是那句话，重点在于前台要什么格式的数据，我们就在后台处理成什么格式，再返回前台。

JSP

pageEncoding="UTF-8"%>

Insert title here

// 基于准备好的dom，初始化echarts实例

var barChart = echarts.init(document.getElementById("main"));

var option = null;

//页面加载数据

$(function () {

$.ajax({

type: "GET",

//调用后台方法获取数据

url: "/getEchartsDataBall.do",

dataType : 'json',

success : function(dataFromController) {

option = {

title : {

text : '部门人员饼状图展示'

},

tooltip : {},

series : [ {

name : '访问来源',

type : 'pie',

radius : '55%',

//样例数据格式[ {value:235, name:'视频广告'},{value:274, name:'联盟广告'}]

data : dataFromController//后台传过来时responseBody已经将list转为json串了

} ]

};

// 设定option各种参数。

barChart.setOption(option);

}

});

});

Controller

@RequestMapping("getEchartsDataBall")

@ResponseBody

public List getEchartsDataBall() {

//饼状图需要的data数据格式{value:235, name:'视频广告'},

//建实体类时，属性名必须时value和name

List list = auserService.getEchartsDataBall();

return list;

}

Entity

package com.jk.quanxian.entity;

public class EchartsDataBallBean {

private Integer value;

private String name;

public Integer getValue() {

return value;

}

public void setValue(Integer value) {

this.value = value;

}

public String getName() {

return name;

}

public void setName(String name) {

this.name = name;

}

@Override

public String toString() {

return "EchartsDataBallBean [value=" + value + ", name=" + name + "]";

}

}

Mapper.xml

select d.C_Name as name, COUNT(u.C_Name) as value

from t_aty_dept d,t_aty_user u where d.C_ID = u.C_DEPT GROUP BY d.C_Name