目录

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>