import { useMemo } from 'react'
import ReactEcharts from 'echarts-for-react';
const LineCharts = () => {

  const option = useMemo(() => {
    // const data: any = [100, 50, 60, 70, 50]
    const showXAis = false
    return {
      color: ['#EB6A6A', '#F69552', '#F0C85E'],
      xAxis: {
        type: 'category',
        boundaryGap: false,
        show: false,
        data: showXAis ? ['09:15', '09:15', '09:15', '09:15', '09:15'] : [],
        axisLabel: {
          color: '#CBEDFF',
          interval: 0 // 设置为0以显示所有坐标点  
        },
        axisLine: {
          show: false,
        },
      },
      yAxis: {
        type: 'value',
        show: false,
      },
      grid: {
        left: '0',  // 左边距
        right: '0', // 右边距
        top: '25%',   // 上边距
        bottom: '0' // 下边距
      },
      legend: {
        data: ['重大风险', '较大风险', '一般风险'],
        icon: "circle",
        top: 0,
        itemGap: 50,
        textStyle: {
          fontSize: '16px',
          color: '#E4EDFF',
        }
      },
      series: [
        { 
          name: '重大风险',
          data: [100, 50, 60, 70, 50, 100, 50, 60, 70, 50,100, 50, 60, 70, 50,100, 50, 60, 70, 50],
          symbol: "none",
          type: 'line',
          lineStyle: {
            color: "#EB6A6A",
            width: 4
          },

          areaStyle: {
            // 区域填充样式。设置后显示成区域面积图。
            color: {
              type: 'linear',
              x: 0,
              y: 1,
              x2: 0,
              y2: 0.2,
              colorStops: [
                {
                  offset: 0,
                  color: 'rgba(235, 106, 106, 0.2)', // 0% 处的颜色
                },
  
                {
                  offset: 1,
                  color: 'rgba(235, 106, 106, 0.1)', // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
          },
        },
        { 
          name: '较大风险',
          data: [80, 30, 20, 60, 90, 80, 30, 20, 60, 90,80, 30, 20, 60, 90,80, 30, 20, 60, 90],
          symbol: "none",
          type: 'line',
          lineStyle: {
            color: "#F69552",
            width: 4
          },

          areaStyle: {
            // 区域填充样式。设置后显示成区域面积图。
            color: {
              type: 'linear',
              x: 0,
              y: 1,
              x2: 0,
              y2: 0.2,
              colorStops: [
                {
                  offset: 0,
                  color: 'rgba(246, 149, 82, 0.2)', // 0% 处的颜色
                },
  
                {
                  offset: 1,
                  color: 'rgba(246, 149, 82, 0.1)', // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
          },
        },
        { 
          name: '一般风险',
          data: [50, 20, 40, 80, 60, 50, 20, 40, 80, 60, 50, 20, 40, 80, 60, 50, 20, 40, 80, 60],
          symbol: "none",
          type: 'line',
          lineStyle: {
            color: "#F0C85E",
            width: 4
          },

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

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

export default LineCharts