import { CSSProperties, useMemo } from 'react'
import ReactEcharts from 'echarts-for-react';
const LineCharts = ({ data,style }: { data: any[],style:CSSProperties }) => {

  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: 2 // 设置为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,
      },
      grid: {
        left: '5',  // 左边距
        right: '5', // 右边距
        top: '0',   // 上边距
        bottom: '35%' // 下边距
      },
      series: [
        {
          data:data?? [],
          symbol: "none",
          type: 'line',
          lineStyle: {
            color: "#f0c85e",
          },
          smooth: true,
          itemStyle: {
            color: "#f0c85e",
          },
          // 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 (
    <ReactEcharts
      option={option} // option：图表配置项
      style={style}
    />
  )
}

export default LineCharts