前端知识|浅谈在React中使用echarts-创新互联

方法一:

创新互联专注于企业营销型网站建设、网站重做改版、泊头网站定制设计、自适应品牌网站建设、H5建站商城系统网站开发、集团公司官网建设、成都外贸网站建设公司、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为泊头等各大城市提供网站开发制作服务。

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

方法二:

当然,我们也不是真的需要一个 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-

创新互联www.cdcxhl.cn,专业提供香港、美国云服务器,动态BGP最优骨干路由自动选择,持续稳定高效的网络助力业务部署。公司持有工信部办法的idc、isp许可证, 机房独有T级流量清洗系统配攻击溯源,准确进行流量调度,确保服务器高可用性。佳节活动现已开启,新人活动云服务器买多久送多久。


文章名称:前端知识|浅谈在React中使用echarts-创新互联
当前URL:http://myzitong.com/article/dosgsh.html