Echarts动态获取数据的使用

import React, { Component } from ‘react’;

// 引入 ECharts 主模块

import echarts from ‘echarts/dist/echarts.common’;
// 引入折线图
import ‘echarts/lib/chart/line’;
// 引入提示框和标题组件
import ‘echarts/lib/component/tooltip’;
import ‘echarts/lib/component/title’;
import {getMoneyChart} from ‘…/…/requests/http-req.js’

export default class ChartDetails extends Component {

constructor(props) {
super(props)
this.state = {
SeriesTotal:[],
cashInPerson:[],
cashOutPerson:[],
cashInNum:[],
cashOutNum:[],
dataList:[],
}
}

componentDidMount() {

this.getData()

}

getData=(req)=>{

console.log(this.props)
const{i}=this.props.value
if(i===1){     
  this.setState({
    legends:['注册人数','实名人数'],
  })
  this.getRegistorChart()
}

if(i===2){    
  this.setState({
    legends:['入金人数','入金金额','出金人数','出金金额'],
  })
  this.getMoneyChart()
}
if(i===3){      
  this.setState({
    legends:['手续费收入'],
  })
  this.getFeeIncome()
}

}

getMoneyChart=()=>{

const{endTimes,startTimes,endDate,startDate}=this.props.value
let fir=[]
let sec=[]
let third=[]
let fif=[]
let da=[]
getMoneyChart({
  beginTime:startDate||startTimes,
  endTime:endDate||endTimes
}).then(res=>{
  if(res.data.code==='0'){
    console.log(res.data.data)
    for(var i = 0; i<res.data.data.length; i++){
      // this.state.cashInPerson.push(res.data.data[i].cashInPerson);
      // this.state.cashOutPerson.push(res.data.data[i].cashOutPerson);
      // this.state.cashInNum.push(res.data.data[i].cashInNum);
      // this.state.cashOutNum.push(res.data.data[i].cashOutNum);
      // this.state.dataList.push(res.data.data[i].trendDate)
      fir.push(res.data.data[i].cashInPerson)
      sec.push(res.data.data[i].cashOutPerson)
      third.push(res.data.data[i].cashInNum)
      fif.push(res.data.data[i].cashOutNum)
      da.push(res.data.data[i].trendDate)
    }
    this.setState({
      cashInPerson:fir,
      cashOutPerson:sec,
      cashInNum:third,
      cashOutNum:fif,
      dataList:da
    })
  }
var myChart = echarts.init(document.getElementById('main'));
// 绘制图表
var option={
  // title: {text: '人数'},
  legend: {
    data: this.state.legends
  },
  tooltip: {
    trigger: 'axis'
  },
  grid: {
    left        : '3%',
    right       : '4%',
    bottom      : '10%',
    containLabel: true
  },
  xAxis: {
    name: '时间',
    type       : 'category',
    boundaryGap: false,
    data:this.state.dataList
  },
  yAxis: [
    { name:'人数',
      type: 'value'
    },
    { name:'金额',
      type: 'value',
    }
  ],
  series: [{
        name: '入金人数',
        type: 'line',
        areaStyle: {},
        // itemStyle : {  //设置折线的颜色
        //   normal : {
        //     lineStyle:{
        //       color:'#451200'
        //     }
        //   }
        // },
        data:this.state.cashInPerson
      },
      {
        name: '入金金额',
        type: 'line',
        areaStyle: {},
        yAxisIndex:1, //设置左右两个纵坐标
        data:this.state.cashInNum
      },
      {
        name: '出金人数',
        type: 'line',
        areaStyle: {}, // 背景颜色
        data:this.state.cashOutPerson

      },
      {
        name: '出金金额',
        type: 'line',
        areaStyle: {},
        yAxisIndex:1,
        data:this.state.cashOutNum
      },
  ]
}
myChart.setOption(option)
})

}
render() {
return (
<div id=“main” style={{ width: 1000, height: 390}}>
);
}
}