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

  1. 在react项目中使用ECharts

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

  2. 规避 React 组件中的 bind(this)

    React 组件中处理 onClick 类似事件绑定的时候,是需要显式给处理器绑定上下文(context)的,这一度使代码变得冗余和难看. 请看如下的示例: class App extends Com ...

  3. react组件中的constructor和super小知识

    react组件中的constructor和super小知识 1.react中用class申明的类一些小知识 如上图:类Child是通过class关键字申明,并且继承于类React. A.Child的类 ...

  4. React组件中的key

    React组件中的key 一.key的作用 react中的key属性,它是一个特殊的属性,它是出现不是给开发者用的(例如你为一个组件设置key之后不能获取组件的这个key props),而是给reac ...

  5. 【React】282- 在 React 组件中使用 Refs 指南

    英文:Yomi Eluwande  译文:joking_zhang https://segmentfault.com/a/1190000019277029 使用 React 时,我们的默认思维方式应该 ...

  6. React组件中对子组件children进行加强

    React组件中对子组件children进行加强 问题 如何对组件的children进行加强,如:添加属性.绑定事件,而不是使用<div>{this.props.children}< ...

  7. 在 React 组件中使用 Refs 指南

    原文:Fullstack React's Guide to using Refs in React Components作者:Yomi Eluwande译者:博轩 译文:https://segment ...

  8. react native中使用echarts

    开发平台:mac pro node版本:v8.11.2 npm版本:6.4.1 react-native版本:0.57.8 native-echarts版本:^0.5.0 目标平台:android端收 ...

  9. 在 React 组件中监听 android 手机物理返回/回退/back键事件

    当前端页面嵌入到 webview 中运行时,有时会需要监听手机的物理返回按键事件来做一些自定义的操作. 比如我最近遇到的,在一个页面里面有批量选择的功能,当点击手机的返回键时,清除页面上的选中状态.我 ...

随机推荐

  1. cxf WebService设置wsdl中soapAction的值

    用cxf开发一个WebService很简单,只需要下面几步: 1.定义接口 public interface HelloService { String hello(); } 2.实现 public ...

  2. PHP新手常见的一些不好习惯(抄的 有待理解)

    1.不写注释(是个好习惯,不过也没必要每个语句都要写) 2.不使用可以提高生产效率的IDE工具 3.不使用版本控制 4.不按照编程规范写代码 5.不使用统一的方法 6.编码前不去思考和计划 7.在执行 ...

  3. php备份mysql的代码

    1. mydb.php //DB类2. backup.php //备份脚本3. restore.php //还原脚本 mydb.php <?class db{ var $linkid;var $ ...

  4. oracleDBA-D3

    1.静态参数文件 PFILE:使用操作系统提供的VIM进行编辑,包含多个参数文件 参数文件名是:init.ora(如: D:\app\Administrator\admin\orcl\pfile) 其 ...

  5. 采用cocos2d-x lua 的listview 实现pageview的翻页效果之上下翻页效果

    --翻页滚动效果local function fnScrollViewScrolling( sender,eventType)    -- body    if eventType == 10 the ...

  6. [Android Pro] Android TypedValue.applyDimension()的用法

    reference to  : http://blog.csdn.net/voo00oov/article/details/45745819 这个方法的作用是 把Android系统中的非标准度量尺寸转 ...

  7. Xcode 常用快捷键

    一.Xcode基本快捷键 1.1.新建项目 Shift + CMD + N 1.2.项目中新建文件 CMD + N 1.3.运行 CMD + R 1.4.编译 CMD + B 1.5.停止运行 CMD ...

  8. JS身份证号码校验

    var Wi = [ 7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2, 1 ]; // 加权因子 var ValideCode = [ 1, 0 ...

  9. 快速掌握、学习HTML的方法

    链接 超级链接用<a>标签表示,href属性指定了链接到的地址.<a>标签可以包含文本,也可以包含图片. 点击查看效果 <a href="http://deer ...

  10. 复制远程共享文件夹内容到本地(python脚本实例)

    本人自用脚本(python): #-*- coding:utf-8 -*- import sys , os , re def copyFileDir(srcFilename , desFilename ...