簡介
使用echarts-for-react插件可以在React中調(diào)用echarts接口直接渲染出Echarts圖表杆怕，只要傳入相關(guān)的參數(shù)和數(shù)據(jù)即可叙凡。代碼簡介窖认，功能使用劲藐。
安裝
npm install --save echarts-for-react
# `echarts` is the peerDependence of `echarts-for-react`, you can install echarts with your own version.
npm install --save echarts
DEMO演示
git clone https://github.com/hustcc/echarts-for-react.git
npm install
npm start
demo中可以看到各種不同類型的圖表畦贸，在項目開發(fā)過程中有需要可以查閱陨闹，copy相關(guān)的代碼，或者查看圖表的數(shù)據(jù)格式薄坏，了解圖表的相關(guān)功能正林，以便更好地引用及重構(gòu)圖表。
使用
import * as React from "react";
import ReactEcharts from "echarts-for-react";
<ReactEcharts
option={this.getOption()}
notMerge={true}
lazyUpdate={true}
theme={"theme_name"}
onChartReady={this.onChartReadyCallback}
onEvents={EventsDict}
opts={} />
也可手動導(dǎo)入echarts.js模塊以減小包大小
import React from 'react';
// import the core library.
import ReactEchartsCore from 'echarts-for-react/lib/core';
// then import echarts modules those you have used manually.
import echarts from 'echarts/lib/echarts';
// import 'echarts/lib/chart/line';
import 'echarts/lib/chart/bar';
// import 'echarts/lib/chart/pie';
// import 'echarts/lib/chart/scatter';
// import 'echarts/lib/chart/radar';
// import 'echarts/lib/chart/map';
// import 'echarts/lib/chart/treemap';
// import 'echarts/lib/chart/graph';
// import 'echarts/lib/chart/gauge';
// import 'echarts/lib/chart/funnel';
// import 'echarts/lib/chart/parallel';
// import 'echarts/lib/chart/sankey';
// import 'echarts/lib/chart/boxplot';
// import 'echarts/lib/chart/candlestick';
// import 'echarts/lib/chart/effectScatter';
// import 'echarts/lib/chart/lines';
// import 'echarts/lib/chart/heatmap';
// import 'echarts/lib/component/graphic';
// import 'echarts/lib/component/grid';
// import 'echarts/lib/component/legend';
import 'echarts/lib/component/tooltip';
// import 'echarts/lib/component/polar';
// import 'echarts/lib/component/geo';
// import 'echarts/lib/component/parallel';
// import 'echarts/lib/component/singleAxis';
// import 'echarts/lib/component/brush';
import 'echarts/lib/component/title';
// import 'echarts/lib/component/dataZoom';
// import 'echarts/lib/component/visualMap';
// import 'echarts/lib/component/markPoint';
// import 'echarts/lib/component/markLine';
// import 'echarts/lib/component/markArea';
// import 'echarts/lib/component/timeline';
// import 'echarts/lib/component/toolbox';
// import 'zrender/lib/vml/vml';
<ReactEchartsCore
echarts={echarts}
option={this.getOption()}
notMerge={true}
lazyUpdate={true}
theme={"theme_name"}
onChartReady={this.onChartReadyCallback}
onEvents={EventsDict}
opts={} />
組件的參數(shù)簡介
-
option(required, object)
這個是核心颤殴，是必須的觅廓，包含echarts圖表的配置項和數(shù)據(jù)，如標題title涵但、圖例legend杈绸、提示框tooltip、x軸xAxis矮瘟、y軸yAxis瞳脓、series等，詳見 http://echarts.baidu.com/option.html#title.
-
notMerge(optional, object)
可選澈侠，是否不跟之前設(shè)置的 option 進行合并劫侧，默認為 false，即合并。
-
lazyUpdate(optional, object)
可選烧栋，在設(shè)置完 option 后是否不立即更新圖表写妥，默認為 false，即立即更新审姓。
-
style(optional, object)
包含echarts圖表的div的樣式珍特，默認是{height: '300px'}.
-
className(optional, string)
包含echarts圖表的div的類名. 可以根據(jù)需要自行配置類名，不同類配置不同的css魔吐。
-
theme(optional, string)
應(yīng)用的主題扎筒。可以是一個主題的配置對象酬姆，也可以是使用已經(jīng)通過 echarts.registerTheme 注冊的主題名稱嗜桌。
(主題對象的格式樣例: https://github.com/ecomfe/echarts/blob/master/theme/dark.js).
通過registerTheme注冊主題：
// import echarts
import echarts from 'echarts';
...
// register theme object
echarts.registerTheme('my_theme', {
backgroundColor: '#f4cccc'
});
...
// render the echarts use option `theme`
<ReactEcharts
option={this.getOption()}
style={{height: '300px', width: '100%'}}
className='echarts-for-echarts'
theme='my_theme' />
-
onChartReady(optional, function)
當(dāng)圖表準備好時，將圖表作為參數(shù)傳給回調(diào)函數(shù)
loadingOption(optional, object)showLoading(optional, bool, default: false)
是否加載動畫效果
-
onEvents(optional, array(string=>function) )
為圖表綁定事件
let onEvents = {
'click': this.onChartClick,
'legendselectchanged': this.onChartLegendselectchanged
}
...
<ReactEcharts
option={this.getOption()}
style={{height: '300px', width: '100%'}}
onEvents={onEvents} />
參見: http://echarts.baidu.com/api.html#events
-
opts(optional, object)
附加參數(shù)辞色。有下面幾個可選項：
devicePixelRatio
設(shè)備像素比症脂，默認取瀏覽器的值window.devicePixelRatio。
renderer
渲染器淫僻，支持'canvas'或者'svg'诱篷。參見 使用 Canvas 或者 SVG 渲染。
width
可顯式指定實例寬度雳灵，單位為像素棕所。如果傳入值為null/undefined/'auto'，則表示自動取dom（實例容器）的寬度悯辙。
height
可顯式指定實例高度琳省，單位為像素。如果傳入值為null/undefined/'auto'躲撰，則表示自動取dom（實例容器）的高度针贬。
組件API和ECharts API
對于組件來說，只有一個API——getEchartsInstance()拢蛋，用來獲取Echarts的實例對象桦他。獲取到對象后就可以使用任意的Echarts API。
// render the echarts component below with rel
<ReactEcharts ref={(e) => { this.echarts_react = e; }}
option={this.getOption()} />
// then get the `ReactEcharts` use this.echarts_react
let echarts_instance = this.echarts_react.getEchartsInstance();
// then you can use any API of echarts.
let base64 = echarts_instance.getDataURL();
Echarts的API請參見：Echarts API
使用這些API可以實現(xiàn)以下功能：
- 綁定/解綁事件
- 設(shè)置帶有動態(tài)數(shù)據(jù)的動態(tài)圖表
- 獲取echarts dom/dataurl/base64谆棱，將圖表保存到png快压。
- 發(fā)布圖表
