yongxu-web/src/components/EchartsCommon/barChart.tsx

import React, { useEffect, useRef } from 'react';
import * as echarts from 'echarts';

interface propsData {
  seriesData: string[];
  yData: string[];
  color: string;
  width: string;
  height: string;
}

const LineChart: React.FC<propsData> = (props) => {
  const chartRef: any = useRef();
  const { yData, seriesData, color, width, height } = props;

  // 初始化
  useEffect(() => {
    const chart = echarts.init(chartRef.current);
    const options = {
      legend: {
        show: false,
      },
      grid: {
        left: '2%',
        right: '2%',
        bottom: '2%',
        top: '3%',
        containLabel: true,
      },
      xAxis: {
        type: 'value',
        splitLine: {
          lineStyle: {
            color: '#b0b0b0',
            type: 'dashed',
          },
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          //  改变x轴字体颜色和大小
          textStyle: {
            color: '#858585',
            fontSize: 14,
          },
        },
      },
      yAxis: {
        type: 'category',
        data: yData,
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          //  改变y轴颜色
          lineStyle: {
            color: '#b0b0b0',
          },
        },
        axisLabel: {
          textStyle: {
            color: '#858585',
            fontSize: 14,
          },
        },
      },
      series: [
        {
          type: 'bar',
          name: '产出',
          barWidth: 22,
          itemStyle: {
            normal: {
              label: {
                show: true, //开启显示
                position: 'insideRight', //在上方显示
                textStyle: {
                  //数值样式
                  color: '#FFFFFF',
                  fontSize: 12,
                  fontWeight: 600,
                },
              },
              color: color,
              barBorderRadius: 15,
            },
          },
          data: seriesData,
        },
      ],
    };

    chart.setOption(options);
  }, []);

  return <div style={{ width: width, height: height }} ref={chartRef} />;
};
export default LineChart;