用Apache Echarts展示数据

目录

1.后端代码

1.1 实体类：

1.2 SQL语句：

2.前端代码

2.1 安装 Apach Echarts安装包：

2.2 查找数据并赋值给Echarts

---

思路：后端查到数据，包装为map，map里有日期和每日就诊人数，返回给前端。

前端X轴日期，Y轴人数，配置数据源即可。

1.后端代码

1.1 实体类：

@Data
//包含就诊人数和日期的数据
public class RecordVO {
  private Integer number;
  @JsonFormat(pattern = "yyyy-MM-dd",timezone = "GMT+8")
  private Date day;
}

1.2 SQL语句：

查询处理的结果需要封装一个对象。因为这个对象不在数据库里，所有需要自定义。需要用到ResultMap。

处理好映射关系就可以了。

    


        
        
    

    

        SELECT count(*) as number,appointment_date as day FROM `tb_register_record` where register_status  != 3  group BY appointment_date

    

 

2.前端代码

2.1 安装 Apach Echarts安装包：

npm install echarts --save

这里--save 参数的作用是将 echarts 包添加到项目的 package.json 文件中的 dependencies 或 devDependencies 中，并将版本号保存。具体效果取决于您使用的是哪个版本的 npm。

2.2 查找数据并赋值给Echarts

我直接贴完整代码，基本上你只要改请求路径就可以了。