Cannot read property 'getRawIndex' of undefined

One-line summary [问题简述]

饼图未完全渲染，即饼图动态变化时，鼠标hover到饼图的扇区，报错Cannot read property ‘getRawIndex’ of undefined， 但不影响渲染以及后续使用

Version & Environment [版本及环境]

• ECharts version [ECharts 版本]: 4.1.0
• Browser version [浏览器类型和版本]: 70.0.3538.77
• OS Version [操作系统类型和版本]: mac

Expected behaviour [期望结果]

不输出该错误

ECharts option [ECharts配置项]

option = {
   tooltip: {
      show: true,
      formatter: (params) => {....},
  }
  series: [{
     name: '计数',
      type: 'pie',
      center: ['50%', '50%'],
      data: [{
       .......
       }]
   }]
  }
}

比较特殊的是 我的数据是远程获取，并且数据比较大，当整个饼图渲染完，并没有变化的时候，鼠标hover上去不会有什么错误，但是当数据还在加载的时候，饼图还在变化，这个时候鼠标hover上去会报错。 错误如下

Other comments [其他信息]

dataFormat.js?6c1b:40 Uncaught TypeError: Cannot read property ‘getRawIndex’ of undefined at ExtendedClass.getDataParams (dataFormat.js?6c1b:40) at Function.superCall (clazz.js?04d6:107) at ExtendedClass.getDataParams (PieSeries.js?fef3:78) at ECharts.eval (echarts.js?21c7:1386) at Handler.trigger (Eventful.js?aa3b:158) at Handler.dispatchToElement (Handler.js?963e:218) at Handler.mouseout (Handler.js?963e:135) at HandlerDomProxy.trigger (Eventful.js?aa3b:158) at HandlerDomProxy.mouseout (HandlerProxy.js?7bcf:107) at HTMLDivElement.eval (HandlerProxy.js?7bcf:245) getDataParams @ dataFormat.js?6c1b:40 superCall @ clazz.js?04d6:107 getDataParams @ PieSeries.js?fef3:78 (anonymous) @ echarts.js?21c7:1386 trigger @ Eventful.js?aa3b:158 dispatchToElement @ Handler.js?963e:218 mouseout @ Handler.js?963e:135 trigger @ Eventful.js?aa3b:158 mouseout @ HandlerProxy.js?7bcf:107 (anonymous) @ HandlerProxy.js?7bcf:245

[ankushjamdagani]

Issue Reason

I was passing every dynamic config toecharts-for-react component as a prop. Config consited of 1…3 number of series. Exception was raised when the new config doesn’t consist of a series present previously and moving mouse over that series.

Obvious Solution

Stop the event handling when chart is updating.

Fix 1

Show an overlay over chart when it is updating.

1. chartInstance.showLoading() when change has started. (I did it as soon as the API call for next data is triggered)
2. chartInstance.hideLoading() when chartInstance.on('finished') event.

Fix 2

chartInstance.setOption does the update with silent (no-event-listening) mode. https://www.echartsjs.com/en/api.html#echartsInstance.setOption

1. Pass initial config as prop to Echart component.
2. For next changes, use chartInstance.setOptions(...) instead of passing new config as prop to the component.

Hope this is of use to you guys.

[a1292999652]

setOption<Opt extends ECBasicOption>(option: Opt, notMerge?: boolean, lazyUpdate?: boolean): void; I passed “notMerge” into “true”, this problem occurred, changed to “false”, the problem was solved