import React, { Component } from "react";
import style from "../index.less";
import { Radio} from '@commonComp';
import echarts from 'echarts';

class ChartItem extends Component {
  constructor(props) {
    super(props);
    this.drawChart = this.drawChart.bind(this);

  }
  drawChart(id){
    var myChart = echarts.init(document.getElementById(id));

    // 指定图表的配置项和数据
    var option = {
      tooltip: {},
      legend: {
        data:['销量']
      },
      xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
      },
      yAxis: {},
      series: [{
        name: '销量',
        type: 'line',
        data: [5, 20, 36, 10, 10, 20]
      }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  }
  componentDidMount(){
    this.drawChart('chart1');
    this.drawChart('chart2');
  }
  render() {
    const {title,data  } = this.props;
    return <div className={style['assess-item']}>
      <h2>{title}</h2>
      <div className={style['item-content']}>
        <div className={style["chart-box"]} id={'chart1'}></div>
        <div className={style["chart-box"]} id={'chart2'}></div>
      </div>
    </div>;
  }
}

export default ChartItem;