在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的数字改变的动画效果--可用来做计数器
Aug 11 Javascript
javascript 上下banner替换具体实现
Nov 14 Javascript
juery框架写的弹窗效果适合新手
Nov 27 Javascript
JavaScript支持的最大递归调用次数分析
Jun 24 Javascript
js密码强度检测
Jan 07 Javascript
jq给页面添加覆盖层遮罩的实例
Feb 16 Javascript
重新理解JavaScript的六种继承方式
Mar 24 Javascript
AngularJS基于factory创建自定义服务的方法详解
May 25 Javascript
浅谈JS获取元素的N种方法及其动静态讨论
Aug 25 Javascript
vue 子组件向父组件传值方法
Feb 26 Javascript
JQuery Ajax动态加载Table数据的实例讲解
Aug 09 jQuery
一步一步实现Vue的响应式(对象观测)
Sep 02 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处理Ajax请求与Ajax跨域问题
2017/02/13 PHP
实例讲解PHP页面静态化
2018/02/05 PHP
php创建类并调用的实例方法
2019/09/25 PHP
用js实现上传图片前的预览(TX的面试题)
2007/08/14 Javascript
jQuery 标题的自动翻转实现代码
2009/10/14 Javascript
JS+CSS 制作的超级简单的下拉菜单附图
2013/11/22 Javascript
网站内容禁止复制和粘贴、另存为的js代码
2014/02/26 Javascript
JS将光标聚焦在文本最后的实现代码
2014/03/28 Javascript
Bootstrap表单使用方法详解
2017/02/17 Javascript
原生JS实现左右箭头选择日期实例代码
2017/03/14 Javascript
xmlplus组件设计系列之树(Tree)(9)
2017/05/02 Javascript
JavaScript实现时间表动态效果
2017/07/15 Javascript
bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题
2017/08/10 Javascript
详解IWinter 一个路由转控制器的 Nodejs 库
2017/11/15 NodeJs
vue+iview写个弹框的示例代码
2017/12/05 Javascript
JS运动改变单物体透明度的方法分析
2018/01/23 Javascript
在vue中读取本地Json文件的方法
2018/09/06 Javascript
Vue使用.sync 实现父子组件的双向绑定数据问题
2019/04/04 Javascript
JavaScript代理模式原理与用法实例详解
2020/03/10 Javascript
Element Dropdown下拉菜单的使用方法
2020/07/26 Javascript
手把手带你搭建一个node cli的方法示例
2020/08/07 Javascript
[19:54]夜魇凡尔赛茶话会 第一期02:看图识人
2021/03/11 DOTA
Python实现多行注释的另类方法
2014/08/22 Python
Python写的服务监控程序实例
2015/01/31 Python
详解Python 4.0 预计推出的新功能
2019/07/26 Python
Staples英国官方网站:办公用品一站式采购
2017/10/06 全球购物
英国时尚泳装品牌:Maru Swimwear
2019/10/06 全球购物
Servlet方面面试题
2016/09/28 面试题
家长写给孩子的评语
2014/04/18 职场文书
护士上岗前培训自我鉴定
2014/04/20 职场文书
2014学习优秀共产党员先进事迹材料思想汇报
2014/09/14 职场文书
职工食堂管理制度
2015/08/06 职场文书
汶川大地震感悟
2015/08/10 职场文书
2016年“5.12”护士节慰问信
2015/11/30 职场文书
基于Java的MathML转图片的方法(示例代码)
2021/06/23 Java/Android