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

<template>
    <div class="chart-box">
        <div class="date-btn text-color">
            <div class="btn-box">
                <el-icon @click="getData(upMonth)">
                    <ArrowLeft />
                </el-icon>
                <el-date-picker v-model="currentMonth" format="YYYY年MM月" type="month" :editable="false" :clearable="false" @change="getData" />
                <el-icon @click="getData(downMonth)">
                    <ArrowRight />
                </el-icon>
            </div>
        </div>
        <div class="total-box">
            <div class="total-item" v-for="item in pieData" :key="item.name">{{ item.name }}:{{ item.value }}台</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, getMonthDays } from '@/utils/date-util';

const chartDom = ref()

const currentMonth = ref(new Date())
const upMonth = ref()
const downMonth = ref()
const pieData = ref([] as any)

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

function initChart(chartData: any) {
    const chart = echarts.init(chartDom.value as HTMLElement);
    chart.clear();
    const option = {
        color: chartData.color,
        tooltip: {
            trigger: 'item',
            formatter: (params: any) => {
                return params.marker + params.name + '<br>数量：' + params.value + '<br>占比：' + params.percent + '%'
            }
        },
        grid: {
            left: 0,
            right: 0,
            bottom: 0,
            top: 0,
            containLabel: true,
        },
        series: [{
            type: 'pie',
            center: ['68%', '50%'],
            radius: ['0%', '70%'],
            clockwise: true,
            label: {
                show: true,
                position: 'outter',
                color: 'inherit',
                overflow: 'break',
                formatter: function (params: any) {
                    return params.name + params.percent + '%'
                }
            },
            labelLine: {
                show: false,
                length: 3,
                length2: 0,
                smooth: true,
            },
            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 types = ['心脏病手术', '骨科手术', '阑尾炎手术']
    const color = ['#ffde69', '#f8b300', '#006080']
    pieData.value = []
    types.forEach((item: string, index: number) => {
        pieData.value.push({value: Math.ceil(Math.random() * 10), name: item, itemStyle: {
            color: color[index]
        }})
    })
    initChart({ data: pieData.value, color })
}
</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: 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: 100%;
        height: 100%;
    }

    .total-box {
        position: absolute;
        width: 30%;
        top: 30px;
        left: 20px;
        bottom: 0;
        color: $text2-color;
        font-size: 14px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        .total-item {
            padding: 5px 0;
        }
    }
}</style>