import ReactEcharts from 'echarts-for-react';
import { useMemo } from 'react';
const LineCharts = ({
  data,
  orangeData,
  yellowData,
  ybData,
}: {
  data?: any[];
  orangeData?: any[];
  yellowData: any[];
  ybData?: any[];
}) => {
  const option = useMemo(() => {
    const showXAis = true;
    return {
      xAxis: {
        type: 'category',
        boundaryGap: false,
        show: showXAis,
        data: showXAis ? data?.map((item) => item.name) : [],
        axisLabel: {
          color: '#CBEDFF',
          interval: 0, // 设置为0以显示所有坐标点
        },
        axisLine: {
          show: false,
        },
      },
      yAxis: {
        type: 'value',
        show: false,
      },
      grid: {
        left: '5%', // 左边距
        right: '5%', // 右边距
        top: '10%', // 上边距
        bottom: '30%', // 下边距
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'line',
          lineStyle: {
            color: 'rgba(255,255,255,0.5)',
            width: 2,
          },
        },
      },
      series: [
        {
          data: data,
          symbol: 'none',
          type: 'line',
          lineStyle: {
            color: 'rgb(235, 106, 106)',
          },

          areaStyle: {
            // 区域填充样式。设置后显示成区域面积图。
            color: {
              type: 'linear',
              x: 0,
              y: 1,
              x2: 0,
              y2: 0.2,
              colorStops: [
                {
                  offset: 0,
                  color: 'rgba(235, 106, 106, 0)', // 100% 处的颜色
                },
                {
                  offset: 1,
                  color: 'rgb(235, 106, 106)', // 0% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
          },
        },
        {
          data: orangeData,
          symbol: 'none',
          type: 'line',
          lineStyle: {
            color: '#f69552',
          },

          areaStyle: {
            // 区域填充样式。设置后显示成区域面积图。
            color: {
              type: 'linear',
              x: 0,
              y: 1,
              x2: 0,
              y2: 0.2,
              colorStops: [
                {
                  offset: 0,
                  color: 'rgba(246, 149, 82, 0)', // 100% 处的颜色
                },
                {
                  offset: 1,
                  color: 'rgb(246, 149, 82)', // 0% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
          },
        },
        {
          data: yellowData,
          symbol: 'none',
          type: 'line',
          lineStyle: {
            color: '#f69552',
          },

          areaStyle: {
            // 区域填充样式。设置后显示成区域面积图。
            color: {
              type: 'linear',
              x: 0,
              y: 1,
              x2: 0,
              y2: 0.2,
              colorStops: [
                {
                  offset: 0,
                  color: 'rgb(240, 200, 94, 0)', // 100% 处的颜色
                },
                {
                  offset: 1,
                  color: 'rgb(240, 200, 94)', // 0% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
          },
        },
        {
          data: ybData,
          symbol: 'none',
          type: 'line',
          lineStyle: {
            color: '#46b2ff',
          },

          areaStyle: {
            // 区域填充样式。设置后显示成区域面积图。
            color: {
              type: 'linear',
              x: 0,
              y: 1,
              x2: 0,
              y2: 0.2,
              colorStops: [
                {
                  offset: 0,
                  color: 'rgb(240, 200, 94, 0)', // 100% 处的颜色
                },
                {
                  offset: 1,
                  color: '#46b2ff', // 0% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
          },
        },
      ],
    };
  }, [data, orangeData, yellowData, ybData]);

  return (
    <ReactEcharts
      option={option} // option：图表配置项
      style={{ width: '400px', height: '280px', margin: '0 auto' }}
    />
  );
};

export default LineCharts;
