import ReactEcharts from 'echarts-for-react';
import { useEffect, useRef } from 'react';
export default ({
  style,
  data = [],
  showXAis = false,
  colorStops,
  lineColor,
  grid,
  smooth
}: {
  style: React.CSSProperties;
  data: any[];
  showXAis?: boolean;
  colorStops?: any[];
  lineColor?: string;
  grid?: any;
  smooth?: boolean
}) => {
  const ref = useRef(null);

  const option = {
    tooltip: {
      trigger: 'axis',
      borderWidth: '0',
      backgroundColor: 'rgba(73,81,92,.95)', //背景颜色
      textStyle: {
        color: '#fff', //字体颜色
      },
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      show: false,
      data: data?.map((item) => item.name),
    },
    yAxis: {
      type: 'value',
      show: false,
    },
    grid: grid ?? {
      x: 0,
      y: 5,
      x2: 0,
      y2: 35,
    },
    series: [
      {
        data: data,
        symbol: 'none',
        type: 'line',
        itemStyle: {
          normal: {
            color: '#FFFFFF', // 改变折线点的颜色
            lineStyle: {
              color: lineColor ?? '#FFFFFF', // 改变折线颜色
            },
          },
        },

        areaStyle: {
          // 区域填充样式。设置后显示成区域面积图。
          color: {
            type: 'linear',
            x: 0,
            y: 1,
            x2: 0,
            y2: 0.2,
            colorStops: colorStops ?? [
              {
                offset: 0,
                color: '#ffffff4e', // 0% 处的颜色
              },
              {
                offset: 0.5,
                color: '#ffffff4e', // 0% 处的颜色
              },
              {
                offset: 1,
                color: '#FFFFFF', // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
        smooth: smooth ?? true,
      },
    ],
  };

  

  return (
    <ReactEcharts
      ref={ref}
      option={option} // option：图表配置项
      notMerge={true}
      lazyUpdate={false}
      style={style}
    />
  );
};
