使用SSM+ajax+echarts制作报表图

最新推荐文章于 2022-11-27 12:00:09 发布

· Coisini

最新推荐文章于 2022-11-27 12:00:09 发布

阅读量7.7k

点赞数 2

文章标签： ajax echarts3-5 ssm框架

本文链接：https://blog.csdn.net/qq_36476972/article/details/70808042

版权

这次使用echarts制作一个统计图

echarts官网：http://echarts.baidu.com/index.html

首先去下载文件吧开发版的JS 扔到项目里就好了。

第一次用该怎么玩呢，正确姿势当然先看看源码了，官网里有各种图表的demo。看看什么样的数据是用ajax获取就好了。

自己做了一个简单的效果。

这里写图片描述

不废话直接上代码吧首先就是UserDao方法

//统计男女用户人数
    @Select("select case when sex='1' then '女' when sex='0' then '男' end as SEX,count(sex) as SEXCOUNT from t_user group by sex")
    List<Map<String,Object>> count();

这个查询语句搞的也挺焦灼，里边AS后边不要用双引号因为外边有双引号，单引号也不要用语句错误的，没脾气了直接不用了以至于后边集合取值为null，这里提醒一下AS后边的别名在存入集合的时候全部大写，不论你的语句写的大小写都要大写。

然后就UserService了

/**
     * 饼状图数据
     * @return
     */
    public List<Map<String,Object>> pieData(){
        List<Map<String,Object>> data =new ArrayList<>();
        List<Map<String, Object>> listdata=userdao.count();
        if(listdata.size()>0){
            for(int i=0;i<listdata.size();i++){
                Map<String,Object> map=new HashMap<>();
                map.put("name", listdata.get(i).get("SEX"));
                map.put("value", listdata.get(i).get("SEXCOUNT"));
                data.add(map);
            }
        }
        return data;
    }

注意每个图表的数据，有的是list有的是map。

UserConreoller

/**
     * 获取饼状图数据
     * @return
     */
    @RequestMapping(value="echartsData",method=RequestMethod.POST)
    @ResponseBody
    public List<Map<String, Object>> initChart(){
        return userservice.pieData();
    }

到这里后台数据就完成了，写后台的时候遇到一个问题也不明白是为什么错误信息如下：

这里写图片描述

就是找不到你绑定的dao方法，运行到service层就崩掉了，SQL都不执行还怎么玩。

莫名的问题，不可能是配置问题，别的方法都可以。

最后的解决方法是把方法名字改了改，不知道为什么就好了可能是我的dao、service、controller方法名一样吧，改了名字项目就起来了。

最后是页面： userSexEcharts.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
    String path=request.getContextPath();
    String basePath=request.getScheme()+"//"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../echartsjs/echarts.min.js"></script>
<script type="text/javascript" src="../jquery/jquery-2.1.1.min.js"></script>
</head>
<body>
<div id="dy"  style="height: 600px;width: 1100px;margin-top: 50px;margin-left:20px;">
    <div id="mainChart" style="border: 1px solid #438FB9; width:100%; height:45%;"></div>
</div>
</body>
<script type="text/javascript">
    //使用ajax加载数据 
    $.ajax({
        method:'post',
        url:'${pageContext.request.contextPath}/echartsData',
        dataType:'json',
        success:function(data){
            initChat(data);
        }
    }); 
    function initChat(data){
    var myChart = echarts.init(document.getElementById('mainChart'));
        option = {
                title : {
                    text: '员工男女比例统计',
                    subtext: '内部数据',
                    x:'center'
                },
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    left: 'left',
                    data: data
                },
                series : [
                    {
                        name: '男女数量',
                        type: 'pie',
                        radius : '55%',
                        center: ['50%', '60%'],
                        data:data,
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }       
                    }
                ]
            },
                    myChart.setOption(option);
    };
</script>
</html>