您好,登錄后才能下訂單哦!
方法一:
echarts-for-react 是一個非常簡單的針對于 React 的 Echarts 封裝插件。
和使用所有其他插件一樣,首先,我們需要 install 它:
第一步:
npminstall --save echarts(依賴)
npminstall --save echarts-for-react
第二步:
在我們的項目中導入:
importReactEcharts from 'echarts-for-react'
第三步:
在 render 函數(shù)中使用:
option={this.getOption}
notMerge={true}
lazyUpdate={true}
style={{width: ‘400px’, height: ‘400px’}}
/>
組件基本參數(shù)介紹:
option:接收一個對象,該對象為 echarts 的配置項,詳見: http://echarts.baidu.com/option.html#title
notMerge:可選,是否不跟之前設(shè)置的 option 進行合并,默認為 false,即合并。
LazyUpdate:可選,在設(shè)置完 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' //圖表網(wǎng)格(按需)
import 'echarts/lib/chart/bar' //引入柱狀圖(按需)
import'echarts/lib/chart/line’ //引入折線圖(按需)
然后:我們需要在 render 函數(shù)中為圖表放好一個容器:
{this.chartContainer = refs}} style={{width: ‘400px’, height: ‘400px’}}>
最后,我們需要在合適的生命周期中繪制我們的圖表:
letmyChart = echarts.init(this.chartContainer)
letoption = {//echarts配置項}
myChart.setOption(option,true)
好了,echarts 已經(jīng)成功的在項目中跑起來啦!
-END-
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。