javaweb做Echarts报表

该博客介绍了如何在JavaWeb应用中结合Echarts创建动态报表。通过在Controller中处理数据并转换成JSON字符串,然后在JSP页面中利用jQuery的getJSON方法获取数据并绘制图表。关键步骤包括设置@Responsebody注解、遍历数据存入Map、在JSP中引用echarts和jQuery库,以及解析JSON数据进行图表渲染。
摘要由CSDN通过智能技术生成

Ercharts报表制作

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

详细介绍:在后台代码处理的过程中。需要将X,Y轴想要展示的数据,通过遍历存放在一个map的集合中。我设置的是 Pojo类为成XY轴对应属性的集合,然后将数据迭代以后存放在集合当中。值得注意一点是需要在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 requestHttpServletResponse 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);
        }

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值