问题

在react新项目中 使用react-for-echarts中导出的ReactCharts组件，默认通过option的series选项更新数据参数，但是发现组件没有触发重绘？？

解决方案

1. 强制组件刷新

<ReactChart option={this.getOptions()}  key={Date.now()}/>

通过暴力设置key值强制该组件卸载刷新，缺点是可能存在性能损耗

2. 通过ecahrts的实例来更新

...
componentDidUpdate() {
    const instance = this.thisRef.current.getEchartsInstance();
    if (instance) {
      instance.setOption(this.getOptions());
    }
  }
render(){
return <ReactEcharts
          ref={this.thisRef}
        className={classNames(prefix, cls)}
        option={this.getOptions()}
        {...rest}
      />
}
...

每个echarts图表都有一个实例instance，可以借助getEchartsInstance（）函数获取到，实例中的setOption支持更新数据。
ecahrts 实例方法

原理探讨