ruoyi-react-front/components/GISModule/PicEcharts.tsx

import React from "react";
import EChart, {type EChartProps} from "../echarts";

// 饼图特定属性接口
export type PieChartProps = {
    // 饼图数据
    data: { value: number; name: string }[];
    // 饼图标题
    title?: string;
    // 饼图半径配置
    radius?: [string, string];
    // 饼图颜色配置
    colors?: string[];
    // 其他EChart通用属性
} & Omit<EChartProps, "option">;

const PieChart = ({
                      data,
                      title = "统计数据",
                      radius = ["40%", "70%"],
                      colors,
                      ...props
                  }: PieChartProps) => {
    // 默认饼图配置
    const defaultOption = {
        // title: {
        //     text: title,
        //     left: "center",
        //     textStyle: {
        //         color: "#fff", // 标题文字颜色
        //     },
        // },
        tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b}: {c} ({d}%)",
        },
        legend: {
            orient: "vertical",
            top:20,
            right: 10,
            textStyle: {
                color: "#fff", // 图例文字颜色
            },
        },
        series: [
            {
                name: "统计",
                type: "pie",
                radius: radius,
                // 添加center属性控制饼图位置，[left, top]，百分比值相对于容器
                center: ['40%', '50%'], // 调整第一个值(左右位置)，越小越靠左
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: "#3a3899", // 饼图块边框颜色
                    borderWidth: 2,
                },
                label: {
                    show: false,
                    position: "center",
                    color: "#fff",
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 16,
                        fontWeight: "bold",
                        color: "#fff",
                    },
                },
                labelLine: {
                    show: false,
                },
                data: data,
                color: colors || ["#f5222d", "#faad14", "#52c41a", "#1890ff", "#722ed1"],
            },
        ],
    };

    return <EChart option={defaultOption} {...props} />;
};

export default PieChart;