在react中插入Echarts

最新推荐文章于 2025-10-10 15:23:27 发布

原创最新推荐文章于 2025-10-10 15:23:27 发布 · 2.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react #Echarts

react 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何在React项目中引入并使用Echarts库来创建动态图表，包括组件搭建、模块引入及图表配置等关键步骤。

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

用官方的案例：

首先建立一个组件

import React,{Component}
from 'react'

export class
Waterall 
extends React.Component{

render(){
return(
<div
ref="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');

export
class
Waterall
extends React.Component{

render(){
return(
<div
ref="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');

export
class
Waterall
extends React.Component{

componentDidMount(){
const {data}
= this.props;
let
myChart 
= 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(
<div
ref="waterall"
style={{width:
"100%", height:
"400px"}}></div>
)
}
}

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

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


export default
WaterAll;

效果图