未加星标

在React 组件中使用Echarts的示例代码

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二03 | 时间 | 作者 红领巾 ] 0人收藏点击收藏

在完成一个需求的时候碰到一个场景需要使用柱状图。涉及到可视化,第一反应当然是Echarts了。平时用js加载Echarts组件很方便,但是在React中就要费下神了。各种连蒙带猜实现了。edmo里的

这里我们要在自己搭建的react项目中使用ECharts,我们可以在ECharts官网上看到有一种方式是在 webpack 中使用 ECharts,我们需要的就是这种方法。

我们在使用ECharts之前要先安装ECharts,在以往的开发模式中,我们很多使用就是把官网中的ECharts的核心js文件导入到我们的html或者是jsp等文件里面,但是在react项目中,我们可以直接使用node.js的npm命令安装:

npm install echarts --save

Echarts的例子就是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.

最后附上效果图:

 
在React 组件中使用Echarts的示例代码
    

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: ReactHTMLHTML5数据需求
分页:12
转载请注明
本文标题:在React 组件中使用Echarts的示例代码
本站链接:http://www.codesec.net/view/568425.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(23)