如何在react中使用echarts? echarts-for-react

echarts-for-react 是一个简单精巧的针对于 React 的 Echarts 封装插件

• 安装

  npm install --save echarts（依赖）

  npm install --save echarts-for-react

• 项目中引入

  import ReactEcharts from 'echarts-for-react'

• 在 render 函数中使用

<ReactEcharts
key={Math.random() + new Date().getTime()}
option={this.getChartOptions()}
onEvents={onEvents}
notMerge={true}
lazyUpdate={true}
style={{height: '230px', left: '12px', top: '-8px'}}
/>
复制代码

组件基本参数介绍：

option:接收一个对象，该对象为 echarts 的配置项

echarts.baidu.com/option.html…

notMerge:可选，是否不跟之前设置的 option 进行合并，默认为 false，即合并。

LazyUpdate:可选，在设置完 option 后是否不立即更新图表，默认为 false，即立即更新。

style:echarts 容器 div 大小，默认：{height: ‘300px’}

onEvents:接收函数集合，如

 const onEvents = {
'click': this.onChartClick
'legendselectchanged': this.onChartLegendselectchanged
};
onChartClick为定义在组件内的函数
复制代码

echarts.baidu.com/api.html#ev…