在react项目中使用ECharts在页面显示多个柱状图

最近项目比较赶，又跑来做前端了，简单写一下逻辑吧。

import React, { Component } from 'react';
//引入需要的标签
import { Table,Input,Row,Col } from 'apollo-react';


// 引入 ECharts 主模块
import echarts from 'echarts/lib/echarts';
// 引入柱状图
import  'echarts/lib/chart/bar';
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';

class Catrogrom extends Component {
   constructor(){
       super();
       //写入用到的变量
       this.state={
           loading:true,
           numdata:[],
           typedata:[],
           ipad_num:[],
           ipad_version:[],
       }
   }
   fetchData=()=>{
       this.state.loading({loading:true});
       //请求后台数据如果有请求参数要写：let data = this.proms.from.getFieldsValue();
       $.post('/system/getdata.json',{
       //输入请求后台的请求参数，没写这里是无参,例：userName:data.userName    
       },(res)=>{
           //要请求后台数据的参数，用于后面调用参数
           numdata:res.deviceNum.num ,
           typedata:res.deviceNum.type ,
           ipad_num:res.versionNum.IPAD.num,
           ipad_version:res.versionNum.IPAD.version;
       }
   );
       this.zhuzhuangtu(this.state.numdata,this.state.numdata);
       this.zhuzhuangtuipad(this.state. ipad_num,this.state.ipad_version);
     
   }
   
   zhuzhuangtu(countNum,countType) {
       // 基于准备好的dom，初始化echarts实例
       var myChart = echarts.init(document.getElementById('main'));
       // 绘制图表
       myChart.setOption({
           title: { text: 'ECharts 入门示例' },
           tooltip: {},
           xAxis: {
               data: countNum
           },
           yAxis: {},
           series: [{
               name: '销量',
               type: 'bar',
               data: countType
           }]
       });
   }
   zhuzhuangtuipad(countNum,countType) {
       // 基于准备好的dom，初始化echarts实例
       var myChart = echarts.init(document.getElementById('ipad'));
       // 绘制图表
       myChart.setOption({
           title: { text: 'ECharts 入门示例' },
           tooltip: {},
           xAxis: {
               data: countNum
           },
           yAxis: {},
           series: [{
               name: '销量',
               type: 'bar',
               data: countType
           }]
       });
   }
   //加载数据
   componentDidMount=()=>{
       this.fetchData();
   }
   render() {
       return (
           <div>
               <div>
               <div id="main" style={{ width: 400, height: 400 }}></div>
           </div>
               <div>
                   <div id="ipad" style={{ width: 400, height: 400 }}></div>
               </div>
           </div>       
       );
   }
}

export default Catrogrom;

效果图：

image.png