visiting-frontend/src/components/IndexComponents/TodayVisitTrend.vue

<template>
    <el-card shadow="never" header="今日来访趋势">
        <div class="TodayVisitTrend">
            <Vechart :option="options"/>
        </div>
    </el-card>
</template>

<script setup>
import Vechart from 'vue-echarts'
import * as echarts from 'echarts/core';
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({
    name: 'TodayVisitTrend'
})

echarts.use([
    TitleComponent,
    ToolboxComponent,
    TooltipComponent,
    GridComponent,
    LegendComponent,
    LineChart,
    CanvasRenderer,
    UniversalTransition
]);


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: '今日来访',
                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>

<style scoped lang="scss">
.TodayVisitTrend {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 250px;
}
</style>