javaweb做Echarts报表

Ercharts报表制作

Echarts报表制作-从数据库中获取的数据，存放在一个集合当中。通过JSON.toJSONstring(map)的方法转换成JSON字符串。然后前台页面获取数据，x，y轴一一对应以柱（饼，线等）形式展现出来。

详细介绍：在后台代码处理的过程中。需要将X,Y轴想要展示的数据，通过遍历存放在一个map的集合中。我设置的是 Pojo类为成X，Y轴对应属性的集合，然后将数据迭代以后存放在集合当中。值得注意一点是需要在Controller层添加@Responsebody注解（@Responsebody 的返回的结果直接写入 HTTP 响应正文（ResponseBody）中，一般在异步获取数据时使用）。然后在前台JSP页面中设置var = ‘${pageContext.request.contextPath}/xxx’；

$.getJSON(url).done(function(JSON){

Var 属性名 = json.xxx(map集合名称).xxx (x集合名称);

Var 属性名 = json.xxx(map集合名称).yyy (y集合名称);

下面根据自己的需求设置对应的x,y属性名和值（自动迭代，不需要再手动迭代）

})

注意的一点是：注意echarts.js包的引入和jQuery包的引入

贴图如下：

Controller代码：

@Controller
@RequestMapping("/Movies")
public class MoviesController {
    @Autowired
    public MoviesService moviesService;
    @RequestMapping(value = "/findAll")
    @ResponseBody
    public void findMaxTenMovies(HttpServletRequest request, HttpServletResponse response) throws IOException {
        HttpSession session = request.getSession();
        List<MoviesPojo> moviesList = moviesService.findMaxTenMovies();
        session.setAttribute("moviesList",moviesList);

        List<String> names = new LinkedList<String>();
        List<String> counts = new LinkedList<String>();
        for(MoviesPojo moviesPojo : moviesList){
            names.add(moviesPojo.getMovie_name());
            counts.add(moviesPojo.getEvalue_usersr());
        }
        for(String s :names){
            System.out.println(s);
        }
        for(String a :counts){
            System.out.println(a);
        }
        MovieList movieList = new MovieList();
        movieList.setNames(names);
        movieList.setCounts(counts);
        Map map = new HashMap();
        for(String b :movieList.getNames()){
            System.out.println(b);
        }
        map.put("allData",movieList);
        response.getWriter().println(JSON.toJSONString(map));

    }

}

将movieList 集合当做一个容器，存放所有的名称和数量。输出部分为测试内容（可以去掉）。然后与allData对应放入map集合中。去前台用JSP请求接受。

JSP代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="../js/echarts.js"></script>
    <script type="text/javascript" src="../assets/js/jquery-1.10.2.js"></script>
</head>
<body>
<div id="main" style="width: 2400px; height: 400px;"></div>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById("main"));
    var url = '${pageContext.request.contextPath}/Movies/findAll';
    $.getJSON(url).done(function(json) {
           var names = json.allData.names;
            var counts = json.allData.counts;

    var option = {
        title: {
            text: '电影排行前十'
        },
        tooltip:{},
        legend:{
            data:['票数'],
        },
        xAxis:{
            name:'电影名称',
            data:names
        },
        yAxis:{},
        series:[{
            name:'票数',
            type:'bar',
            data:counts
        }],
        toolbox:{

            show:true,
            feature:{
                mark:{
                    show:true
                },
                dataView:{
                    show:true,
                    readOnly:false
                },
                magicType:{
                    show:true,
                    Type:['line','bar']
                },
                restore:{
                    show:true
                },
                saveAsImage:{
                    show:true
                }
            }
        }
    }
    myChart.setOption(option);
    })

</script>

<form action="${pageContext.request.contextPath }/Movies/findAll" method="post">

    电影详情：
    <table width="100%" border=1>
        <tr>
            <td>电影名称</td>
            <td>电影网址</td>
            <td>评分</td>
            <td>评分人数</td>
            <td>上映年代</td>
            <td>备份</td>
        </tr>
        <c:forEach items="${moviesList}" var="movie">
            <tr>

                <td>${movie.movie_name }</td>
                <td>${movie.movie_url }</td>
                <td>${movie.score }</td>
                <td>${movie.evalue_usersr }</td>
                <td>${movie.year }</td>
                <td>${movie.other }</td>
            </tr>
        </c:forEach>
    </table>

成果：