添加图表优化图表显示逻辑

RuoYi-Vue/ruoyi-admin/src/main/java/com/ruoyi/web/controller/chart/chat.java

@@ -26,14 +26,21 @@ public class chat {
 //    @ResponseBody
     public String Polyline(Model model){
         List<ChatDomain> dataList =  chatMapper.pyline();
-        List<BigDecimal> moneyList  = new ArrayList<>();
+        List<BigDecimal> moneyIncomeList  = new ArrayList<>();
+        List<BigDecimal> expenditureList =  new ArrayList<>();
         List<Integer> monthList = new ArrayList<>();
         for (ChatDomain chatDomain:dataList){
-            moneyList.add(chatDomain.getTotal_money());
+            if (chatDomain.getKind()==0){
+                moneyIncomeList.add(chatDomain.getTotal_money());
+            }
+            if (chatDomain.getKind()==1){
+                expenditureList.add(chatDomain.getTotal_money());
+
+            }
             monthList.add(chatDomain.getMonth());
         }
-        model.addAttribute("moneyList",moneyList);
-        model.addAttribute("monthList",monthList);
+        model.addAttribute("moneyIncomeList",moneyIncomeList);
+        model.addAttribute("expenditureList",expenditureList);
         return "/polyline";
     }
 }

RuoYi-Vue/ruoyi-admin/src/main/resources/templates/polyline.html

@@ -7,6 +7,7 @@
     <style>
         canvas {
             border: 1px solid #ccc;
+            margin-top: 20%;
         }
     </style>
 </head>
@@ -22,19 +23,32 @@ https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js
 
     // 定义从后端传递过来的数据
     var monthList = /*[[${monthList}]]*/ [];
-    var moneyList = /*[[${moneyList}]]*/ [];
+    var moneyIncomeList = /*[[${moneyIncomeList}]]*/ [];
+    var expenditureList = /*[[${expenditureList}]]*/ [];
 
     // 指定图表的配置项和数据
     option = {
+        title: {
+            text: '消费分析'
+        },
         xAxis: {
             type: 'category',
             data: monthList  // 使用从后端传递过来的月份数据
         },
+        legend: {
+            data: ['收入', '支出']
+        },
         yAxis: {},
         series: [
             {
-                data: moneyList,  // 使用从后端传递过来的金额数据
-                type: 'line'
+                data: moneyIncomeList,  // 使用从后端传递过来的金额数据
+                type: 'line',
+                name:"收入",
+            },
+            {
+                data: expenditureList,  // 使用从后端传递过来的金额数据
+                type: 'line',
+                name:"支出"
             }
         ]
     };

RuoYi-Vue/ruoyi-homejizhang/src/main/java/com/ruoyi/app/system/domain/ChatDomain.java

@@ -9,6 +9,8 @@ public class ChatDomain {
 
     private  Integer  month;
 
+    private Integer kind;
+
     public Integer getId() {
         return id;
     }
@@ -32,4 +34,12 @@ public class ChatDomain {
     public void setMonth(Integer month) {
         this.month = month;
     }
+
+    public Integer getKind() {
+        return kind;
+    }
+
+    public void setKind(Integer kind) {
+        this.kind = kind;
+    }
 }

RuoYi-Vue/ruoyi-homejizhang/src/main/java/com/ruoyi/app/system/mapper/ChatMapper.java

@@ -10,10 +10,10 @@ import java.util.List;
 @Mapper
 public interface ChatMapper {
 
-    @Select("SELECT SUM(money) AS total_money, month \n" +
+    @Select("SELECT SUM(money) AS total_money, month ,kind \n" +
             "FROM accounttb \n" +
             "WHERE `month` IS NOT NULL\n" +
-            "GROUP BY month \n" +
+            "GROUP BY month,kind \n" +
             "ORDER BY month;\n")
     public List<ChatDomain> pyline();
 }