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

<!-- SidePanelItem.vue -->
<template>
    <div class="basic_body">
        <div ref="chartContainer" class="chart-container"></div>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onUnmounted } from 'vue';
import * as echarts from 'echarts';

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

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

// 页面加载时执行的逻辑
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();
    });
};
</script>

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

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