echarts 动态获取柱状图实例

echarts 简介

一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

特征

丰富的可视化类型，多种数据格式无需转换直接使用，千万数据的前端展现，移动端优化，绚丽的特效，多渲染方案，跨平台使用，深度的交互式数据探索，多维数据的支持以及丰富的视觉编码手段，动态数据，通过 GL 实现更多更强大绚丽的三维可视化，无障碍访问（4.0+）

idea 中使用

1. 导入相关文件（下载地址：https://www.echartsjs.com/download.html）
   

官网选择一种图形

jsp页面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>





    


    

    

控制层

@RequestMapping("query")
    @ResponseBody
    public  Map query(){
       /* List list = echartsService.query();*/
        List> jilist = echartsService.queryJi();
        List> bilist = echartsService.queryBi();

        List classes = new ArrayList<>();
        List jis = new ArrayList<>();
        List bis = new ArrayList<>();

        for(int i=0;i map = new HashMap<>();
        map.put("classes",classes);
        map.put("jis",jis);
        map.put("bis",bis);
        return map;
    }

持久层

 
    
      SELECT c.cla_name AS '班级',AVG(s.stu_ji) AS '机试'from t_class c INNER JOIN
      t_stu s on c.cla_id=s.cla_id GROUP BY s.cla_id
    

    
    
    SELECT c.cla_name AS '班级',AVG(s.stu_bi) AS '笔试'from t_class c INNER JOIN
    t_stu s on c.cla_id=s.cla_id GROUP BY s.cla_id
    

数据库的建表结构

t_stu

t_class

设置外键

效果图

对你有帮助嘛，还不来打赏一分