lonewolfyx/visiting-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 优化中控台首页的今日小时趋势

Browse Source
This commit is contained in:
lonewolfyx 2025-01-13 15:55:05 +08:00
parent 6e478efaab
commit 577571cf9f
2 changed files with 95 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/api/RegistVisitApi/RegistVisitApi.js
View File

@ -133,3 +133,11 @@ export const getIdCardVisitHistory = (data) => {
isEncrypt: false
})
}
// 获取当天小时来访趋势
export const getVisitHourTrend = () => {
return request({
method: 'get',
url: '/visiting/visit/stat_hour',
})
}

161
src/components/IndexComponents/TodayVisitTrend.vue
View File

@ -9,16 +9,11 @@
<script setup>
import Vechart from 'vue-echarts'
import * as echarts from 'echarts/core';
import {
TitleComponent,
ToolboxComponent,
TooltipComponent,
GridComponent,
LegendComponent
} from 'echarts/components';
import { LineChart } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
import {GridComponent, LegendComponent, TitleComponent, ToolboxComponent, TooltipComponent} from 'echarts/components';
import {LineChart} from 'echarts/charts';
import {UniversalTransition} from 'echarts/features';
import {CanvasRenderer} from 'echarts/renderers';
import {getVisitHourTrend} from '@/api/RegistVisitApi/RegistVisitApi.js';
defineOptions({
@ -37,73 +32,91 @@ echarts.use([
]);
const times = Array.from({length: 24}, (_, i) => `${i}:00`)
const data = Array.from({length: 24}, (_, i) => Math.floor(Math.random() * 100))
const options = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
const options = ref({})
onMounted(() => {
getData()
})
const getData = async () => {
const res = await getVisitHourTrend()
const data = res.data.map(item => {
return {
...item,
name: item.hour,
value: item.count
}
})
setChartOptions(data)
}
const setChartOptions = (data) => {
options.value = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
}
},
grid: {
top: '10%',
left: '3%',
right: '3%',
bottom: '10%',
},
xAxis: {
type: 'category',
data: times,
axisTick: {
show: false
},
axisLine: {
show: false
}
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Line 1',
type: 'line',
stack: 'Total',
smooth: true,
lineStyle: {
width: 0
grid: {
top: '10%',
left: '3%',
right: '3%',
bottom: '10%',
},
xAxis: {
type: 'category',
data: times,
axisTick: {
show: false
},
showSymbol: false,
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#004564'
},
{
offset: 1,
color: '#00a0df'
}
])
},
emphasis: {
focus: 'series'
},
// name: '今日来访',
data: data,
// type: 'line',
// smooth: true
// barWidth: '35%',
// itemStyle: {
// color: '#004564'
// }
}
]
axisLine: {
show: false
}
},
yAxis: {
type: 'value'
},
series: [
{
name: '今日来访',
type: 'line',
stack: 'Total',
smooth: true,
lineStyle: {
width: 0
},
showSymbol: false,
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: '#004564'
},
{
offset: 1,
color: '#00a0df'
}
])
},
emphasis: {
focus: 'series'
},
// name: '今日来访',
data: data,
// type: 'line',
// smooth: true
// barWidth: '35%',
// itemStyle: {
// color: '#004564'
// }
}
]
}
}
</script>