方法一：

創(chuàng)新互聯(lián)專注于企業(yè)營銷型網(wǎng)站建設(shè)、網(wǎng)站重做改版、泊頭網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5建站、商城系統(tǒng)網(wǎng)站開發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)公司、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為泊頭等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

echarts-for-react 是一個(gè)非常簡單的針對于 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è)對象，該對象為 echarts 的配置項(xiàng)，詳見：                 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)目中跑起來啦！

-END-

創(chuàng)新互聯(lián)www.cdcxhl.cn，專業(yè)提供香港、美國云服務(wù)器，動態(tài)BGP最優(yōu)骨干路由自動選擇，持續(xù)穩(wěn)定高效的網(wǎng)絡(luò)助力業(yè)務(wù)部署。公司持有工信部辦法的idc、isp許可證， 機(jī)房獨(dú)有T級流量清洗系統(tǒng)配攻擊溯源，準(zhǔn)確進(jìn)行流量調(diào)度，確保服務(wù)器高可用性。佳節(jié)活動現(xiàn)已開啟，新人活動云服務(wù)器買多久送多久。

文章標(biāo)題：前端知識|淺談在React中使用echarts-創(chuàng)新互聯(lián)
標(biāo)題來源：http://weahome.cn/article/dosgsh.html