ruoyi-react-front/components/realTimeMontorModule/RTMMBarchart.tsx

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

// 柱状图特定属性接口
export type BarChartProps = {
    // 柱状图数据
    data: { value: number; name: string }[];
    // 柱状图标题
    title?: string;
    // X轴名称
    xAxisName?: string;
    // Y轴名称
    yAxisName?: string;
    // 柱状图颜色配置
    color?: string;
    // 其他EChart通用属性
} & Omit<EChartProps, "option">;

const BarChart = ({
                      data,
                      title = "统计数据",
                      xAxisName = "",
                      yAxisName = "",
                      color = "#1890ff",
                      ...props
                  }: BarChartProps) => {
    // 提取x轴数据和系列数据
    const xAxisData = data.map(item => item.name);
    const seriesData = data.map(item => item.value);

    // 默认柱状图配置
    const defaultOption = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            },
        },
        grid: {
            left: '0%',
            right: '0%',
            bottom: '0%',
            top: '10%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: xAxisData,
                axisLine: {
                    lineStyle: {
                        color: '#fff'
                    }
                },
                axisLabel: {
                    color: 'black'
                },
                name: xAxisName,
                nameTextStyle: {
                    color: 'black',
                    padding: [0, 0, 10, 0]
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                axisLine: {
                    lineStyle: {
                        color: 'black'
                    }
                },
                axisLabel: {
                    color: 'black',
                    formatter: '{value}'
                },
                splitLine: {
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.1)'
                    }
                },
                name: yAxisName,
                nameTextStyle: {
                    color: 'black',
                    padding: [0, 10, 0, 0]
                }
            }
        ],
        series: [
            {
                name: title,
                type: 'bar',
                barWidth: '60%',
                data: seriesData,
                itemStyle: {
                    color: color,
                    borderRadius: [4, 4, 0, 0]
                }
            }
        ]
    };

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

export default BarChart;