前端知识 | 浅谈在React中使用echarts

方法一:

echarts-for-react 是一个非常简单的针对于 React 的 Echarts 封装插件。

和使用所有其他插件一样,首先,我们需要 install 它:

第一步:

npminstall --save echarts(依赖)

npminstall --save echarts-for-react

第二步:

在我们的项目中导入:

importReactEcharts from 'echarts-for-react'

第三步:

在 render 函数中使用:

option={this.getOption}

notMerge={true}

lazyUpdate={true}

style={{width: ‘400px’, height: ‘400px’}}

/>

组件基本参数介绍:

option:接收一个对象,该对象为 echarts 的配置项,详见:                 http://echarts.baidu.com/option.html#title

notMerge:可选,是否不跟之前设置的 option 进行合并,默认为 false,即合并。

LazyUpdate:可选,在设置完 option 后是否不立即更新图表,默认为 false,即立即更新。

style:echarts 容器 div 大小,默认:{height: ‘300px’}

方法二:

当然,我们也不是真的需要一个 react-echarts 插件,我们可以使用 echarts 提供的模块化加载方法,按需导入我们需要的图表:

首先,我们需要在项目中导入 echarts:

importecharts from 'echarts/lib/echarts'    //必须

import'echarts/lib/component/tooltip'        //图表提示框(按需)

import'echarts/lib/component/grid'      //图表网格(按需)

import 'echarts/lib/chart/bar'                 //引入柱状图(按需)

import'echarts/lib/chart/line’              //引入折线图(按需)

然后:我们需要在 render 函数中为图表放好一个容器:

{this.chartContainer = refs}} style={{width: ‘400px’, height: ‘400px’}}>

最后,我们需要在合适的生命周期中绘制我们的图表:

letmyChart = echarts.init(this.chartContainer)

