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.

• 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。
• 发布图表