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

Posted 2020-10-22

方法一：

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-