RuoYi-Vue3-FastAPI框架的功能实现（中）

最近一直忙着其他没没来得及做文档，这篇主要是帮助配置表单的展示与图形的展示。还是已实际项目的总结代码做个使用记录。

表单建立

在上一篇已经大概讲了建立，这里再补充遇到的几点问题。

第一个：生成表单

建议可以先建立主界面目录后再配置代码生成的参数。比如菜单管理这里就确定好这个页面的目录名称，后续可以直接选用后，运行sql，菜单会自动在目录下面。

第二个：显示缺少主键报错和某字段不存在

显示缺少主键报错，可能是生成代码bug，一般来说不做主键配置也可以，但是如果出现了，配置也方便，选择没有重复项的字段做为主键即可。在文件entity中do路径下的py文件。

这里需要到后端添加主键信息即可，比如

serv_id = Column(String(255), nullable=False, comment='serv_id', primary_key=True)

一般出现字段不存在或者不匹配的报错。一般就是在dao文件下的py文件，这里只需要将报错的字段改成正确的。比如报错area99_new，实际上应该是area_99_new才对，这是一般就是后端生成这里没有正常识别，在这里改正确即可。

第三个：表单界面我不想展示，但导出数据时我想保留数据，或者后台保留但是前端不显示

这个我们可以直接使用v_if来选择，同样，可以在js中配置v_if来配置哪些字段哪时候展示。

      <el-table-column label="serv_id" align="center" prop="servId" v-if="false"/>
      <el-table-column label="2" align="center" prop="prodName" v-if="false"/>
      <el-table-column label="3" align="center" prop="regionName" v-if="false"/>

第四个：页面展示数修改

可以修改pagesize即可。

导出功能时间太短

这个主要是若依配置的导出时间超时时间为10秒，只需要把timeout改大即可，这里单位为毫秒。

建立图表

原本发现rouyi好像是使用v-chart，但是后续使用不了。echart兼容，最终决定使用。使用起来也方便。

基础使用

<template>
  <div ref="chart" style="width: 600px; height: 400px;"></div>
</template>

<script>
import * as echarts from "echarts";

export default {
  mounted() {
    // 初始化图表
    const chart = echarts.init(this.$refs.chart);

    // 配置图表数据
    const option = {
      title: { text: "ECharts 折线图示例" },
      tooltip: {},
      legend: { data: ["销量"] },
      xAxis: { data: ["1月", "2月", "3月", "4月", "5月", "6月"] },
      yAxis: {},
      series: [
        { name: "销量", type: "line", data: [150, 230, 224, 218, 135, 147] }
      ]
    };

    // 渲染图表
    chart.setOption(option);

    // 窗口大小变化时自适应
    window.addEventListener("resize", () => chart.resize());
  },
  beforeDestroy() {
    // 组件销毁时移除监听
    window.removeEventListener("resize", () => chart.resize());
  }
};
</script>

具体可以分为三步骤

下载和引入echart

npm install echarts --save

<script>
import * as echarts from "echarts"
</script>

配置mounted

在rouyi中引用的数据都是从类似listPon_tj中获得数据，可以参考这个方法，相当于发送以this.queryParams为参数，返回response赋值。因此，我们可以利用这点，直接在方法中配置图表数据，下面就是一个简单配置：

通过打印我们发现，数据返回值在response.rows中。

  mounted() {
    // 初始化图表

    const chart = echarts.init(this.$refs.chart);

    listPon_tj(this.queryParams).then(response => {
      // 配置图表数据  常规配置
      // 配置 ECharts 图表的选项对象
      // option 包含以下属性：
      // - title: 图表标题，文本为 "ECharts 折线图示例"
      // - tooltip: 提示框组件，默认配置
      // - legend: 图例组件，显示 "销量"
      // - xAxis: x 轴配置，类型为类目轴，数据来源于 response.rows 中的 area3Name 字段
      // - yAxis: y 轴配置，类型为数值轴
      // - series: 系列列表，此处为柱状图，数据来源于 response.rows 中的 ponNumber 字段
      const option = {
        title: { text: "ECharts 柱状图示例" },
        tooltip: {},
        legend: { data: ["故障数", "影响用户数"] },
        xAxis: { type: "category", data: response.rows.map(v => v.area3Name) },
        yAxis: { type: "value" },
        series: [
          { name: "故障数", type: "bar", data: response.rows.map(v => v.ponNumber) },
          { name: "影响用户数", type: "bar", data: response.rows.map(v => v.userNumber) }
        ]
      };

    // 渲染图表
      chart.setOption(option);
    });

    // 窗口大小变化时自适应
    window.addEventListener("resize", () => chart.resize());
  },
    beforeDestroy() {
    // 组件销毁时移除监听
    window.removeEventListener("resize", () => chart.resize());
  }

这样就完成了图形的配置。

当然可以进阶版本，调整一下样式和展示，可以通过AI来帮助。下面就是复合型柱状图的配置项，保留所有标签，并且能根据点击单独展示柱状图。

  mounted() {
    // 初始化图表

    const chart = echarts.init(this.$refs.chart);

    listPon_tj(this.queryParams).then(response => {
      // 配置图表数据  常规配置
      // 配置 ECharts 图表的选项对象
      // option 包含以下属性：
      // - title: 图表标题，文本为 "ECharts 折线图示例"
      // - tooltip: 提示框组件，默认配置
      // - legend: 图例组件，显示 "销量"
      // - xAxis: x 轴配置，类型为类目轴，数据来源于 response.rows 中的 area3Name 字段
      // - yAxis: y 轴配置，类型为数值轴
      // - series: 系列列表，此处为柱状图，数据来源于 response.rows 中的 ponNumber 字段
      const option = {
        title: { text: "故障影响情况" },
        tooltip: {},
        legend: { data: ["故障数", "影响用户数"] },
        grid: { left: 80, right: 30, bottom: 60, top: 60, containLabel: true }, 
        // 增加 grid 以防止标签被截断
        xAxis: {
          type: "category",
          data: response.rows.map(v => v.area3Name),
          axisLabel: {
        interval: 0,
        rotate: 30, // 旋转标签，防止重叠
        formatter: function(value) {
          // 长标签自动换行
          if (value.length > 6) {
            return value.match(/.{1,6}/g).join('\n');
          }
          return value;
        }
          }
        },
        yAxis: { type: "value" },
        series: [
          { name: "故障数", type: "bar", data: response.rows.map(v => v.ponNumber) },
          { name: "影响用户数", type: "bar", data: response.rows.map(v => v.userNumber) }
        ]
      };

    // 渲染图表
      chart.setOption(option);
    });

    // 窗口大小变化时自适应
    window.addEventListener("resize", () => chart.resize());
  },
    beforeDestroy() {
    // 组件销毁时移除监听
    window.removeEventListener("resize", () => chart.resize());
  }

在template中展示图表

这里直接对其进行引用即可。即在ref中引用图表即可。

    <div>
      <h1 class="title" align="center" style="margin: 24px 0;">表图</h1>
      <div ref="chart" style="width: 80vw; max-width: 1200px; height: 50vh; min-height: 360px; margin: 0 auto;"></div>
  </div>

总结

图表相关配置和样式可以从官网中套出echart样式即可，配置在option中，具体细节参数可以参考官网或者AI补充代码即可。

echart官网：Apache ECharts