一、介绍
通过ECharts饼状图展示数据库中的数据信息,通过ajax发送请求从后台获取数据,将数据通过js在ECharts展示出来。主要实现在数据库表中,查询有多少个项目培训类型,参与每一个项目的有多少人,将这些数据通过饼状图的形式展现出来。
二、java后台代码
//dao层
@Select("select traintype,count(traintype) as traintypenum from v_all group by traintype")
public List<All> getTrainTypeNuminfo();
//service层
public List<All> getTrainTypeNuminfo(){
return integratedQueryMapper.getTrainTypeNuminfo();
}
//Controller层
@RequestMapping(value = "/getTrainInforStatic",method = {RequestMethod.GET, RequestMethod.POST})
@ResponseBody
public List<All> getTrainInforStatic(HttpSession session){
List<All> getTrainTypeNuminfo = integratedQueryService.getTrainTypeNuminfo();
return getTrainTypeNuminfo;
}
三、前台代码
3.1 前台代码1
如下的前台代码,js只用来对Echarts的饼状图赋值数据,会产生没有饼状图标题,统计数据信息:
$(function(){
var myChart = echarts.init(document.getElementById('main'));
/* data1 表示每个饼状图的名字,每个培训类型
data2 表示每个饼状图,即每个培训类型的统计结果
*/
var data1=[];
var data2=[];
var array=[];
option = {
title : {
text: '培训信息数据统计',
/*subtext: '',*/
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient : 'vertical',
x : 'left',
/*data:['直接访问','邮件营销','联盟广告','视频