当前位置：首页 > backend >正文

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

backend 2025/8/27 15:07:50

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

表单建立

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

第一个：生成表单

建议可以先建立主界面目录后再配置代码生成的参数。比如菜单管理这里就确定好这个页面的目录名称，后续可以直接选用后，运行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>