WholeProcessPlatform/frontend/src/modules/shengTaiLiuLiangXieFangSheShiMod/xieFangFangShi/index.vue

<!-- SidePanelItem.vue -->
<template>
    <div class="xie-fang-fang-shi-container">
        <SidePanelItem title="生态流量泄放方式">
            <div ref="chartRef" class="pie-chart"></div>
        </SidePanelItem>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onBeforeUnmount } from 'vue';
import SidePanelItem from '@/components/SidePanelItem/index.vue';
import * as echarts from 'echarts';
import type { ECharts } from 'echarts';

// 定义组件名（便于调试和递归）
defineOptions({
    name: 'xieFangFangShi'
});

const chartRef = ref<HTMLElement | null>(null);
let chartInstance: ECharts | null = null;

// 静态数据
const pieData = [
    { value: 44.83, name: '基荷发电' },
    { value: 19.31, name: '泄洪设施' },
    { value: 8.28, name: '生态机组' },
    { value: 8.96, name: '生态放流管' },
    { value: 9.65, name: '生态放流闸' },
    { value: 5.52, name: '生态放流孔' },
    { value: 3.45, name: '生态放流洞' }
];

// 颜色配置（根据图片配色）
const colors = [
    '#9556a4',  // 基荷发电 - 紫色
    '#30b7b9',  // 泄洪设施 - 青绿色
    '#4b79ab',  // 生态机组 - 蓝色
    '#dbb629',  // 生态放流管 - 黄色
    '#df91ab',  // 生态放流闸 - 粉色
    '#78c300',  // 生态放流孔 - 浅绿色
    '#7399c6'   // 生态放流洞 - 浅蓝色
];

// 初始化图表
const initChart = () => {
    if (!chartRef.value) return;
    
    // 确保容器有正确的高度
    if (chartRef.value.clientHeight === 0) {
        // 如果容器高度为 0，延迟初始化
        setTimeout(() => {
            initChart();
        }, 100);
        return;
    }
    
    chartInstance = echarts.init(chartRef.value);
    
    const option = {
        tooltip: {
            trigger: 'item',
            formatter: '{b}: {c}%'
        },
        series: [
            {
                name: '泄放设施',
                type: 'pie',
                radius: ['42%', '62%'], // 环形：内径 42%，外径 62%（进一步缩小）
                center: ['50%', '50%'],
                avoidLabelOverlap: true,
                itemStyle: {
                    borderRadius: 0,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: true,
                    position: 'outside',
                    alignTo: 'edge', // 标签对齐到边缘
                    margin: 8, // 标签与圆环的距离
                    formatter: (params: any) => {
                        return `{name|${params.name}}\n{value|${params.value}%}`;
                    },
                    rich: {
                        name: {
                            fontSize: 12,
                            color: '#666666', // 灰蓝色标签
                            lineHeight: 18,
                            fontFamily: 'Microsoft YaHei, sans-serif',
                            align: 'left' // 左对齐
                        },
                        value: {
                            fontSize: 12,
                            color: '#2f6b98', // 灰蓝色百分比
                            lineHeight: 18,
                            fontFamily: 'Microsoft YaHei, sans-serif',
                            align: 'center', // 左对齐
                            fontWeight: 'bold' // 百分比加粗
                        }
                    },
                    overflow: 'none', // 不省略，完整显示
                    padding: [0, 0]
                },
                labelLine: {
                    show: true,
                    length: 12,
                    length2: 12,
                    lineStyle: {
                        width: 1
                    }
                },
                emphasis: {
                    scale: false, // 禁用悬停放大
                    itemStyle: {
                        brightness: 1.2, // 鼠标悬停时颜色变亮 20%
                        shadowBlur: 0    // 禁用阴影
                    },
                    labelLine: {
                        show: true // 悬停时不显示引导线变化
                    }
                },
                data: pieData.map((item, index) => ({
                    ...item,
                    itemStyle: { color: colors[index % colors.length] },
                    labelLine: {
                        lineStyle: {
                            color: colors[index % colors.length]
                        }
                    }
                }))
            }
        ],
        // 中心文字
        title: {
            text: '145',
            subtext: '泄放设施总数量\n(个)',
            left: 'center',
            top: 'center',
            textStyle: {
                color: '#2e86de',
                fontSize: 30,
                fontWeight: 'bold',
                fontFamily: 'Arial'
            },
            subtextStyle: {
                color: '#666',
                fontSize: 12,
                lineHeight: 16,
                fontFamily: 'Microsoft YaHei, sans-serif'
            }
        }
    };
    
    chartInstance.setOption(option);
};

// 处理响应式
const handleResize = () => {
    chartInstance?.resize();
};

// 页面加载时执行的逻辑
onMounted(() => {
    // 使用 nextTick 确保 DOM 已经完全渲染
    setTimeout(() => {
        initChart();
        // 初始化后再 resize 一次，确保尺寸正确
        setTimeout(() => {
            chartInstance?.resize();
        }, 200);
    }, 50);
    window.addEventListener('resize', handleResize);
});

// 组件卸载时清理
onBeforeUnmount(() => {
    window.removeEventListener('resize', handleResize);
    chartInstance?.dispose();
});
</script>

<style lang="scss" scoped>
.xie-fang-fang-shi-container {
    width: 100%;
    height: 100%;
}

.pie-chart {
    width: 100%;
    height: 350px;
}
</style>