在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 相关文章推荐
Javascript中的数学函数
Apr 04 Javascript
再谈javascript 动态添加样式规则 W3C校检
Dec 25 Javascript
javascript学习笔记(十八) 获得页面中的元素代码
Jun 20 Javascript
JavaScript起点(严格模式深度了解)
Jan 28 Javascript
关于jQuery参考实例 1.0 jQuery的哲学
Apr 07 Javascript
用js实现输入提示(自动完成)的实例代码
Jun 14 Javascript
基于jquery插件实现常见的幻灯片效果
Nov 01 Javascript
JS判断不能为空实例代码
Nov 26 Javascript
js防止DIV布局滚动时闪动的解决方法
Oct 30 Javascript
jquery实现焦点轮播效果
Feb 23 Javascript
JS中DOM元素的attribute与property属性示例详解
Sep 04 Javascript
Vue中JS动画与Velocity.js的结合使用
Feb 13 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
完美的2个php检测字符串是否是utf-8编码函数分享
2014/07/28 PHP
详谈symfony window下的安装 安装时候出现的问题以及解决方法
2017/09/28 PHP
php实现socket推送技术的示例
2017/12/20 PHP
使用PHP开发留言板功能
2019/11/19 PHP
使用jquery自定义鼠标样式满足个性需求
2013/11/05 Javascript
ExtJS4中的requires使用方法示例介绍
2013/12/03 Javascript
判断文档离浏览器顶部的距离的方法
2014/01/08 Javascript
jQuery 过滤方法filter()选择具有特殊属性的元素
2014/06/15 Javascript
javascript实现分栏显示小技巧附图
2014/10/13 Javascript
JS实现窗口加载时模拟鼠标移动的方法
2015/06/03 Javascript
微信公众号开发 自定义菜单跳转页面并获取用户信息实例详解
2016/12/08 Javascript
canvas 弹幕效果(实例分享)
2017/01/11 Javascript
详解webpack 多入口配置
2017/06/16 Javascript
基于vue-simplemde实现图片拖拽、粘贴功能
2018/04/12 Javascript
Vue.js项目中管理每个页面的头部标签的两种方法
2018/06/25 Javascript
微信小程序自定义底部导航带跳转功能
2018/11/27 Javascript
python通过zlib实现压缩与解压字符串的方法
2014/11/19 Python
python实现读取命令行参数的方法
2015/05/22 Python
Python fileinput模块使用实例
2015/05/28 Python
实例讲解Python中函数的调用与定义
2016/03/14 Python
Python使用迭代器打印螺旋矩阵的思路及代码示例
2016/07/02 Python
Python实现的读取电脑硬件信息功能示例
2018/05/30 Python
详解Python字典小结
2018/10/20 Python
Python合并同一个文件夹下所有PDF文件的方法
2019/03/11 Python
Python Numpy 实现交换两行和两列的方法
2019/06/26 Python
Python如何实现Paramiko的二次封装
2021/01/30 Python
html5贪吃蛇游戏使用63行代码完美实现
2013/06/25 HTML / CSS
英国袜子店:Sock Shop
2017/01/11 全球购物
欧洲顶级体育电子商务网站:SportsShoes.com
2018/03/27 全球购物
小学开学寄语
2014/01/19 职场文书
幼儿园门卫岗位职责
2014/02/14 职场文书
安康杯竞赛活动总结
2014/05/05 职场文书
国企干部对照检查材料
2014/08/22 职场文书
村安全生产责任书
2014/08/25 职场文书
2014年党风建设工作总结
2014/11/19 职场文书
大学生读书笔记范文
2015/07/01 职场文书