在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 相关文章推荐
十分钟打造AutoComplete自动完成效果代码
Dec 26 Javascript
如何获取网站icon有哪些可行的方法
Jun 05 Javascript
jquery提示效果实例分析
Nov 25 Javascript
Javascript基础教程之定义和调用函数
Jan 18 Javascript
js实现将选中值累加到文本框的方法
Aug 12 Javascript
AngularJS Module方法详解
Dec 08 Javascript
Express的路由详解
Dec 10 Javascript
获取阴历(农历)和当前日期的js代码
Feb 15 Javascript
javascript实现的左右无缝滚动效果
Sep 19 Javascript
JavaScript函数定义方法实例详解
Mar 05 Javascript
解决antd datepicker 获取时间默认少8个小时的问题
Oct 29 Javascript
html5中sharedWorker实现多页面通信的示例代码
May 07 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四大安全策略
2014/03/12 PHP
php基于curl主动推送最新内容给百度收录的方法
2016/10/14 PHP
PHP实现的文件浏览器功能简单示例
2019/09/12 PHP
javascript 框架小结 个人工作经验
2009/06/13 Javascript
IE6 弹出Iframe层中的文本框“经常”无法获得输入焦点
2009/12/27 Javascript
基于jquery.Jcrop的头像编辑器
2010/03/01 Javascript
Javascript生成json的函数代码(可以用php的json_decode解码)
2012/06/11 Javascript
EasyUI中实现form表单提交的示例分享
2015/03/01 Javascript
JavaScript检查子字符串是否在字符串中的方法
2016/02/03 Javascript
jquery ajaxfileupload异步上传插件使用详解
2017/02/08 Javascript
Node.js中.pfx后缀文件的处理方法
2017/03/10 Javascript
深入理解Vue.js源码之事件机制
2017/09/27 Javascript
es6在react中的应用代码解析
2017/11/08 Javascript
vue-cli项目优化方法- 缩短首屏加载时间
2018/04/01 Javascript
微信小程序学习笔记之文件上传、下载操作图文详解
2019/03/29 Javascript
javascript this指向相关问题及改变方法
2020/11/19 Javascript
使用Python下载Bing图片(代码)
2013/11/07 Python
python基础教程之实现石头剪刀布游戏示例
2014/02/11 Python
利用Python中unittest实现简单的单元测试实例详解
2017/01/09 Python
深入理解Python中的内置常量
2017/05/20 Python
python实现微信跳一跳辅助工具步骤详解
2018/01/04 Python
Python使用Windows API创建窗口示例【基于win32gui模块】
2018/05/09 Python
django加载本地html的方法
2018/05/27 Python
Python目录和文件处理总结详解
2019/09/02 Python
PyQt5事件处理之定时在控件上显示信息的代码
2020/03/25 Python
Keras设定GPU使用内存大小方式(Tensorflow backend)
2020/05/22 Python
HTML5之SVG 2D入门12—SVG DOM及DOM操作介绍
2013/01/30 HTML / CSS
AmazeUI 网格的实现示例
2020/08/13 HTML / CSS
爱普生美国官网:Epson美国
2018/11/05 全球购物
String这个类型的class为何定义成final?
2012/11/13 面试题
任命书模板
2014/06/04 职场文书
中华在我心中演讲稿
2014/09/13 职场文书
戒毒悔改检讨书
2014/09/21 职场文书
2014年公务员个人工作总结
2014/11/22 职场文书
《乌鸦喝水》教学反思
2016/02/19 职场文书
修改MySQL的默认密码的四种小方法
2021/05/26 MySQL