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

function Line({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) {
    let chartDom = document.getElementById('branchLine');
    let myChart = echarts.init(chartDom);
    let option;
    myChart.setOption(
      (option = {
        tooltip: {
          trigger: 'axis'
        },
        color: ['orange'],
        grid: {
          left: '5%',
          right: '1%',
          top: '8%'
        },
        xAxis: {
          data: data.map(function (item) {
            return item[0];
          })
        },
        yAxis: {
          type: 'value',
          scale: true,
          name: '社\n群\n激\n发\n演\n化\n拓\n扑\n熵',
          min:0,
          splitLine : {
            show : true,
          },
          nameLocation:'end',
          nameTextStyle:{
            fontSize:14,  
            padding:[0,70,-120,0]
          }
        },
        dataZoom: [
          {
            startValue: '2022-06-01'
          },
          {
            type: 'inside'
          }
        ],
        series: {
          type: 'line',
          data: data.map(function (item) {
            return item[1];
          })
        }
      })
    );
    option && myChart.setOption(option);
  }

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