简介

对echarts进行的React封装，可以用于React项目中，支持JS、TS

如何使用

1. 安装

npm install --save echarts-for-react
npm install --save echarts          // echarts-for-react包依赖echarts

2. 使用

• 引入

import ReactEcharts from 'echarts-for-react'

• 在 render 函数中使用

<ReactEcharts
    option={this.getChartOptions()}      // option：图表配置项
    onEvents={onEvents}
    notMerge={true}
    lazyUpdate={true}
    style={{height: '230px', left: '12px', top: '-8px'}}
/>

3. 支持参数

• option（object）：必需，图表配置项
• notMerge（object）：可选，是否不跟之前设置的 option 进行合并，默认为 false，即合并
• lazyUpdate（object）：可选，在设置完 option 后是否不立即更新图表，默认为 false，即立即更新
• style（object）：可选，echarts DOM 元素的 style 属性，默认为 { height: '300px' }
• className（string）：可选，echarts DOM 元素的 class 属性
• theme（string）：可选，应用的主题。使用前需要使用 registerTheme 注册主题

import echarts from 'echarts';
echarts.registerTheme('my_theme', {
    backgroundColor: '#f4cccc'
});
<ReactEcharts
    option={this.getOption()}
    theme='my_theme'
/>

• onChartReady（function）：可选，当图表渲染完成，将会回调这个方法，参数为 echarts 对象
• loadingOption（object）：可选，加载动画配置项
• showLoading（boolean）：可选，显示加载动画效果，默认为 false，即隐藏
• onEvents（array(string => function)）：可选，绑定 echarts 事件，通过 echarts 事件对象回调

let onEvents = {
    'click': this.onChartClick,
    'legendselectchanged': this.onChartLegendselectchanged
}
<ReactEcharts
    option={this.getOption()}
    style={{height: '300px', width: '100%'}}
    onEvents={onEvents}
/>

• opts（object）：可选，echarts事件，通过echarts附加参数，将在echarts实例初始化时被使用

4. API

ReactEcharts组件只有一个API getEchartsInstance，利用这个方法可以获取echarts实例对象，从而可以调用echarts实例的所有API

<ReactEcharts 
    ref={(e) => {this.echarts_react = e;}}
    option={this.getOption()}
/>
let echarts_instance = this.echarts_react.getEchartsInstance();
let base64 = echarts_instance.getDataURL();

官网： https://github.com/hustcc/echarts-for-react

以上