在在React 组件中使用组件中使用Echarts的示例代码的示例代码
本篇文章主要介绍了在React 组件中使用Echarts的示例代码，小编觉得挺不错的，现在分享给大家，也给大家
做个参考。一起跟随小编过来看看吧
在完成一个需求的时候碰到一个场景需要使用柱状图。涉及到可视化，第一反应当然是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%',
普通网友
- 粉丝: 8
- 资源: 937
我的内容管理
收起
- 我的资源
快来上传第一个资源
我的收益 登录查看自己的收益
我的积分
登录查看自己的积分
我的C币
登录后查看C币余额
我的收藏 
我的下载 
下载帮助
评论1