在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 读书笔记索引贴
Jan 11 Javascript
jquery uaMatch源代码
Feb 14 Javascript
jQuery数组处理方法汇总
Jun 20 Javascript
33个优秀的 jQuery 图片展示插件分享
Mar 14 Javascript
javascript检查浏览器是否支持flash的实现代码
Aug 14 Javascript
原生JS实现仿淘宝网左侧商品分类菜单效果代码
Sep 10 Javascript
JavaScript实现简单获取当前网页网址的方法
Nov 09 Javascript
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
Mar 04 Javascript
在JavaScript中使用严格模式(Strict Mode)
Jun 13 Javascript
如何用webpack4.0撸单页/多页脚手架 (jquery, react, vue, typescript)
Jun 18 jQuery
VueQuillEditor富文本上传图片(非base64)
Jun 03 Javascript
js在HTML的三种引用方式详解
Aug 29 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环境搭建教程
2016/07/16 PHP
php文件包含目录配置open_basedir的使用与性能详解
2017/04/03 PHP
深入解析Laravel5.5中的包自动发现Package Auto Discovery
2017/09/13 PHP
PHP利用Mysql锁解决高并发的方法
2018/09/04 PHP
javascript Ext JS 状态默认存储时间
2009/02/15 Javascript
JavaScript Event学习第四章 传统的事件注册模型
2010/02/07 Javascript
Html5的placeholder属性(IE兼容)实现代码
2014/08/30 Javascript
Javascript基础教程之switch语句
2015/01/18 Javascript
jQuery标签编辑插件Tagit使用指南
2015/04/21 Javascript
jQuery unbind 删除绑定事件详解
2016/05/24 Javascript
json格式的javascript对象用法分析
2016/07/04 Javascript
jquery计算出left和top,让一个div水平垂直居中的简单实例
2016/07/13 Javascript
EasyUI Datebox 日期验证之开始日期小于结束时间
2017/05/19 Javascript
vue element-ui table表格滚动加载方法
2018/03/02 Javascript
JavaScript类型相关的常用操作总结
2019/02/14 Javascript
在vue中使用jsonp进行跨域请求接口操作
2020/10/29 Javascript
Python中的tuple元组详细介绍
2015/02/02 Python
python使用flask与js进行前后台交互的例子
2019/07/19 Python
使用django和vue进行数据交互的方法步骤
2019/11/11 Python
解决numpy矩阵相减出现的负值自动转正值的问题
2020/06/03 Python
通过自学python能找到工作吗
2020/06/21 Python
详解CSS3的图层阴影和文字阴影效果使用
2016/06/09 HTML / CSS
HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题
2021/01/19 HTML / CSS
伦敦著名的运动鞋综合商店:Footpatrol
2019/03/25 全球购物
精美的手工家居和生活用品:Nkuku
2019/11/01 全球购物
PHP面试题大全
2015/10/16 面试题
SQL数据库笔试题
2016/03/08 面试题
一些Solaris面试题
2015/12/22 面试题
给校长的建议书
2014/03/12 职场文书
安全宣传标语
2014/06/10 职场文书
大二学生学年自我鉴定
2014/09/12 职场文书
民主生活会发言材料
2014/10/20 职场文书
2014年高中班主任工作总结
2014/11/08 职场文书
介绍信的格式
2015/01/30 职场文书
2015世界地球日活动总结
2015/02/09 职场文书
一文搞懂Golang 时间和日期相关函数
2021/12/06 Golang