用Apache Echarts展示数据

目录

1.后端代码

[1.1 实体类:](#1.1 实体类:)

[1.2 SQL语句:](#1.2 SQL语句:)

2.前端代码

[2.1 安装 Apach Echarts安装包:](#2.1 安装 Apach Echarts安装包:)

[2.2 查找数据并赋值给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 文件中的 dependenciesdevDependencies 中,并将版本号保存。具体效果取决于您使用的是哪个版本的 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>
相关推荐
小阮的学习笔记1 分钟前
Vue3中使用LogicFlow实现简单流程图
javascript·vue.js·流程图
YBN娜2 分钟前
Vue实现登录功能
前端·javascript·vue.js
阳光开朗大男孩 = ̄ω ̄=2 分钟前
CSS——选择器、PxCook软件、盒子模型
前端·javascript·css
minDuck6 分钟前
ruoyi-vue集成tianai-captcha验证码
java·前端·vue.js
小政爱学习!27 分钟前
封装axios、环境变量、api解耦、解决跨域、全局组件注入
开发语言·前端·javascript
魏大帅。32 分钟前
Axios 的 responseType 属性详解及 Blob 与 ArrayBuffer 解析
前端·javascript·ajax
花花鱼39 分钟前
vue3 基于element-plus进行的一个可拖动改变导航与内容区域大小的简单方法
前端·javascript·elementui
k093342 分钟前
sourceTree回滚版本到某次提交
开发语言·前端·javascript
EricWang13581 小时前
[OS] 项目三-2-proc.c: exit(int status)
服务器·c语言·前端
September_ning1 小时前
React.lazy() 懒加载
前端·react.js·前端框架