<template>
|
<el-collapse class="report-panel">
|
<el-collapse-item title="支出大类占比与趋势" name="category">
|
<div class="charts">
|
<div ref="pieRef"></div>
|
<div ref="trendRef"></div>
|
</div>
|
</el-collapse-item>
|
</el-collapse>
|
</template>
|
|
<script setup>
|
import { ref, onMounted, nextTick } from "vue";
|
import * as echarts from "echarts";
|
import { getExpenseCategoryReport } from "@/api/financialManagement/expenseManagement";
|
const pieRef = ref(),
|
trendRef = ref();
|
onMounted(async () => {
|
const r = await getExpenseCategoryReport({});
|
const share = r.data?.share || [],
|
trend = r.data?.trend || [];
|
await nextTick();
|
echarts.init(pieRef.value).setOption({
|
title: { text: "支出大类占比", left: "center" },
|
tooltip: { trigger: "item" },
|
series: [
|
{
|
type: "pie",
|
radius: ["35%", "68%"],
|
data: share.map((x) => ({ name: x.categoryName, value: x.amount })),
|
},
|
],
|
});
|
const months = [...new Set(trend.map((x) => x.month))],
|
names = [...new Set(trend.map((x) => x.categoryName))];
|
echarts.init(trendRef.value).setOption({
|
title: { text: "支出大类月度趋势", left: "center" },
|
tooltip: { trigger: "axis" },
|
legend: { top: 28 },
|
xAxis: { type: "category", data: months },
|
yAxis: { type: "value" },
|
series: names.map((name) => ({
|
name,
|
type: "line",
|
data: months.map(
|
(month) =>
|
trend.find((x) => x.month === month && x.categoryName === name)
|
?.amount || 0
|
),
|
})),
|
});
|
});
|
</script>
|
|
<style scoped>
|
.report-panel {
|
margin-bottom: 12px;
|
}
|
.charts {
|
display: grid;
|
grid-template-columns: 1fr 2fr;
|
gap: 12px;
|
}
|
.charts > div {
|
height: 300px;
|
}
|
@media (max-width: 900px) {
|
.charts {
|
grid-template-columns: 1fr;
|
}
|
}
|
</style>
|
