import ReactEcharts from 'echarts-for-react';
import { useRef } from 'react';
export default ({
  style,
  data = [],
  data1 = [],

  colorStops,
}: {
  style?: React.CSSProperties;
  data: any[];
  data1: any[];

  colorStops?: any[];
}) => {
  const ref = useRef(null);
  const option = {
    legend: {
      data: ['新增', '解决'],
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985',
        },
      },
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      show: true,
      //data: showXAis ? data?.map((item) => item.name) : [],
      data: ['Mon', 'Tue', 'Wed', 'fs']
    },
    yAxis: {
      type: 'value',

      //   data:[10,20,30,40,50]
    },
    grid: {
      x: 30,
      y: 35,
      x2: 10,
      y2: 35,
    },
    series: [
      {
        name: '新增',
        data: data,
         symbol: 'none',
        type: 'line',

        // emphasis: {
        //   focus: 'series',
        // },
        itemStyle: {
          normal: {
            color: '#4CD5CF', // 改变折线点的颜色
            lineStyle: {
              color: '#4CD5CF', // 改变折线颜色
            },
          },
        },

        areaStyle: {
          // 区域填充样式。设置后显示成区域面积图。
          color: {
            type: 'linear',
            x: 0,
            y: 1,
            x2: 0,
            y2: 0.2,
            colorStops: colorStops ?? [
              {
                offset: 1,
                color: '#4CD5CF', // 0% 处的颜色
              },
              {
                offset: 0,
                color: '#66DCA0', // 0% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
        smooth: true,
      },
      {
        name: '解决',
        data: data1,
        symbol: 'none',
        type: 'line',
        itemStyle: {
          normal: {
            color: '#789EFE', // 改变折线点的颜色
            lineStyle: {
              color: '#789EFE', // 改变折线颜色
            },
          },
        },

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

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