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


Posted in Javascript onNovember 08, 2017

在完成一个需求的时候碰到一个场景需要使用柱状图。涉及到可视化,第一反应当然是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 相关文章推荐
文本框中,回车键触发事件的js代码[多浏览器兼容]
Jun 07 Javascript
js中对象的声明方式以及数组的一些用法示例
Dec 11 Javascript
JavaScript中对象属性的添加和删除示例
May 12 Javascript
node.js中的console.time方法使用说明
Dec 09 Javascript
jquery+ajax实现跨域请求的方法
Jan 20 Javascript
php结合imgareaselect实现图片裁剪
Jul 05 Javascript
初步了解javascript面向对象
Nov 09 Javascript
学习javascript面向对象 理解javascript对象
Jan 04 Javascript
JavaScript实现多种排序算法
Feb 24 Javascript
分享一道关于闭包、bind和this的面试题
Feb 20 Javascript
微信小程序中使用ECharts 异步加载数据的方法
Jun 27 Javascript
使用Node.js写一个代码生成器的方法步骤
May 10 Javascript
浅谈mint-ui loadmore组件注意的问题
Nov 08 #Javascript
es6在react中的应用代码解析
Nov 08 #Javascript
mac中利用NVM管理不同node版本的方法详解
Nov 08 #Javascript
浅谈vue-router2路由参数注意的问题
Nov 08 #Javascript
基于jQuery中ajax的相关方法汇总(必看篇)
Nov 08 #jQuery
javaScript之split与join的区别(详解)
Nov 08 #Javascript
AngularJs 终极购物车(实例讲解)
Nov 08 #Javascript
You might like
PHP图片处理类 phpThumb参数用法介绍
2012/03/11 PHP
destoon调用discuz论坛中带图片帖子的实现方法
2014/08/21 PHP
thinkPHP批量删除的实现方法分析
2016/11/09 PHP
PHP实现压缩图片尺寸并转为jpg格式的方法示例
2018/05/10 PHP
Riot.js 快速的JavaScript单元测试框架
2009/11/09 Javascript
判断iframe是否加载完成的完美方法
2010/01/07 Javascript
JS判断页面加载状态以及添加遮罩和缓冲动画的代码
2012/10/11 Javascript
简洁Ajax函数处理(示例代码)
2013/11/15 Javascript
浅析webapp框架AngularUI的demo
2014/12/21 Javascript
jQuery无刷新切换主题皮肤实例讲解
2015/10/21 Javascript
ionic 上拉菜单(ActionSheet)实例代码
2016/06/06 Javascript
AngularJS基础 ng-model 指令详解及示例代码
2016/08/02 Javascript
微信小程序 页面之间传参实例详解
2017/01/13 Javascript
jQuery插件FusionCharts实现的2D面积图效果示例【附demo源码下载】
2017/03/06 Javascript
js中获取键盘按下键值event.keyCode、event.charCode和event.which的兼容性详解
2017/03/15 Javascript
JavaScript屏蔽Backspace键的实现代码
2017/11/02 Javascript
Vue.js 实现微信公众号菜单编辑器功能(一)
2018/05/08 Javascript
vue2.0 实现导航守卫(路由守卫)
2018/05/21 Javascript
仿vue-cli搭建属于自己的脚手架的方法步骤
2019/04/17 Javascript
聊聊Vue 中 title 的动态修改问题
2019/06/11 Javascript
javascript 原型与原型链的理解及应用实例分析
2020/02/10 Javascript
javascript用defineProperty实现简单的双向绑定方法
2020/04/03 Javascript
react组件基本用法示例小结
2020/04/27 Javascript
jquery实现加载更多&quot;转圈圈&quot;效果(示例代码)
2020/11/09 jQuery
让Vue响应Map或Set的变化操作
2020/11/11 Javascript
Python pass 语句使用示例
2014/03/11 Python
python在windows命令行下输出彩色文字的方法
2015/03/19 Python
Python遍历文件夹和读写文件的实现代码
2016/08/28 Python
Python 处理数据的实例详解
2017/08/10 Python
Python面向对象基础入门之设置对象属性
2018/12/11 Python
python 如何把docker-compose.yaml导入到数据库相关条目里
2021/01/15 Python
css3编写浏览器背景渐变背景色的方法
2018/03/05 HTML / CSS
员工试用期自我评价
2014/09/18 职场文书
教师遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
2014年学校党建工作汇报材料
2014/11/02 职场文书
pandas中DataFrame数据合并连接(merge、join、concat)
2021/05/30 Python