import React, { Component, useState, useEffect } from 'react';
import { Form, Icon, Input, Button, DatePicker, Select, Card, Row, Col, Pagination, Alert, Table, Avatar, Radio, Modal, Descriptions } from 'antd';
import moment from 'moment';
import echarts from 'echarts/lib/echarts';
import EChart from '../../../../components/EchartsTest/EChart';
import router from 'umi/router';

class StatsChart extends React.Component {

  constructor(props) {
    super(props)
    this.state = {}
  }

  render() {
    const { data = {}} = this.props
    const options = {
      title: {
          text: this.props.title,
      },
      tooltip: {
          trigger: 'axis'
      },
      legend: {
          data: ['公客数', '私客数', '新增客户数', '访问人数']
      },
      grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
      },
      toolbox: {
          feature: {
              saveAsImage: {}
          }
      },
      xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLabel: {rotate: 45},
          data: data.timeList || []
      },
      yAxis: {
          type: 'value'
      },
      series: [
          {
              name: '公客数',
              type: 'line',
              data: data.gkList || []
              
          },
          {
              name: '私客数',
              type: 'line',
              data: data.skList || []
          },
          {
              name: '新增客户数',
              type: 'line',
              data: data.khList || []
          },
          {
              name: '访问人数',
              type: 'line',
              data: data.uvList || []
          }
      ]
  };
  

    return (
    <>
      <EChart options={options} style={{ width: '100%', height: '400px', }} />
    </>
    )
  }
}

export default StatsChart
