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,
        subtext: this.props.subtext,
      },
      xAxis: {
        type: 'category',
        axisLabel: { rotate: 45 },
        // data: data.buildingNameList || []
      },
      grid: {
        bottom: '30%'
      },
      tooltip: {},
      yAxis: {
        type: 'value'
      },
      dataset: {
        // 用 dimensions 指定了维度的顺序。直角坐标系中，
        // 默认把第一个维度映射到 X 轴上，第二个维度映射到 Y 轴上。
        // 如果不指定 dimensions，也可以通过指定 series.encode
        // 完成映射，参见后文。
        dimensions: ['buildingName', 'num' ],
        source: data
    },
      series: {
        type: 'bar',
        name: this.props.title,
        barWidth: 50,
        // data: data.numList || [],
        itemStyle: {
          normal: {
            barBorderRadius: [50, 50, 0, 0],
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
              offset: 0,
              color: '#FFC6AA'
            }, {
              offset: 1,
              color: '#FF7E48'
            }]),
            shadowColor: 'rgba(0, 0, 0, 0.4)',

          }
        }
      }
    }

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

export default StatsChart
