123 lines
3.5 KiB
Vue
123 lines
3.5 KiB
Vue
<template>
|
|
<div class="bill-chart common-chart"
|
|
v-loading="billStore.isLoading"
|
|
element-loading-text="正在加载中...">
|
|
<div class="chart-container card-item">
|
|
<div class="content">
|
|
<span class="title">📊收支统计</span>
|
|
</div>
|
|
<div class="chart" ref="billDailyChartRef"/>
|
|
</div>
|
|
|
|
<div class="chart-container card-item">
|
|
<div class="content">
|
|
<span class="title">📊类别统计</span>
|
|
</div>
|
|
<div class="chart" ref="billCategoryChartRef"/>
|
|
</div>
|
|
|
|
<div class="chart-container card-item">
|
|
<div class="content">
|
|
<span class="title">📊账本统计</span>
|
|
</div>
|
|
<div class="chart" ref="billBookChartRef"/>
|
|
</div>
|
|
|
|
<div class="chart-container card-item">
|
|
<div class="content">
|
|
<span class="title">📊排行榜</span>
|
|
</div>
|
|
<div class="chart rank-chart">
|
|
<bill-rank />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import BillRank from '@/components/Bill/BillRank.vue'
|
|
import { onMounted, ref, watch } from 'vue'
|
|
import * as echarts from 'echarts'
|
|
import { lineChartOptions, barChartOptions, pieChartOptions } from 'vue3-common/utils/eChartsUtil'
|
|
import { useBillStore } from '@/store/bill.ts'
|
|
import { useAppStore } from '@/store/app.ts'
|
|
import { isMobile } from 'vue3-common/utils/layoutUtil'
|
|
|
|
const billStore = useBillStore()
|
|
const appStore = useAppStore()
|
|
|
|
const billDailyChartRef = ref<HTMLElement>()
|
|
const billBookChartRef = ref<HTMLElement>()
|
|
const billCategoryChartRef = ref<HTMLElement>()
|
|
|
|
let billDailyChart: echarts.ECharts
|
|
let billBookChart: echarts.ECharts
|
|
let billCategoryChart: echarts.ECharts
|
|
|
|
watch(() => billStore.isRefresh, () => {
|
|
updateChart()
|
|
})
|
|
|
|
onMounted(() => {
|
|
billDailyChart = echarts.init(billDailyChartRef.value as HTMLElement, appStore.isDark ? 'dark' : null)
|
|
billBookChart = echarts.init(billBookChartRef.value as HTMLElement, appStore.isDark ? 'dark' : null)
|
|
billCategoryChart = echarts.init(billCategoryChartRef.value as HTMLElement, appStore.isDark ? 'dark' : null)
|
|
})
|
|
|
|
const updateChart = () => {
|
|
const MAX_CATEGORY_COUNT = 5
|
|
|
|
// 收支统计图
|
|
const dailyXAxis = billStore.billDateStatsList.map((item) => item.name)
|
|
const dailyYAxis = billStore.billDateStatsList.map((item) => item.value)
|
|
billDailyChart.setOption(lineChartOptions('日期', dailyXAxis, '金额（元）', dailyYAxis))
|
|
billDailyChart.setOption({
|
|
series: [{
|
|
itemStyle: {
|
|
color: billStore.billType === 'expensive' ? '#CA6C65' : '#6FBB69'
|
|
},
|
|
markPoint: {
|
|
label: {
|
|
color: '#FFFFFF'
|
|
}
|
|
},
|
|
label: {
|
|
show: false
|
|
}
|
|
}]
|
|
})
|
|
|
|
// 账本统计图
|
|
const bookXAxis = billStore.billBookStatsList.map((item) => item.name)
|
|
const bookYAxis = billStore.billBookStatsList.map((item) => item.value)
|
|
billBookChart.setOption(barChartOptions('账本', bookXAxis, '金额（元）', bookYAxis))
|
|
billBookChart.setOption({
|
|
series: [{
|
|
itemStyle: {
|
|
color: billStore.billType === 'expensive' ? '#CA6C65' : '#6FBB69'
|
|
},
|
|
markPoint: {
|
|
label: {
|
|
color: '#FFFFFF'
|
|
}
|
|
}
|
|
}]
|
|
})
|
|
|
|
// 类别统计图
|
|
const billCategoryList = billStore.billCategoryStatsList.slice(0, MAX_CATEGORY_COUNT)
|
|
billCategoryChart.setOption(pieChartOptions('rank', '元', billCategoryList))
|
|
|
|
if (isMobile()) {
|
|
billCategoryChart.setOption({
|
|
series: [{
|
|
radius: ['20%', '50%'],
|
|
label: {
|
|
formatter: '{b}: {d}%'
|
|
}
|
|
}]
|
|
})
|
|
}
|
|
}
|
|
</script>
|