import ReactEcharts from 'echarts-for-react';
import { CSSProperties, useMemo } from 'react';
const LineCharts = ({ data, style }: { data: any[]; style: CSSProperties }) => {
  const option = useMemo(() => {
    return {
      xAxis: {
        type: 'category',
        boundaryGap: false,

        data: data?.map((item) => item.name) || [],
        axisLabel: {
          color: '#CBEDFF',
          // interval: 3 // 设置为0以显示所有坐标点
        },
        axisLine: {
          show: false,
        },
      },
      tooltip: {
    
        trigger: 'axis',
        borderWidth: '0',
        backgroundColor: 'rgba(73,81,92,.95)', //背景颜色
        textStyle: {
          color: '#fff', //字体颜色
        },
        // backgroundColor: '#46515d',
        // axisPointer: {
        //   type: 'line',
      
        //   lineStyle: {
        //     color: 'rgba(255,255,255,.5)',
        //     width: 2,
        //   },
        // },
      },
      yAxis: {
        type: 'value',
        show: false,
      },
      series: [
        {
          data: data || [],
          symbol: 'none',
          type: 'line',
          lineStyle: {
            color: '#57EFE5',
          },
          smooth: true,
          itemStyle: {
            color: '#57EFE5', // 设置圆点颜色与线颜色一致
          },
          areaStyle: {
            // 区域填充样式。设置后显示成区域面积图。
            color: {
              type: 'linear',
              x: 0,
              y: 1,
              x2: 0,
              y2: 0.2,
              colorStops: [
                {
                  offset: 0,
                  color: 'rgba(87, 239, 229, 0)', // 0% 处的颜色
                },

                {
                  offset: 1,
                  color: 'rgba(87, 239, 229, 0.4)', // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
          },
        },
      ],
    };
  }, [data]);

  return (
    <>
      {data?.length ? (
        <ReactEcharts
          option={option} // option：图表配置项
          style={style}
        />
      ) : null}
    </>
  );
};

export default LineCharts;
