在React 组件中使用Echarts

　　在完成一个需求的时候碰到一个场景需要使用柱状图。涉及到可视化，第一反应当然是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.

　　最后附上效果图：

转载于:https://www.cnblogs.com/youyouluo/p/5981493.html

在React 组件中使用Echarts相关推荐

React 项目中使用Echarts
直接上代码吧: react 项目中添加Echarts 相关模块 npm install echarts --save 代码: import React from 'react' import * as ...
react 组件中使用组件_禁止使用React功能组件的7个理由
react 组件中使用组件 Are React's Functional Components Worth The Cost? React的功能组件值得吗? Update 5/31/19: React ...
react组件中箭头函数的使用
文章目录 1概念 2this指向三.箭头函数不能改变this指向四.箭头函数的调用(这边以React组件举例) 1概念箭头函数是匿名函数的另一种表达形式,简化写法. // 普通函数 const ...
import引入json文件_在React组件中导入Json文件
我正在尝试在React组件中加载languages.json文件.当我想导入json文件时,我在第一步收到以下错误.这是错误: ERROR in ./app/languages.json Module ...
3. React 组件中怎么做事件代理？它的原理是什么？
3. React 组件中怎么做事件代理?它的原理是什么? React 基于 Virtual DOM 实现了一个 SyntheticEvent 层(合成事件层), 定义的事件处理器会接收到一个合成事件对 ...
如何在React框架中使用ECharts图库表制图？
在前端开发过程中避免不会遇到需要进行数据可视化的操作,但单单通过html5的Canvas实现起来比较麻烦,所以才会用到ECharts,HighCharts,,Chart.js等,今天小千就来教大家如何 ...
在Ant Design Pro（React）中使用ECharts
使用Ant Design Pro解决方案可以快速搭建前端框架,而ECharts是前端最流行,功能最强大的前端图表库. 下面将讲解下如何在Ant Design Pro使用ECharts. Ant Des ...
web前端教程之如何在React框架中使用ECharts图库表制图？
在前端开发过程中避免不会遇到需要进行数据可视化的操作,但单单通过html5的Canvas实现起来比较麻烦,所以才会用到ECharts,HighCharts,,Chart.js等,今天小千就来教大家如何 ...
【React】1128- 如何在 React 组件中优雅的实现依赖注入
控制反转(Inversion of Control,缩写为IoC),是面向对象编程中的一种设计原则,可以用来减低计算机代码之间的耦合度,其中最常见的方式就是依赖注入(Dependency Inject ...

在React 组件中使用Echarts

在React 组件中使用Echarts相关推荐

最新文章

热门文章