import { useMemo } from 'react'
import ReactEcharts from 'echarts-for-react';

const LineCharts = ({ dataSource, lineStyles }: { dataSource: any[], lineStyles: any }) => {

  const option = useMemo(() => {
    const data: any = dataSource?.map(item => item.qualitySign)
    return {
      tooltip: {
        trigger: 'axis',
        borderWidth: '0',
        backgroundColor: 'rgba(73,81,92,.95)', //背景颜色
        textStyle: {
          color: '#fff', //字体颜色
        },
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        show: false,
        data: dataSource?.map((item: any) => item.time),
      },
      yAxis: {
        type: 'value',
        show: false,
      },
      grid: {
        left: '0',  // 左边距
        right: '0', // 右边距
        top: '0',   // 上边距
        bottom: '0' // 下边距
      },
      series: [
        {
          data: data,
          symbol: "none",
          type: 'line',
          lineStyle: {
            width: 3,
            color: lineStyles.lineColor,
          },
          areaStyle: {
            // 区域填充样式。设置后显示成区域面积图。
            color: {
              type: 'linear',
              x: 0,
              y: 1,
              x2: 0,
              y2: 0.1,
              colorStops: [
                {
                  offset: 0,
                  color: lineStyles.areaColorOffset, // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: lineStyles.areaColorOffset1, // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
          },
        },
      ],
    }
  }, [dataSource])

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

export default LineCharts