如何在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…