概述
在毕业设计中需要用到图表，首先想到的就是百度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;
效果图
最后
以上就是热情夏天为你收集整理的在react中插入Echarts的全部内容，希望文章能够帮你解决在react中插入Echarts所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复