用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>
相关推荐
前端李易安6 分钟前
Webpack 热更新(HMR)详解:原理与实现
前端·webpack·node.js
红绿鲤鱼8 分钟前
React-自定义Hook与逻辑共享
前端·react.js·前端框架
Domain-zhuo18 分钟前
什么是JavaScript原型链?
开发语言·前端·javascript·jvm·ecmascript·原型模式
小丁爱养花26 分钟前
前端三剑客(三):JavaScript
开发语言·前端·javascript
ZwaterZ34 分钟前
vue el-table表格点击某行触发事件&&操作栏点击和row-click冲突问题
前端·vue.js·elementui·c#·vue
码农六六34 分钟前
vue3封装Element Plus table表格组件
javascript·vue.js·elementui
西凉河的葛三叔38 分钟前
vue3+elementui-plus el-dialog全局配置点击空白处不关闭弹窗
前端·vue3·elementui-plus
徐同保39 分钟前
el-table 多选改成单选
javascript·vue.js·elementui
快乐小土豆~~39 分钟前
el-input绑定点击回车事件意外触发页面刷新
javascript·vue.js·elementui
周三有雨1 小时前
【面试题系列Vue07】Vuex是什么?使用Vuex的好处有哪些?
前端·vue.js·面试·typescript