echarts-for-react

安装

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

使用

引入

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'}}
/>

参数说明

• 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
• onChartReady（function）：可选，当图表渲染完成，将会回调这个方法，参数为 echarts 对象
• loadingOption（object）：可选，加载动画配置项
• showLoading（boolean）：可选，显示加载动画效果，默认为 false，即隐藏
• onEvents（array(string => function)）：可选，绑定 echarts 事件，通过 echarts 事件对象回调
• opts（object）：可选，echarts事件，通过echarts附加参数，将在echarts实例初始化时被使用

theme使用

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

onEvents 使用

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

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();

官网地址

github.com/hustcc/echa…