在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 相关文章推荐
JQuery读取XML文件数据并显示的实现代码
Dec 16 Javascript
JavaScript编写连连看小游戏
Jul 07 Javascript
举例讲解如何判断JavaScript中对象的类型
Apr 22 Javascript
js和jQuery设置Opacity半透明 兼容IE6
May 24 Javascript
通过正则表达式获取url中参数的简单实现
Jun 07 Javascript
总结Javascript中数组各种去重的方法
Oct 04 Javascript
canvas实现十二星座星空图
Feb 14 Javascript
js/jq仿window文件夹移动/剪切/复制等操作代码
Mar 08 Javascript
javascript实现延时显示提示框效果
Jun 01 Javascript
移动设备手势事件库Touch.js使用详解
Aug 18 Javascript
Vue Router去掉url中默认的锚点#
Aug 01 Javascript
axios向后台传递数组作为参数的方法
Aug 11 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
玩转虚拟域名◎+ .
2006/10/09 PHP
php adodb分页实现代码
2009/03/19 PHP
php FLEA中二叉树数组的遍历输出
2012/09/26 PHP
php代码书写习惯优化小结
2013/06/20 PHP
PHP循环函数使用介绍之PHP基础入门教程
2013/09/21 PHP
PHP连接MYSQL数据库实例代码
2016/01/20 PHP
Thinkphp5 微信公众号token验证不成功的原因及解决方法
2017/11/12 PHP
List Installed Software Features
2007/06/11 Javascript
JavaScript高级程序设计(第3版)学习笔记11 内建js对象
2012/10/11 Javascript
Json字符串转换为JS对象的高效方法实例
2013/05/01 Javascript
JavaScript中调用函数的4种方式代码实例
2015/07/08 Javascript
javascript设置和获取cookie的方法实例详解
2016/01/05 Javascript
jQuery分页插件jquery.pagination.js使用方法解析
2017/02/09 Javascript
JavaScript 程序错误Cannot use 'in' operator to search的解决方法
2017/07/10 Javascript
使用vue + less 实现简单换肤功能的示例
2018/02/21 Javascript
vue项目中添加单元测试的方法
2018/07/21 Javascript
[00:44]TI7不朽珍藏III——军团指挥官不朽展示
2017/07/15 DOTA
Python交换变量
2008/09/06 Python
Python实现获取某天是某个月中的第几周
2015/02/11 Python
Python Web版语音合成实例详解
2019/07/16 Python
python3中eval函数用法使用简介
2019/08/02 Python
python多线程实现同时执行两个while循环的操作
2020/05/02 Python
flask框架中的cookie和session使用
2021/01/31 Python
python中Array和DataFrame相互转换的实例讲解
2021/02/03 Python
CSS3 实现弹幕的示例代码
2017/08/07 HTML / CSS
css3实现蒙版弹幕功能
2019/06/18 HTML / CSS
命名空间(namespace)和程序集(Assembly)有什么区别
2015/09/25 面试题
个人简历自我评价八例
2013/10/31 职场文书
土建施工员岗位职责
2014/07/16 职场文书
2014年小学重阳节活动策划方案
2014/09/16 职场文书
个人工作表现评价材料
2014/09/21 职场文书
jquery插件实现悬浮的菜单
2021/04/24 jQuery
spring cloud 配置中心客户端启动遇到的问题
2021/09/25 Java/Android
JS 基本概念详细介绍
2021/10/16 Javascript
mysql 生成连续日期及变量赋值
2022/03/20 MySQL
java中为什么说子类的构造方法默认访问的是父类的无参构造方法
2022/04/13 Java/Android