feat:搭建基本框架
This commit is contained in:
172
src/components/Stats/FoodChart.vue
Normal file
172
src/components/Stats/FoodChart.vue
Normal file
@@ -0,0 +1,172 @@
|
||||
<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 />
|
||||
</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, barChartOptions, pieChartOptions } from 'vue3-common/utils/eChartsUtil'
|
||||
import { useFoodStore } from '@/store/food'
|
||||
import { useAppStore } from '@/store/app.ts'
|
||||
import type { IStatsChart } from 'vue3-common/types'
|
||||
import { isMobile } from 'vue3-common/utils/layoutUtil'
|
||||
|
||||
const foodStore = useFoodStore()
|
||||
const appStore = useAppStore()
|
||||
|
||||
const foodDailyChartRef = ref<HTMLElement>()
|
||||
const foodCategoryChartRef = ref<HTMLElement>()
|
||||
const billRankChartRef = ref<HTMLElement>()
|
||||
|
||||
let foodDailyChart: echarts.ECharts
|
||||
let foodCategoryChart: echarts.ECharts
|
||||
let billRankChart: 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)
|
||||
// billRankChart = echarts.init(billRankChartRef.value as HTMLElement, appStore.isDark ? 'dark' : null)
|
||||
})
|
||||
|
||||
const updateChart = () => {
|
||||
const MAX_CATEGORY_COUNT = 5
|
||||
const MAX_RANK_COUNT = 10
|
||||
|
||||
// 记录统计图
|
||||
// const dailyXAxis = foodStore.billDateStatsList.map((item) => item.name)
|
||||
// const dailyYAxis = foodStore.billDateStatsList.map((item) => item.value)
|
||||
const dailyXAxis = ['2024-01', '2024-02']
|
||||
const dailyYAxis = ['10', '6']
|
||||
foodDailyChart.setOption(lineChartOptions('日期', dailyXAxis, '次数（次）', dailyYAxis))
|
||||
//
|
||||
// // 账本统计图
|
||||
// const bookXAxis = foodStore.billBookStatsList.map((item) => item.name)
|
||||
// const bookYAxis = foodStore.billBookStatsList.map((item) => item.value)
|
||||
// billBookChart.setOption(barChartOptions('账本', bookXAxis, '金额（元）', bookYAxis))
|
||||
// billBookChart.setOption({
|
||||
// series: [{
|
||||
// itemStyle: {
|
||||
// color: foodStore.billType === 'expensive' ? '#CA6C65' : '#6FBB69'
|
||||
// },
|
||||
// markPoint: {
|
||||
// label: {
|
||||
// color: '#FFFFFF'
|
||||
// }
|
||||
// }
|
||||
// }]
|
||||
// })
|
||||
//
|
||||
// 类别统计图
|
||||
const foodCategoryList = [
|
||||
{ value: 12, name: '家常菜' },
|
||||
{ value: 10, name: '鲁菜' },
|
||||
{ value: 8, name: '川菜' },
|
||||
{ value: 5, name: '淮扬菜' },
|
||||
{ value: 2, name: '其他' }
|
||||
]
|
||||
foodCategoryChart.setOption(pieChartOptions('category', '次', foodCategoryList))
|
||||
//
|
||||
// // 排行榜统计图
|
||||
// const billRankList: IStatsChart[] = []
|
||||
// const resultList = foodStore.billRecordList.filter((item) => item.type === foodStore.billType)
|
||||
// resultList.sort((a, b) => b.amount - a.amount).forEach((item) => {
|
||||
// billRankList.push({
|
||||
// name: item.content,
|
||||
// value: item.amount
|
||||
// })
|
||||
// })
|
||||
//
|
||||
// if (!isMobile()) {
|
||||
// billRankChart.setOption(pieChartOptions('rank', '元', billRankList.slice(0, MAX_RANK_COUNT)))
|
||||
// }
|
||||
}
|
||||
</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 #009FA8;
|
||||
|
||||
.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>
|
||||
Reference in New Issue
Block a user