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

This commit is contained in:
Strange 2024-02-14 03:33:35 +08:00
parent 20e91b50d4
commit ddb1b78890
4 changed files with 41 additions and 10 deletions

View File

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

View File

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

View File

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

View File

@ -10,10 +10,10 @@ import java.util.List;
@Mapper @Mapper
public interface ChatMapper { 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" + "FROM accounttb \n" +
"WHERE `month` IS NOT NULL\n" + "WHERE `month` IS NOT NULL\n" +
"GROUP BY month \n" + "GROUP BY month,kind \n" +
"ORDER BY month;\n") "ORDER BY month;\n")
public List<ChatDomain> pyline(); public List<ChatDomain> pyline();
} }