import React ,{ useEffect } from 'react';
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/line';
import axios from 'axios';

function SmoothLine({url}) {
  
  useEffect(()=>{
    if(url){
      getInit(url);
    }
  },[url])

  function getInit(url){
    axios.get(url).then(result=>{
      if(result && result.data){
        Init(result.data);
      }
    }).catch(error=>{})
  }
  function Init(data) {
    var huan_val = document.getElementById("smoothline");
    var myEcharts = echarts.init(huan_val);
    let date = [];
    let array = [];
    let array1 = [];
    let array2 = [];
    let array3 = [];
    let array4 = [];
    let array5 = [];
    let array6 = [];
    for(var i= 0;i<data.length;i++){
      date.push(data[i][0]);
      array.push(data[i][1]);
      array1.push(data[i][2]);
      array2.push(data[i][3]);
      array3.push(data[i][4]);
      array4.push(data[i][5]);
      array5.push(data[i][6]);
      array6.push(data[i][7]);
    }
    let option = {
      xAxis: {
        type: 'category',
        data: date
      },
      grid: {
        left: '5%',
        right: '1%',
        bottom: '18%'
      },
      legend: {
        data: ['split', 'shrink' ,'merge', 'expand', 'emerge', 'extinct', 'undefined']
      },
      tooltip: {
        trigger: 'axis'
      },
      color: ['#ee955a','#466AFF',"#d92d4c",'red','#9ed600',"#2a0dc1","#fffa00"],
      yAxis: {
        type: 'value'
      },
      dataZoom: [
        {
          type: 'inside',
          start: 0,
          end: 10
        },
        {
          start: 0,
          end: 10
        }
      ],
      series: [
        {
          data: array,
          type: 'line',
          name:"split",
          smooth: true
        },
        {
          data: array1,
          type: 'line',
          name:"shrink",
          smooth: true
        },
        {
          data: array2,
          type: 'line',
          name:"merge",
          smooth: true
        },
        {
          data: array3,
          type: 'line',
          name:"expand",
          smooth: true
        },
        {
          data: array4,
          type: 'line',
          name:"emerge",
          smooth: true
        },
        {
          data: array5,
          type: 'line',
          name:"extinct",
          smooth: true
        },
        {
          data: array6,
          type: 'line',
          name:"undefined",
          smooth: true
        }
      ]
    };
    myEcharts.setOption(option);
  }

  return(
    <div id="smoothline" style={{height:"400px"}}></div>
  )
}
export default SmoothLine;