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


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

  const option = useMemo(() => {

    const date = dataSource?.map(item => item.times) || []
    const realDate = dataSource?.map(item => item.num) || []

    return {
      color: ['#3CE88F', '#5F8BFF', '#F69552'],
      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: "circle",
        top: 0,
        itemGap: 50,
        textStyle: {
          fontSize: '16px',
          color: '#E4EDFF',
        }
      },
      xAxis: [
        {
          type: 'category',
          boundaryGap: true, //坐标轴两端不留空
          axisLine: {
            show: false, //隐藏X轴轴线
          },
          axisLabel: {
            show: true,
            textStyle: {
              padding: [2, 0, 0, 0],
              color: '#CBEDFF',
            },
          },
          axisTick: {
            show: false, //隐藏X轴刻度
          },
          axisPointer: {
            type: 'shadow',
          },
          data: date,
        },
      ],
      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,
          },
        },
        // {
        //   type: 'value',
        //   name: '%',
        //   min: 0,
        //   max: 100,
        //   interval: 25,
        //   nameTextStyle: {
        //     color: '#CBEDFF',
        //     padding: [0, 0, 20, 25],
        //     fontSize: 16
        //   },
        //   axisLabel: {
        //     textStyle: {
        //       color: '#CBEDFF',
        //       fontSize: 16
        //     },
        //   },
        //   //name的样式设计
        //   splitLine: {
        //     show: false,
        //   },
        //   axisLine: {
        //     show: false,
        //   },
        //   axisTick: {
        //     show: false,
        //   },
        // },
      ],
      series: [
        // {
        //   name: '全市投诉',
        //   type: 'bar',
        //   barWidth: 14, //柱状图宽度
        //   itemStyle: {
        //     barBorderRadius: [12, 12, 12, 12],
        //   },
        //   data: [80, 50, 40, 40, 60, 100, 80],
        //   z: 2,
        // },
        {
          name: '城管投诉',
          type: 'bar',
          barWidth: 14, //柱状图宽度
          barGap: '-100%',
          itemStyle: {
            barBorderRadius: [12, 12, 12, 12],
          },
          data: realDate,
          z: 1
        },
        // {
        //   name: '占全市总投诉比重',
        //   type: 'line',
        //   yAxisIndex: 1,
        //   symbol: 'circle',
        //   symbolSize: 8,
        //   data: [ 30, 40, 20, 10, 60, 30, 50],
        //   lineStyle: {
        //     width: 4
        //   },
        // },
      ]
    }
  }, [dataSource])

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

export default LineBarCharts