letoption = {//echarts配置项}

myChart.setOption(option,true)

好了,echarts 已经成功的在项目中跑起来啦!

-END-

原文地址:http://blog.51cto.com/13476205/2066664

时间: 2024-10-23 12:01:02

前端知识 | 浅谈在React中使用echarts的相关文章

前端知识 |浅谈React setState

setState的连锁反应 这是一个React组件实现组件可交互所需的流程,render()输出虚拟DOM,虚拟DOM转为DOM,再在DOM上注册事件,事件触发setState()修改数据,在每次调用setState方法时,React会自动执行render方法来更新虚拟DOM,如果组件已经被渲染,那么还会更新DOM中去.这个过程,setState就像一个点燃引擎的火源,发动了React核心的调度层,然后直至渲染层的改变.异步的setState刚接触React的同学,对React的setState

React | 高效前端之浅谈

React | 高效前端之浅谈 React在国外已被各个公司的各种产品大量使用,大众熟知的INS.Airbnb.Yahoo.ThoughtWorks等,都是使用React来实现UI开发的.很多人认为,虽然React在国外已经被广泛应用,但在国内,仍处新兴萌芽阶段.到底React在国内境遇如何?据海说科技了解,阿里内部系统.支付宝新一代框架.美团内部系统.知乎.滴滴.卖座电影.豆瓣等大型网站及平台正在运用React,或在进行系统重构.毫无疑问,React作为近两年前端三大流行框架之一,正成为程序员

前端架构浅谈

前端架构浅谈 0.前注 鉴于作者本人的能力有限(非常有限),并且依然在学习中,因此本文的高度和深度必然有所欠缺. 欢迎(并且非常欢迎)大家来批评指正,如果能详细的说明问题在哪里,如何解决和改正,那么就太感谢了!!! 我最喜欢听有理有据的批评了!! 本人QQ:20004604,邮箱:[email protected],期待你的交流. 1.为什么要有一个好的架构 首先明确一点,架构是为需求服务的. 前端架构存在的目的,就我个人理解来说,有以下几点: 1.提高代码的可读性. 一个好的架构,代码的可读性

浅谈游戏开发中碰撞检测

原创整理不易,转载请注明出处:使用Memcached.Spring AOP构建数据库前端缓存框架 代码下载地址:http://www.zuidaima.com/share/1781569917635584.htm 数 据库访问可能是很多网站的瓶颈.动不动就连接池耗尽.内存溢出等.前面已经讲到如果我们的网站是一个分布式的大型站点,那么使用memcached实现数 据库的前端缓存是个很不错的选择:但如果网站本身足够小只有一个服务器,甚至是vps的那种,不推荐使用memcached,使用Hiberna

浅谈SQL Server中的事务日志(四)----在完整恢复模式下日志的角色

浅谈SQL Server中的事务日志(四)----在完整恢复模式下日志的角色 本篇文章是系列文章中的第四篇,也是最后一篇,本篇文章需要前三篇的文章知识作为基础,前三篇的文章地址如下: 浅谈SQL Server中的事务日志(一)----事务日志的物理和逻辑构架 浅谈SQL Server中的事务日志(二)----事务日志在修改数据时的角色 浅谈SQL Server中的事务日志(三)----在简单恢复模式下日志的角色 简介 生产环境下的数据是如果可以写在资产负债表上的话,我想这个资产所占的数额一定不会

浅谈前、中、后缀表达式

浅谈前.中.后缀表达式 前.中.后缀表达式是信息学奥林匹克竞赛中比较鸡肋的知识点.但是知识点在考纲范围内,而且中缀表达式转后缀表达式是比较有用的知识.所以在这里为大家简单介绍一下. 之前在自学前.中.后缀表达式的时候,发现网上的很多博客和讲解的思路都不是很明了,或者就是对新手不是很友好,感谢@JZYShurak的讲解,让我对这个东西建立了一个直观的认识.所以我来补一篇比较基础,比较好理解,语言比较简洁的博客.希望能对各路大佬有所些许的帮助. 中缀表达式 中缀表达式就是我们生活中常用的表达式,简单

浅谈二维中的树状数组与线段树

一般来说,树状数组可以实现的东西线段树均可胜任,实际应用中也是如此.但是在二维中,线段树的操作变得太过复杂,更新子矩阵时第一维的lazy标记更是麻烦到不行. 但是树状数组在某些询问中又无法胜任,如最值等不符合区间减法的询问.此时就需要根据线段树与树状数组的优缺点来选择了. 做一下基本操作的对比,如下图. 因为线段树为自上向下更新,从而可以使用lazy标记使得矩阵的更新变的高校起来,几个不足就是代码长,代码长和代码长. 对于将将矩阵内元素变为某个值,因为树状数组自下向上更新,且要满足区间加法等限制

转: 浅谈C/C++中的指针和数组(二)

转自:http://www.cnblogs.com/dolphin0520/archive/2011/11/09/2242419.html 浅谈C/C++中的指针和数组(二) 前面已经讨论了指针和数组的一些区别,然而在某些情况下,指针和数组是等同的,下面讨论一下什么时候指针和数组是相同的. C语言标准对此作了说明: 规则1:表达式中的数组名被编译器当做一个指向该数组第一个元素的指针: 注:下面几种情况例外 1)数组名作为sizeof的操作数 2)使用&取数组的地址 规则2:下标总是与指针的偏移量

转:浅谈C/C++中的指针和数组(一)

转自:http://www.cnblogs.com/dolphin0520/archive/2011/11/09/2242138.html 浅谈C/C++中的指针和数组(一) 指针是C/C++的精华,而指针和数组又是一对欢喜冤家,很多时候我们并不能很好的区分指针和数组,对于刚毕业的计算机系的本科生很少有人能够熟练掌握指针以及数组的用法和区别.造成这种原因可能跟现在大学教学以及现在市面上流行的很多C或者C++教程有关,这些教程虽然通俗易懂,但是在很多关键性的地方却避而不谈或者根本阐述不清楚,甚至很