javassm饼图_SSMecharts饼状图动态加载

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

JSP

pageEncoding&＃61;"UTF-8"%>

// 基于准备好的dom&＃xff0c;初始化echarts实例

var barChart &＃61; echarts.init(document.getElementById("main"));

var option &＃61; null;

//页面加载数据

$(function () {

$.ajax({

type: "GET",

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

url: "/getEchartsDataBall.do",

dataType : &＃39;json&＃39;,

success : function(dataFromController) {

option &＃61; {

title : {

text : &＃39;部门人员饼状图展示&＃39;

},

tooltip : {},

series : [ {

name : &＃39;访问来源&＃39;,

type : &＃39;pie&＃39;,

radius : &＃39;55%&＃39;,

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

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

} ]

};

// 设定option各种参数。

barChart.setOption(option);

}

});

});

Controller

&＃64;RequestMapping("getEchartsDataBall")

&＃64;ResponseBody

public List getEchartsDataBall() {

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

//建实体类时&＃xff0c;属性名必须时value和name

List list &＃61; 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 &＃61; value;

}

public String getName() {

return name;

}

public void setName(String name) {

this.name &＃61; name;

}

&＃64;Override

public String toString() {

return "EchartsDataBallBean [value&＃61;" &＃43; value &＃43; ", name&＃61;" &＃43; name &＃43; "]";

}

}

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 &＃61; u.C_DEPT GROUP BY d.C_Name