import React ,{ useEffect } from 'react';
import * as echarts from 'echarts';

function Line({data}) {

  useEffect(()=>{
    if(data){
      Init(data);
    }
  },[data])

  function Init(d) {
    var huan_val = document.getElementById("Line");
    var myEcharts = echarts.init(huan_val);
    let option = {
      color: ["#f8e367", "#58c0f0", "#ff9e48"],
      title: {
        show:false
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['提交数', '疑修数', '合并请求数'],
        right: 'center',
        bottom: '4%',
      },
      grid: {
        left: '4%',
        right: '5%',
        bottom: '16%',
        containLabel: true
      },
      toolbox: {
        feature: {
          // saveAsImage: {}
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: d.dates,
        axisTick:{
          show:false
        }
      },
      yAxis: {
        type: 'value',
        axisLine:{
          show:false
        },
        axisTick:{
          show:false
        },
        minInterval:1,
        splitNumber: 5,
      },
      series: [
        {
          name: '提交数',
          type: 'line',
          data: d.commits_count
        },
        {
          name: '疑修数',
          type: 'line',
          data: d.issues_count
        },
        {
          name: '合并请求数',
          type: 'line',
          data: d.pull_requests_count
        }
      ]
    };
    myEcharts.setOption(option);
  }

  return(
    <div id="Line" style={{height:"300px"}}></div>
  )
}
export default Line;