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} <br/>{b}: {c} ({d}%)',
            // position: function (point, params, dom, rect, size) {

            //     // 固定在图表右侧显示，再往右挪一点
            //     return [size.viewSize.width - 120, point[1]];
            // }
        },
        legend: {
            bottom: '25%',
            right: '2%',
            orient: 'vertical', // 垂直排列
            data: ['已建', '在建'],
            itemWidth: 21,
            itemHeight: 11,
            itemStyle: {
                borderRadius: 0
            },
            textStyle: {
                fontSize: 11
            },
            itemGap: 12 // 图例项之间的间距
        },
        series: [
            {
                name: '建设状态',
                type: 'pie',
                radius: ['80%', '95%'], // 外环
                center: ['35%', '50%'], // 整体向下移动一点
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 0,
                    borderColor: '#fff',
                    borderWidth: 1
                },
                label: {
                    show: false // 不显示外侧标签
                },
                emphasis: {
                    label: {
                        show: false
                    }
                },
                labelLine: {
                    show: false // 不显示引导线
                },
                data: [
                    { value: 80, name: '已建', itemStyle: { color: '#78c300' } },
                    { value: 20, name: '在建', itemStyle: { color: '#2196F3' } }
                ]
            },
            {
                name: '中心圆',
                type: 'pie',
                radius: ['0%', '55%'], // 中心圆
                center: ['35%', '50%'], // 与外环保持一致，整体向下移动
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 0,
                    borderColor: '#fff',
                    borderWidth: 0
                },
                label: {
                    show: false
                },
                emphasis: {
                    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">
.basic_body {
    width: 100%;
    height: 100%;

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