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


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

  const option = useMemo(() => {
    return {
      color: ['#36BD3B', '#FF9743', '#FF67CB', '#9259FF', '#FFE543'],
      tooltip: {
        trigger: 'axis',
        borderWidth: '0',
        backgroundColor: 'rgba(73,81,92,.95)', //背景颜色
        textStyle: {
          color: '#fff', //字体颜色
        },
        axisPointer: {
          type: 'cross',
          crossStyle: {
            color: '#999',
          },
        },
      },
      grid: {
        left: '0',
        right: '0',
        bottom: '2%',
        top: '25%',
        containLabel: true,
      },
      legend: {
        data: ['整体', '噪音问题', '油烟扰民', '占道经营', '违建'],
        icon: "path://M0 2a2 2 0 0 1 2 -2h14a2 2 0 0 1 2 2v0a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2z",
        top: 10,
        itemGap: 50,
        textStyle: {
          fontSize: '16px',
          color: '#E4EDFF',
        }
      },
      xAxis: [
        {
          type: 'category',
          boundaryGap: true, //坐标轴两端不留空
          axisLine: {
            show: false, //隐藏X轴轴线
          },
          axisLabel: {
            show: true,
            interval: 0,
            textStyle: {
              padding: [2, 0, 0, 0],
              color: '#CBEDFF',
            },
          },
          axisTick: {
            show: false, //隐藏X轴刻度
          },
          axisPointer: {
            type: 'shadow',
          },
          data: ['0点', '3点', '6点', '9点', '12点', '15点', '18点', '21点', '23点'],
        },
      ],
      yAxis: [
        {
          type: 'value',
          name: '件',
          min: 0,
          max: 'dataMax',
          // interval: 50,
          axisLabel: {
            textStyle: {
              color: '#CBEDFF',
              fontSize: 16
            },
          },
          //name的样式设计
          nameTextStyle: {
            align: 'left',
            color: '#CBEDFF',
            padding: [0, 0, 20, -20],
            fontSize: 16
          },
          splitLine: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        }
      ],
      series: [
        {
          name: '整体',
          type: 'line',
          data: [20, 40, 20, 10, 60, 30, 20, 29, 39, 40],
        },
        {
          name: '噪音问题',
          type: 'line',
          data: [35, 30, 40, 30, 30, 30, 30, 30, 39, 40],
        },
        {
          name: '油烟扰民',
          type: 'line',
          data: [40, 50, 50, 50, 60, 50, 50, 50, 50, 40],
        },
        {
          name: '占道经营',
          type: 'line',
          data: [50, 60, 60, 60, 60, 60, 80, 60, 39, 40],
        },
        {
          name: '违建',
          type: 'line',
          data: [60, 80, 80, 80, 80, 100, 80, 80, 39, 40],
        },
      ]
    }
  }, [dataSource])

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

export default LineCharts
