在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 &amp; DHTML 实例编程(教程)基础知识
Jun 02 Javascript
javascript新手语法小结
Jun 15 Javascript
Javascript 网页黑白效果实现代码(兼容IE/FF等)
Apr 23 Javascript
EasySlider 基于jQuery功能强大简单易用的滑动门插件
Jun 11 Javascript
jquery 实现滚动条下拉时无限加载的简单实例
Jun 01 Javascript
AngularJS压缩JS技巧分析
Nov 08 Javascript
基于Bootstrap框架菜鸟入门教程(推荐)
Sep 17 Javascript
js 提取某()特殊字符串长度的实例
Dec 06 Javascript
chosen实现省市区三级联动
Aug 16 Javascript
在实例中重学JavaScript事件循环
Dec 03 Javascript
vue中watch的用法汇总
Dec 28 Vue.js
JavaScript分页组件使用方法详解
Jul 26 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 COOKIE设置为浏览器进程
2009/06/21 PHP
PHP统计目录下的文件总数及代码行数(去除注释及空行)
2011/01/17 PHP
解析PHP实现下载文件的两种方法
2013/07/05 PHP
php实现压缩合并js的方法【附demo源码下载】
2016/09/22 PHP
Discuz! 6.1_jQuery兼容问题
2008/09/23 Javascript
jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
2013/04/08 Javascript
js创建元素(节点)示例
2014/01/02 Javascript
jquery实现美观的导航菜单鼠标提示特效代码
2015/09/06 Javascript
jQuery+ajax实现实用的点赞插件代码
2016/07/06 Javascript
Bootstrap在线电子商务网站实战项目5
2016/10/14 Javascript
浅析Ajax语法
2016/12/05 Javascript
微信JSAPI支付操作需要注意的细节
2017/01/10 Javascript
实现微信小程序的wxml文件和wxss文件在webstrom的支持
2017/06/12 Javascript
js实现1,2,3,5数字按照概率生成
2017/09/12 Javascript
Node.js实现注册邮箱激活功能的方法示例
2018/03/23 Javascript
JS内部事件机制之单线程原理
2018/07/02 Javascript
vue组件中的样式属性scoped实例详解
2018/10/30 Javascript
TypeScript 运行时类型检查补充工具
2020/09/28 Javascript
python中遍历文件的3个方法
2014/09/02 Python
Python 正则表达式入门(初级篇)
2016/12/07 Python
python3.4用循环往mysql5.7中写数据并输出的实现方法
2017/06/20 Python
python 实现12bit灰度图像映射到8bit显示的方法
2019/07/08 Python
tensorflow pb to tflite 精度下降详解
2020/05/25 Python
python 基于PYMYSQL使用MYSQL数据库
2020/12/24 Python
苹果中国官方网站:Apple中国
2016/07/22 全球购物
电子狗项圈:eDog Australia
2019/12/04 全球购物
师范学院毕业生求职信范文
2013/12/26 职场文书
总经理秘书的岗位职责
2013/12/27 职场文书
《跨越海峡的生命桥》教学反思
2014/02/24 职场文书
资金主管岗位职责范本
2014/03/04 职场文书
十佳好少年事迹材料
2014/08/21 职场文书
大学生旷课检讨书1000字
2015/02/19 职场文书
离婚起诉书范本
2015/05/18 职场文书
给校长的建议书作文300字
2015/09/14 职场文书
2016年党员岗位承诺书
2016/03/24 职场文书
Python matplotlib绘制条形统计图 处理多个实验多组观测值
2022/04/21 Python