129 lines
3.2 KiB
Vue
129 lines
3.2 KiB
Vue
<template>
|
|
<div class="food-chart"
|
|
element-loading-text="正在加载中...">
|
|
<div class="chart-container card-item">
|
|
<div class="content">
|
|
<span class="title">📊记录统计</span>
|
|
</div>
|
|
<div class="chart" ref="foodDailyChartRef"/>
|
|
</div>
|
|
<div class="chart-container card-item">
|
|
<div class="content">
|
|
<span class="title">📊菜谱统计</span>
|
|
</div>
|
|
<div class="chart" ref="foodCategoryChartRef"/>
|
|
</div>
|
|
<div class="chart-container card-item">
|
|
<div class="content">
|
|
<span class="title">📊排行榜</span>
|
|
</div>
|
|
<div class="chart rank-chart">
|
|
<food-rank v-if="foodStore.rankStats.length > 0"/>
|
|
<el-empty v-else description="暂无数据"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import FoodRank from '@/components/Stats/FoodRank.vue'
|
|
import { onMounted, ref, watch } from 'vue'
|
|
import * as echarts from 'echarts'
|
|
import { lineChartOptions, pieChartOptions } from 'vue3-common/utils/eChartsUtil'
|
|
import { useFoodStore } from '@/store/food'
|
|
import { useAppStore } from '@/store/app.ts'
|
|
|
|
const foodStore = useFoodStore()
|
|
const appStore = useAppStore()
|
|
|
|
const foodDailyChartRef = ref<HTMLElement>()
|
|
const foodCategoryChartRef = ref<HTMLElement>()
|
|
|
|
let foodDailyChart: echarts.ECharts
|
|
let foodCategoryChart: echarts.ECharts
|
|
|
|
watch(() => foodStore.isRefresh, () => {
|
|
updateChart()
|
|
})
|
|
|
|
onMounted(() => {
|
|
foodDailyChart = echarts.init(foodDailyChartRef.value as HTMLElement, appStore.isDark ? 'dark' : null)
|
|
foodCategoryChart = echarts.init(foodCategoryChartRef.value as HTMLElement, appStore.isDark ? 'dark' : null)
|
|
})
|
|
|
|
const updateChart = () => {
|
|
const MAX_COUNT = 5
|
|
|
|
// 记录统计图
|
|
const dailyXAxis = foodStore.recordStats.slice(0, MAX_COUNT).map((item) => item.name)
|
|
const dailyYAxis = foodStore.recordStats.slice(0, MAX_COUNT).map((item) => item.value)
|
|
foodDailyChart.setOption(lineChartOptions('日期', dailyXAxis, '次数（次）', dailyYAxis))
|
|
|
|
// 类别统计图
|
|
const foodCategoryData = foodStore.categoryStats.slice(0, MAX_COUNT)
|
|
foodCategoryChart.setOption(pieChartOptions('category', '个', foodCategoryData))
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.food-chart {
|
|
display: grid;
|
|
grid-template-rows: repeat(3, 1fr);
|
|
gap: 10px;
|
|
|
|
.chart-container {
|
|
display: grid;
|
|
grid-template-rows: 40px 1fr;
|
|
|
|
.content {
|
|
padding: 0 5px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
border-bottom: 1px solid var(--el-color-primary);
|
|
|
|
.title {
|
|
font-size: 1em;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.chart {
|
|
height: 300px;
|
|
width: 100%;
|
|
}
|
|
|
|
.rank-chart {
|
|
overflow: auto;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 5px;
|
|
|
|
.rank-item {
|
|
padding: 10px;
|
|
display: grid;
|
|
grid-template-columns: 20px 1fr 80px;
|
|
align-items: center;
|
|
|
|
.rank-amount {
|
|
justify-self: flex-end;
|
|
}
|
|
}
|
|
|
|
.rank-item:nth-child(1) {
|
|
color: #d4af37;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.rank-item:nth-child(2) {
|
|
color: #a8a8a8;
|
|
}
|
|
|
|
.rank-item:nth-child(3) {
|
|
color: #b87333;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|