Thymeleaf+JavaScript+Echarts通用可视化简单实践

在 SpringBoot+MyBatisPlus+Redis+Thymeleaf+Echarts 实现学生成绩管理系统中我们 实现了可视化柱状图和扇形图，本文基于该项目总结一个项目中通用的、实现类似的可视化实践，希望对初步使用Echarts有一些帮助。

---

1.准备统计信息实体类

它可以用来接收查询结果，也就是Mybatis的resultMap封装类型。

/**
 * 统计
 * @author Huishi
 */
@Data
@NoArgsConstructor
@AllArgsConstructor
@ToString
public class Statistics {
   
    private String className;
    private Double maxScore;
    private Double minScore;
    private Double avgScore;
    private Integer countStudent;// 学生人数
}

2.将统计信息List集合变为MapList集合

原来的List集合中是不同班级的统计信息对象，例如

第一个对象：属性是1班，最高分xxx，最低分xxx
第二个对象：属性是2班，最高分xxx，最低分xxx......

但是Echarts比如要显示分数柱状图，那么就是

*最高分*：[1班的最高分, 2班的最高分, ......]
*最低分*：[1班的最低分, 2班的最低分, ......]

所以我们可以把它变成类似的结构，那么最高分就是一个Map的key，value就是每个对象的最高分属性构成的List集合。这样在前端直接get方法就可以获取对应的值了。

如何确保一定是按班级顺序排列的？

只要你在数据访问层的SQL语句中order by class_name，返回的类型是List<Statistics> 就是有序的，那么对集合中的对象依次变为map并获取对应的key这一顺序，也是有序的。

    /**
     * Pojo -> Map<String, Object>
     * @param obj
     * @return
     * @throws Exception
     */
    public static Map<String,Object> object2Map(Object obj) throws Exception{
   
        Map<String,Object> map = new HashMap<String, Object>();
        Field[] fields = obj.getClass().getDeclaredFields();
        for(Field field:fields){
   
            field.setAccessible(true