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

function SmoothLineTwo({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("smoothlinetwo");
    var myEcharts = echarts.init(huan_val);
    let date = [];
    let array = [];
    let array1 = [];
    let array2 = [];
    let array3 = [];
    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]);
    }
    let option = {
      xAxis: {
        type: 'category',
        data: date
      },
      grid: {
        left: '5%',
        right: '1%',
        top: '8%',
      },
      legend: {
        data: ['分裂指数', '缩减指数' ,'合并指数', '扩张指数']
      },
      tooltip: {
        trigger: 'axis'
      },
      color: ['#ff6868','#1684fc',"#02cafd",'#a491d7','#e840f7',"#36bba6","#7b32b2"],
      yAxis: {
        type: 'value',
        scale: true,
        name: '社\n区\n演\n化\n拓\n扑\n熵',
        min:0,
        splitLine : {
          show : true,
        },
        nameLocation:'end',
        nameTextStyle:{
          fontSize:14,  
          padding:[0,70,-120,0]
        }
      },
      dataZoom: [
        {
          type: 'inside',
          start: 0,
          end: 10
        },
        {
          start: 0,
          end: 10
        }
      ],
      series: [
        {
          data: array,
          type: 'line',
          name:"index_split",
          smooth: true
        },
        {
          data: array1,
          type: 'line',
          name:"index_shrink",
          smooth: true
        },
        {
          data: array2,
          type: 'line',
          name:"index_merge",
          smooth: true
        },
        {
          data: array3,
          type: 'line',
          name:"index_expand",
          smooth: true
        },
      ]
    };
    myEcharts.setOption(option);
  }

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