基于若依框架（分离版）开发志愿填报指导系统（下）

这是基于若依框架（分离版）开发志愿填报指导系统最后一篇文章了。希望大家点赞、评论支持作者。

5.志愿填报指导项目图表功能模块

新建myIndex.vue文件实现大学录取情况图标展示功能：

1.前端vue组件化开发，表格组件、图标组件等。

创建招生记录数据表格组件ScoreTable.vue，组件需要接收数据值为props: ["title", "tableData"]

<template>
  <div class="editor-container" style="width: 560px">
    <el-tag>{{ title }}</el-tag>
    <el-table 
    :data="tableData"
    height="250" border style="width: 100%">
      <el-table-column prop="lqpc" label="录取批次" width="110">
      </el-table-column>
      <el-table-column prop="year" label="年份" width="80"> </el-table-column>
      <el-table-column prop="lowsore" label="最低分" width="80">
      </el-table-column>
      <el-table-column prop="maxsore" label="最高分" width="80"> </el-table-column>
       <el-table-column prop="rs" label="录取人数" width="80"> </el-table-column>
      <el-table-column prop="memo" label="备注" width="100"> </el-table-column>
    </el-table>
  </div>
</template>
<script>
import resize from "./mixins/resize";
export default {
  props: ["title", "tableData"],
  mixins: [resize],
  data() {
    return {
    };
  },
};
</script>
<style lang="scss" scoped>
.editor-container {
  padding: 5px;
  background-color: rgb(240, 242, 245);
  position: relative;
}
</style>

主页使用自定义组件ScoreTable.vue

import ScoreTable from "./dashboard/ScoreTable.vue";

绑定表格数据

 <el-form :inline="true">
          <el-form-item v-for="item in this.myData.tableData" :key="item.title">
              <score-table :title="item.title" :tableData="item.children"/>
          </el-form-item>
 </el-form>

后端返回数据格式：

{
    "msg": "操作成功",
    "code": 200,
    "data": {
        "tableData": [
            {
                "children": [
                    {
                        "schoolName": "清华大学",
                        "lqtype": "普通理科",
                        "lqpc": "本科一批",
                        "rs": "32",
                        "lowsore": "675",
                        "maxsore": "702",
                        "year": "2021"
                    },
                    {
                        "schoolName": "清华大学",
                        "lqtype": "普通理科",
                        "lqpc": "本科一批",
                        "rs": "30",
                        "lowsore": "688",
                        "maxsore": "717",
                        "year": "2020"
                    }
                ],
                "title": "普通理科_本科一批"
            }
        ]
    }
}

2.后端针对查询的数据List<实体类>进行分组对数据处理为Echart所需的数据格式。

Echart的数据格式我们使用key-value方式的数据格式。

数据库中查到的数据源

目标数据源

需要在service中进行数据转化，这里就不做展示了。

前段设置初始化echart代码段，需要映射数据纬度到X、Y轴上。

  this.chart.setOption({
        dataset: {
          // 用 dimensions 指定了维度的顺序。直角坐标系中，如果 X 轴 type 为 category，
          // 默认把第一个维度映射到 X 轴上，后面维度映射到 Y 轴上。
          // 如果不指定 dimensions，也可以通过指定 series.encode
          // 完成映射，参见后文。
          dimensions: [
            "zyname",
            "2020value",
            "2021value",
          ],
          source: chartData,
        },
        legend: {},
        xAxis: [
          {
            type: "category",
            axisLabel: {
              interval: 0,
              rotate: 40,
            },
          },
        ],
        grid: {
          left: 10,
          right: 10,
          bottom: 20,
          top: 30,
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
            label: {
              show: true,
            },
          },
        },
        yAxis: {},
        series: [
          {
            name: "2020招生人数",
            seriesLayoutBy: "row",
            smooth: true,
            type: "bar",
            // data: expectedData,
            animationDuration: 2800,
            animationEasing: "cubicInOut",
          },
          {
            name: "2021招生人数",
            smooth: true,
            type: "bar",
            seriesLayoutBy: "row",
            // data: actualData,
            animationDuration: 2800,
            animationEasing: "quadraticOut",
          },
        ],
      });
    

6.基于若依框架开发高考填报项目总结

1.在若依框架新建项目如何调用这个我踩了一下坑，好在找到解决方案。

2.后端构造Echart数据需要的格式，这个项目里我们都是利用java对stream分组操作进行数据构造。

3.利用Element-ui的组件进行开发，真的是简单。

如：图片滚动展示 Carousel 走马灯

学科类的展示 Collapse 折叠面板

多级下拉框级联的使用Cascader 级联选择器

整个项目真正枯燥的是数据库的数据收集，数据的整理，数据表的建立，在项目开发过程中不断的重复修正循环往复。总结出来也没有多少知识点。做到开发后期大先遇到这些问题主要原因在项目开始时应整理好自己项目需求。开发过程中清楚若依分离版框架开发流程，掌握了为Echart提供数据整理的方式。