目录
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>
