简介
使用echarts-for-react插件可以在React中调用echarts接口直接渲染出Echarts图表，只要传入相关的参数和数据即可。代码简介，功能使用。
安装
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中可以看到各种不同类型的图表，在项目开发过程中有需要可以查阅，copy相关的代码，或者查看图表的数据格式，了解图表的相关功能，以便更好地引用及重构图表。
使用
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={} />
也可手动导入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={} />
组件的参数简介
-
option(required, object)
这个是核心，是必须的，包含echarts图表的配置项和数据，如标题title、图例legend、提示框tooltip、x轴xAxis、y轴yAxis、series等，详见 http://echarts.baidu.com/option.html#title.
-
notMerge(optional, object)
可选，是否不跟之前设置的 option 进行合并，默认为 false，即合并。
-
lazyUpdate(optional, object)
可选，在设置完 option 后是否不立即更新图表，默认为 false，即立即更新。
-
style(optional, object)
包含echarts图表的div的样式，默认是{height: '300px'}.
-
className(optional, string)
包含echarts图表的div的类名. 可以根据需要自行配置类名，不同类配置不同的css。
-
theme(optional, string)
应用的主题。可以是一个主题的配置对象，也可以是使用已经通过 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)
当图表准备好时，将图表作为参数传给回调函数
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)
附加参数。有下面几个可选项：
devicePixelRatio
设备像素比，默认取浏览器的值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可以实现以下功能：
- 绑定/解绑事件
- 设置带有动态数据的动态图表
- 获取echarts dom/dataurl/base64，将图表保存到png。
- 发布图表
