一个html引入多个柱状图,在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 (

);

}

}

export default Catrogrom;

效果图：

image.png