方法一：

echarts-for-react 是一個(gè)非常簡(jiǎn)單的針對(duì)于 React 的 Echarts 封裝插件。

和使用所有其他插件一樣，首先，我們需要 install 它：

第一步：

npminstall --save echarts（依賴）

npminstall --save echarts-for-react

第二步：

在我們的項(xiàng)目中導(dǎo)入：

importReactEcharts from 'echarts-for-react'

第三步：

在 render 函數(shù)中使用：

? option={this.getOption}

? notMerge={true}

? lazyUpdate={true}

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

/>

組件基本參數(shù)介紹：

option:接收一個(gè)對(duì)象，該對(duì)象為 echarts 的配置項(xiàng)，詳見(jiàn)：?????????? ????? http://echarts.baidu.com/option.html#title

notMerge:可選，是否不跟之前設(shè)置的 option 進(jìn)行合并，默認(rèn)為 false，即合并。

LazyUpdate:可選，在設(shè)置完 option 后是否不立即更新圖表，默認(rèn)為 false，即立即更新。

style:echarts 容器 div 大小，默認(rèn)：{height: ‘300px’}

方法二：

當(dāng)然，我們也不是真的需要一個(gè) react-echarts 插件，我們可以使用 echarts 提供的模塊化加載方法，按需導(dǎo)入我們需要的圖表：

首先，我們需要在項(xiàng)目中導(dǎo)入 echarts：

importecharts from 'echarts/lib/echarts' ?? //必須

import'echarts/lib/component/tooltip'??????? //圖表提示框（按需）

import'echarts/lib/component/grid'????? //圖表網(wǎng)格（按需）

import 'echarts/lib/chart/bar'???????????????? //引入柱狀圖（按需）

import'echarts/lib/chart/line’????????????? //引入折線圖（按需）

然后：我們需要在 render 函數(shù)中為圖表放好一個(gè)容器：

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

最后，我們需要在合適的生命周期中繪制我們的圖表：

letmyChart = echarts.init(this.chartContainer)

letoption = {//echarts配置項(xiàng)}

myChart.setOption(option,true)

好了，echarts 已經(jīng)成功的在項(xiàng)目中跑起來(lái)啦！

-END-?