# echarts-for-react #### 简介 使用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效果 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](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://echarts.baidu.com/api.html#echarts.registerTheme)注册的主题名称。 (主题对象的格式样例:[https://github.com/ecomfe/echarts/blob/master/theme/dark.js](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](http://echarts.baidu.com/api.html#events) * **`opts`**(optional, object) 附加参数。有下面几个可选项： > `devicePixelRatio` > 设备像素比，默认取浏览器的值`window.devicePixelRatio`。 > `renderer` > 渲染器，支持`'canvas'`或者`'svg'`。参见[使用 Canvas 或者 SVG 渲染](http://echarts.baidu.com/tutorial.html#%E4%BD%BF%E7%94%A8%20Canvas%20%E6%88%96%E8%80%85%20SVG%20%E6%B8%B2%E6%9F%93)。 > `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](https://echarts.baidu.com/api.html#echartsInstance) 使用这些API可以实现以下功能： * 绑定/解绑事件 * 设置带有动态数据的动态图表 * 获取echarts dom/dataurl/base64，将图表保存到png。 * 发布图表