Echarts wait on event

Ionic Framework ionic-v3
1

Hello,
I know, this is not a question at ionic framework, but somebody know how to handle this.

I use echarts for echarting. animation is set to false To get a png from echarts I can call

chart.getDataURL({
        type: 'png',
        pixelRatio: 2,
        backgroundColor: bgColor,
        excludeComponents: ['toolbox', 'dataZoom']
      });

works great as long the chart needs not to long to render otherwise the png is taken before the charts has rendert fully.

echarts offers an event (code from documetation)

chart.on('finished', function () {
    snapshotImage.src = chart.getDataURL();
});

I loop over several charts to get the getDataURL() and put in a pdf.

So my question how can I wait that rendering is finished like

getimage(): string {

wait for is chart.on('finished...);

return chart.getDataURL();
}

Any ideas

Thanks in advance, anna-liebt

2

I can’t tell you exactly how to structure this because it depends on how the chart drawing is initiated, but the fundamental trick is to use a future. This is one of the very few situations where you will see me recommending manual Promise instantiation.

renderChart(): Promise<string> {
  // do whatever it is that starts the drawing process
  return new Promise((resolve) => {
    chart.on("finished", () => {
      resolve(chart.getDataURL());
    ));
  });
}
3

Hello,
great, really great. Meanville I found the same on the net, but never so simple and clear.
Also meanwhile I found maybe a different solution. echarts provides a progressiveThreshold property that, I suspect (I’m testing), is in anyway connected to getDataURL. Unfortunally the property is with a link called progessive linked to series-scatter.progressive that is not working in the documentation.

Best regards, anna-liebt