目录

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。

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

<!--   这里的id 自定义一个唯一的标识符来命名该 <resultMap>，以便于识别和引用。--><!--   这里的type 是类的全路径名-->
<resultMap id="RecordVO" type="com.woniu.sys.pojo.RecordVO">
<!--        property 用于指定 Java 对象的属性，column 用于指定数据库查询结果中的列名。--><result property="number" column="number"></result><result property="day" column="day"></result></resultMap><select id="sickPeople" resultMap="RecordVO">SELECT count(*) as number,appointment_date as day FROM `tb_register_record` where register_status  != 3  group BY appointment_date</select>

 

2.前端代码

2.1 安装 Apach Echarts安装包：

npm install echarts --save

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

2.2 查找数据并赋值给Echarts

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

<template>
<!-- 容器 --><div ref="chartContainer" style="width: 100%; height: 400px"></div>
</template><script>
export default {name: "Index",data() {return {chart: null,};},methods: {//请求数据loadData() {this.$axios.get("/api/pc-zdy-sys/admin/sickPeople") //路径修改一下.then((response) => {const data = response.data.data;let PADdata = data.peopleAndDate; // 日期和就诊人数const days = PADdata.map((item) => item.day); // 提取日期const numbers = PADdata.map((item) => item.number); // 提取就诊人数//图表配置const options = {title: {text: "本周待诊断统计", // 设置主标题文本subtext: "本周", // 设置副标题文本},//X轴xAxis: {type: "category",data: days,},//Y轴yAxis: {type: "value",axisLabel: {formatter: "{value} 人", // 添加单位，例如 '人'},},//表格设置series: [{data: numbers,type: "bar",label: {show: true, // 显示标签position: "top", // 标签显示位置formatter: "{c} 人",},},],};this.chart.setOption(options);}).catch((error) => {console.error(error);});},},created() {},mounted() {//加载图表配置import("echarts").then((echarts) => {this.chart = echarts.init(this.$refs.chartContainer);this.loadData();}).catch((error) => {console.error("Failed to load echarts", error);});},
};
</script><style scoped>
</style>