WholeProcessPlatform/frontend/src/components/developStatusChart/index.vue

<!-- SidePanelItem.vue -->
<template>
    <div class="basic_body">
        <div ref="chartContainer" class="chart-container"></div>
        
        <!-- 水电开发情况弹框 -->
        <a-modal
            v-model:open="modalVisible"
            title="水电开发情况"
            :width="1540"
            @ok="handleModalOk"
            @cancel="handleModalCancel"
        >
            <div class="modal-content">
                <!-- 内容区域，供用户自定义 -->
                <!-- <p>选中类型：{{ selectedType }}</p> -->
                <SDKFQKPie :defaultTab="selectedType" />
                <!-- 用户可在此处自定义内容 -->
            </div>
        </a-modal>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted } from 'vue';
import * as echarts from 'echarts';
import { message } from 'ant-design-vue';
import SDKFQKPie from '@/modules/shuidianhuangjingjieruMod/TwoLayer/ShuiDianKaiFQKTwoLayer.vue'
// 定义组件名（便于调试和递归）
defineOptions({
    name: 'developStatusChart'
});

const chartContainer = ref<HTMLDivElement | null>(null);
let chartInstance: echarts.ECharts | null = null;

// 弹框相关状态
const modalVisible = ref(false);
const selectedType = ref('');

// 页面加载时执行的逻辑
onMounted(() => {
    if (chartContainer.value) {
        initChart();
    }
});

onUnmounted(() => {
    if (chartInstance) {
        chartInstance.dispose();
        chartInstance = null;
    }
});

const initChart = () => {
    if (!chartContainer.value) return;

    chartInstance = echarts.init(chartContainer.value);

    const option = {
         tooltip: {
                trigger: 'item',
                formatter: '{a} {b}: {c} ({d}%)',
                position: 'right'
            },
        legend: {
           
            data: ['已建', '在建'],
               left: '60%',
                orient: 'vertical',
                top: 'center',
                itemWidth: 20,
                itemHeight: 12
        },
        series: [
            {
                name: '装机容量',
                type: 'pie',
                radius: ['70%', '90%'], // 外环
                center: ['30%', '50%'], // 整体向下移动一点
         
                  itemStyle: {
                        borderRadius: 2,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                label: {
                    show: false // 不显示外侧标签
                },
                labelLine: {
                    show: false // 不显示引导线
                },
                data: [
                    { value: 80, name: '已建', itemStyle: { color: '#78c300' } },
                    { value: 20, name: '在建', itemStyle: { color: '#2196F3' } }
                ]
            },
            {
                name: '数量(座)',
                type: 'pie',
                radius: ['0%', '50%'], // 中心圆
                center: ['30%', '50%'], // 与外环保持一致，整体向下移动
                itemStyle: {
                        borderRadius: 2,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                label: {
                    show: false
                },
                labelLine: {
                    show: false
                },
                data: [
                    { value: 80, name: '已建', itemStyle: { color: '#78c300' } },
                    { value: 20, name: '在建', itemStyle: { color: '#2196F3' } }
                ]
            }
        ]
    };

    chartInstance.setOption(option);

    // 监听窗口大小变化，重新调整图表大小
    window.addEventListener('resize', () => {
        chartInstance?.resize();
    });

    // 添加图表点击事件
    chartInstance.on('click', (params: any) => {
        if (params.data && params.data.name) {
            selectedType.value = params.data.name;
            modalVisible.value = true;
        }
    });
};

// 弹框确认按钮处理
const handleModalOk = () => {
    modalVisible.value = false;
};

// 弹框取消按钮处理
const handleModalCancel = () => {
    modalVisible.value = false;
};
</script>

<style lang="scss" scoped>
.basic_body {
    width: 100%;
    height: 100%;

    .chart-container {
        width: 203px; // 容器宽度
        height: 100px; // 容器高度
    }

    .modal-content {
        padding: 10px 0;
        min-height: 100px;
    }
}
</style>