今天就跟大家聊聊有关Echarts怎么在React 组件中使用，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。
使用node.js的npm命令安装：
计算
安全
数据库
网络和加速
企业服务
npm install echarts --saveEcharts的例子就是Echarts文档上介绍的最简单的应用。
render:function() {
var info = 1;
return (
<div className="mt15 xui-financialAnalyse-page">
<div className="xui-general">
<Chart data={info} data-info={info} />
</div>
</div>
)
}这是调用Echarts组件的地方，给里面传了2个属性（data-开头是H5定义的规范）
var Chart = React.createClass({
getInitialState: function() {
this.token = Store.addListener(this.onChangeData);
return {}
},
componentWillMount: function() {
var info = this.props.data;
//HTML5规定自定义属性要以data-开头，这样的可以如下取
console.log(this.props['data-info'])
Action.getInfo(info);
},
componentDidUpdate: function() {
this.showChart(this.state.data)
},
onChangeData: function() {
var data = Store.getData();
this.setState({
data: data['info']['data'] //后台返回的数据
});
},
showChart: function(dataSet){
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: 'ECharts 入门示例'
},
color: ['#3398DB'],
tooltip : {
trigger: 'axis',
axisPointer : {
type : 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'category',
data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
axisTick: {
alignWithLabel: true
}
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'你好',
type:'bar',
barWidth: '60%',
data: dataSet
}
]
};
myChart.setOption(option);
},
render: function() {
return (
<div id="main" style={{width: 500, height:500}}></div>
)
}
});上面是完整的demo Echarts组件的代码，主要是利用了React根据不同状态（3种状态）提供的处理函数（一共有5种）。
1、componentWillMount：在插入真实DOM之前发起Action，向后端请求数据。
2、onChangeStore：在数据变更的时候更新数据，并在getInitialState中加入监听Store中数据变化的监听器。
3、componentDidUpdate：在数据被重新渲染之后，触发showChart()方法绘制canvas。
4、showChart：配置Echarts，具体配置信息可以参考Echarts文档
5、如果组件生命周期结束，那么要加上如下代码：
componentWillUnmount: function() {
this.token.remove();
},否则会报错： Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the undefined component.
最后附上效果图：
看完上述内容，你们对Echarts怎么在React 组件中使用有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注亿速云行业资讯频道，感谢大家的支持。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
