在react中插入Echarts

来源：互联网发布：手机号码被软件标记编辑：程序博客网时间：2024/05/05 06:16

在毕业设计中需要用到图表，首先想到的就是百度Echarts，简单的叙述一下怎么插入，其余的全靠个人扩展。

用官方的案例：

首先建立一个组件

import React,{Component}from 'react'

export classWaterall extends React.Component{

render(){
return(
<divref="waterall"style={{width:"100%", height:"400px"}}></div>
)
}
}

然后根据官方事例引入Echarts模块

import React,{Component} from 'react';

// 引入 ECharts 主模块
var echarts =require('echarts/lib/echarts');
// 引入柱状图
require('echarts/lib/chart/bar');
// 引入提示框和标题组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');

exportclassWaterallextends React.Component{

render(){
return(
<divref="waterall"style={{width:"100%", height:"400px"}}></div>
)
}
}

因为Echarts是通过操控DOM来建立图表的所以我们需要获取到div，而在react中，渲染时产生的是虚拟DOM，所以我才用ref来取得div

import React,{Component} from 'react';

// 引入 ECharts 主模块
var echarts = require('echarts/lib/echarts');
// 引入柱状图
require('echarts/lib/chart/bar');
// 引入提示框和标题组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');

exportclassWaterallextends React.Component{

componentDidMount(){
const {data}= this.props;
letmyChart = echarts.init(this.refs.waterall);
myChart.setOption({
title: { text:'' },
tooltip: {},
xAxis: {
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5,20, 36, 10,10, 20]
}]
});
}

render(){
return(
<divref="waterall"style={{width:"100%", height:"400px"}}></div>
)
}
}

然后再插入到一个上级组件里，因为我是把这个组件和上级组件写在一个js里的，所以就不用再引入这个生成Echarts的组件

const WaterAll = ()=> (
<div> 
<Waterall />
</div>
)


export defaultWaterAll;

效果图

0 0