rax-medical/src/views/home/number-chart.vue

<template>
    <div class="chart-box">
        <div class="date-btn text-color">
            <div :class="{'text2-color': calcTime(upMonth)}" @click="getData(upMonth)">
                <p>{{ dateFormater('yyyy年MM月', upMonth) }}</p>
                <el-icon><ArrowLeft /></el-icon>
            </div>
            <div :class="{'text2-color': calcTime(downMonth)}" style="text-align: right;" @click="getData(downMonth)">
                <p>{{ dateFormater('yyyy年MM月', downMonth) }}</p>
                <el-icon><ArrowRight /></el-icon>
            </div>
        </div>
        <div ref="chartDom" class="chart-dom"></div>
        <div class="total">
            <span class="f18">总计<br>手术<br>数量:</span>
            <span style="font-size: 24px;font-weight: 600;">{{ total }}</span>
        </div>
    </div>
</template>

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

const chartDom = ref()

const currentMonth = ref(new Date())
const upMonth = ref()
const downMonth = ref()
const total = ref(0)

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: [],
        tooltip: {
            trigger: 'axis',
            formatter: (params: any) => {
                return dateFormater('yyyy年MM月', currentMonth.value) + params[0].axisValue + '<br>手术数量 <b>' + params[0].value + '</b> 台'
            }
        },
        grid: {
            left: 20,
            right: 50,
            bottom: 5,
            top: 50,
            containLabel: true,
        },
        xAxis: {
            name: '日期',
            show: true,
            type: 'category',
            boundaryGap: false,
            nameTextStyle: { color: '#303133' },
            axisLine: { show: true, lineStyle: { color: '#006080', width: 2 } },
            axisTick: { show: false },
            axisLabel: { show: true, interval: chartData.xData.length - 2 },
            splitLine: { show: true, lineStyle: { color: 'rgba(0, 96, 128, .05)', width: 1, type: 'solid' } },
            data: chartData.xData,
        },
        yAxis: {
            name: '手术数量/台',
            show: true,
            type: 'value',
            min: 0,
            nameTextStyle: { color: '#303133', align: 'left', verticalAlign: 'top', padding: [0, 20] },
            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: [{
            type: 'line',
            symbol: 'none',
            smooth: true,
            showSymbol: false,
            lineStyle: {
                color: 'rgb(0, 96, 128)',
                width: 2,
                shadowColor: 'rgba(0, 96, 128, .3)',
                shadowBlur: 10,
                shadowOffsetY: 20
            },
            areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(0, 96, 128, 1)'
                }, {
                    offset: 0.8,
                    color: 'rgba(255, 255, 255, 0.1)'
                }], false)
            },
            data: chartData.data
        }],
    };
    chart.setOption(option);
    chart.resize();
    window.addEventListener('resize', () => {
        chart.resize();
    });
}

const getData = (date: any) => {
    currentMonth.value = new Date(date)
    upMonth.value = new Date(currentMonth.value.getFullYear(), currentMonth.value.getMonth() - 1, 1)
    downMonth.value = new Date(currentMonth.value.getFullYear(), currentMonth.value.getMonth() + 1, 1)
    const days = getMonthDays(currentMonth.value)
    const xData = []
    const data = []
    let num = 0
    for (let i = 0; i < days; i++) {
        xData.push((i < 9 ? '0' : '') + (i + 1))
        data.push(Math.ceil(Math.random() * 10))
        num += data[i]
    }
    total.value = num
    initChart({ 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;
            height: 50px;
            top: 0;
            left: 20px;
            right: 230px;
            display: flex;
            justify-content: space-between;
            z-index: 1;
            &>div {
                cursor: pointer;
                p {
                    margin-bottom: 10px;
                    font-weight: 600;
                }
            }
        }
        .chart-dom {
            width: calc(100% - 180px);
            height: 100%;
        }
        .total {
            flex-shrink: 0;
            width: 160px;
            height: 80%;
            border: 2px solid $main-color;
            border-radius: 5px;
            background: rgba($main-color, .1);
            color: $main-color;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            align-items: center;
            span {
                text-align: center;
            }
        }
    }
</style>