maintenance_system/src/views/integratedManage/stateManage/components/statusPie.vue

<template>
    <div class="chart-container">
        <!--组件温度（℃）  图表内容区域 -->
        <div ref="chartRef" class="chart-content"></div>
    </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';
import * as echarts from 'echarts';


// 图表DOM引用
const chartRef = ref(null);
// 图表实例
let chartInstance = null;

// 初始化图表
const initChart = () => {
    if (chartRef.value && !chartInstance) {
        chartInstance = echarts.init(chartRef.value);
    }
    const option = {
        tooltip: {
            trigger: 'item',
            formatter: function(params) {
                // 定义名称映射关系
                const nameMap = {
                    '提示信息': '设备正常',
                    '一般告警': '设备中断',
                    '重要告警': '设备异常'
                };
                // 使用ECharts提供的百分比值
                const percentage = params.percent.toFixed(1);
                // 返回格式化后的文本
                return `${nameMap[params.name]}: ${params.value}台 (${percentage}%)`;
            }
        },
        grid: {
            left: '0%',
            right: '20%',
            bottom: '0%',
            top: '0%',
            containLabel: true
        },
        legend: {
            top: 'middle',
            orient: 'vertical',
            right: '5%', // 调整图例位置，使其更靠近左侧
            itemWidth: 15,
            itemHeight: 15,
            formatter: function(name) {
                // 定义名称映射关系
                const nameMap = {
                    '提示信息': '设备正常',
                    '一般告警': '设备中断',
                    '重要告警': '设备异常'
                };
                // 定义数值映射关系
                const valueMap = {
                    '提示信息': 28,
                    '一般告警': 45,
                    '重要告警': 55
                };
                // 返回格式化后的文本
                return `${nameMap[name] || name}(${valueMap[name]})`;
            }
        },
        series: [
            {
                type: 'pie',
                radius: ['40%', '70%'],
                label: {
                    show: false
                },
                labelLine: {
                    show: true
                },
                color: [
                    '#43CF7C', // 设备正常
                    '#00B3FF', // 设备中断
                    '#FB3E7A', // 设备异常
                ],
                data: [
                    { value: 28, name: '提示信息' },
                    { value: 45, name: '一般告警' },
                    { value: 55, name: '重要告警' },
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

    chartInstance.setOption(option);
};

// 响应窗口大小变化
const handleResize = () => {
    if (chartInstance) {
        chartInstance.resize();
    }
};

// 生命周期钩子
onMounted(() => {
    initChart();
    window.addEventListener('resize', handleResize);

    // 清理函数
    return () => {
        window.removeEventListener('resize', handleResize);
        if (chartInstance) {
            chartInstance.dispose();
            chartInstance = null;
        }
    };
});


</script>

<style scoped>
.chart-container {
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    height: 150px;
    width: 100%;
    padding: 5px;
    box-sizing: border-box;
}

.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #f0f0f0;
}

.chart-header h2 {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin: 0;
}



.chart-content {
    width: 100%;
    height: 100%;
    padding: 5px;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .chart-container {
        height: 350px;
    }
}

@media (max-width: 480px) {
    .chart-container {
        height: 300px;
    }

    .chart-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .chart-actions {
        width: 100%;
        display: flex;
        justify-content: space-between;
    }

    .chart-actions button {
        margin: 0;
        flex: 1;
        margin-right: 5px;
    }

    .chart-actions button:last-child {
        margin-right: 0;
    }
}

.model {
    padding: 20px;
    background-color: rgba(242, 248, 252, 1);
}
</style>