rax-medical/src/views/home/time-bar-chart.vue

<template>
    <div class="chart-box">
        <div class="date-btn text-color">
            <div class="btn-box">
                <el-icon @click="setDate('up')">
                    <ArrowLeft />
                </el-icon>
                <el-date-picker v-model="currentMonth" format="第ww周" type="week" :editable="false" :clearable="false"
                    @change="getData" />
                <el-icon @click="setDate('down')">
                    <ArrowRight />
                </el-icon>
            </div>
        </div>
        <div ref="chartDom" class="chart-dom"></div>
    </div>
</template>

<script lang='ts' setup>
import { onMounted, reactive, ref, toRefs, watch } from 'vue'
import * as echarts from 'echarts';
import { dateFormater, getFirstDayOfWeek, getCurrentDate, getDays } from '@/utils/date-util';

const chartDom = ref()

const currentMonth = ref(new Date())

onMounted(() => {
    getData(new Date())
})

// 大于当前时间返回 true
function calcTime(time: any) {
    return Boolean(new Date().getTime() < new Date(time).getTime())
}
function initChart(chartData: any) {
    const chart = echarts.init(chartDom.value as HTMLElement);
    chart.clear();
    const option = {
        color: ['#006080', '#f8b300'],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            },
            formatter: (params: any) => {
                let str = dateFormater('yyyy-MM-dd', params[0].axisValue) + '<b style="padding: 0 10px;">' + getCurrentDate(params[0].axisValue) + '</b>'
                params.forEach((item: any) => {
                    str += '<br>'
                    str += item.marker + item.seriesName + '：' + item.value + '小时'
                })
                return str
            }
        },
        legend: {
            right: 0,
            data: chartData.dataName
        },
        grid: {
            left: 20,
            right: 50,
            bottom: 5,
            top: 50,
            containLabel: true,
        },
        xAxis: {
            name: '日期',
            show: true,
            type: 'category',
            nameTextStyle: { color: '#909399' },
            axisLine: { show: true, lineStyle: { color: '#006080', width: 2 } },
            axisTick: { show: false },
            axisLabel: { show: true, color: '#909399', formatter: (value: any) => getCurrentDate(value) },
            splitLine: { show: true, lineStyle: { color: 'rgba(212, 130, 1, .05)', width: 1, type: 'solid' } },
            data: chartData.xData,
        },
        yAxis: {
            name: '时间',
            show: true,
            type: 'value',
            min: 0,
            nameTextStyle: { color: '#909399', align: 'center', verticalAlign: 'top', padding: [0, 0] },
            axisLine: { show: true, lineStyle: { color: '#006080', width: 2 } },
            axisTick: { show: false },
            axisLabel: { show: false },
            splitLine: { show: false, lineStyle: { color: '#D4E8F0', width: 1, type: 'solid' } },
        },
        series: [{
            name: chartData.dataName[0],
            type: 'bar',
            label: {
                show: true,
                rotate: -90,
                align: 'left',
                verticalAlign: 'center',
                position: 'insideTop',
                color: '#ffffff',
                textBorderColor: '#006080',
                textBorderWidth: 3,
                formatter: (params: any) => params.value.toFixed(0) + 'h' + Number((params.value % 1).toFixed(1)) * 60 + 'm'
            },
            data: chartData.data[0]
        },
        {
            name: chartData.dataName[1],
            type: 'bar',
            label: {
                show: true,
                rotate: -90,
                align: 'left',
                verticalAlign: 'center',
                position: 'insideTop',
                color: '#ffffff',
                textBorderColor: '#f8b300',
                textBorderWidth: 3,
                formatter: (params: any) => params.value.toFixed(0) + 'h' + Number((params.value % 1).toFixed(1)) * 60 + 'm'
            },
            data: chartData.data[1]
        }],
    };
    chart.setOption(option);
    chart.resize();
    window.addEventListener('resize', () => {
        chart.resize();
    });
}
const setDate = (type: string) => {
    getData(getDays(currentMonth.value, type === 'up' ? -7 : 7))
}
const getData = (date: any) => {
    currentMonth.value = new Date(date)
    const dataName = ['麻醉给药时长', '人工给药时长']
    const xData = []
    const data = [[], []] as any
    for (let i = 1; i < 8; i++) {
        xData.push(getFirstDayOfWeek(date, i))
        data[0].push(Number((Math.random() * 16 + 2).toFixed(1)))
        data[1].push(Number((Math.random() * 16 + 2).toFixed(1)))
    }
    initChart({ dataName, xData, data })
}
</script>

<style lang='scss' scoped>
.chart-box {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .date-btn {
        position: absolute;
        width: 150px;
        height: 50px;
        top: 0;
        left: 20px;
        display: flex;
        z-index: 1;

        .btn-box {
            height: 30px;
            display: flex;
            align-items: center;
            color: $text2-color;

            &>:deep(.el-date-editor) {
                font-size: 14px;

                .el-input__wrapper {
                    box-shadow: none;
                    padding: 0;

                    .el-input__prefix,
                    .el-input__suffix {
                        display: none;
                    }

                    .el-input__inner {
                        cursor: pointer;
                        width: 100px;
                        color: $text2-color;
                        text-align: center;
                    }
                }
            }

            .el-icon {
                cursor: pointer;
            }
        }
    }

    .chart-dom {
        // width: calc(100% - 180px);
        width: 100%;
        height: 100%;
    }
}</style>