echarts渲染完成事件finished/rendered，全面解析！

finished和rendered事件的区别

finished事件和rendered事件都是在图表渲染完成之后触发的，但是它们之间还是存在一些差异的。最主要的区别在于：

• finished事件是在图表的所有数据都加载完成之后触发的，而rendered事件是在图表的所有元素都渲染完成之后触发的。
• finished事件只会被触发一次，而rendered事件可能会被触发多次。例如，当图表的大小发生变化时，rendered事件就会被再次触发。

finished事件

finished事件是在图表的所有数据都加载完成之后触发的。这意味着，在finished事件被触发之前，图表的所有数据都必须已经加载完毕。如果图表的数据加载失败，那么finished事件将不会被触发。

finished事件的回调函数接收一个参数，该参数是一个对象，其中包含了以下属性：

• type：事件类型，值为"finished"。
• target：触发事件的图表实例。

rendered事件

rendered事件是在图表的所有元素都渲染完成之后触发的。这意味着，在rendered事件被触发之前，图表的所有元素都必须已经渲染完毕。如果图表中包含动态元素，那么rendered事件可能会被触发多次。例如，当图表的大小发生变化时，rendered事件就会被再次触发。

rendered事件的回调函数接收一个参数，该参数是一个对象，其中包含了以下属性：

• type：事件类型，值为"rendered"。
• target：触发事件的图表实例。

如何使用finished和rendered事件

finished和rendered事件都可以用于在图表渲染完成之后执行一些操作。例如，您可以使用finished事件来隐藏加载动画，或者使用rendered事件来更新图表的标题。

要使用finished和rendered事件，您需要先在图表上注册这两个事件的监听器。注册事件监听器的方法如下：

myChart.on('finished', function (params) {
  // 在图表渲染完成之后执行的操作
});

myChart.on('rendered', function (params) {
  // 在图表渲染完成之后执行的操作
});

结语

finished和rendered事件是echarts中非常重要的两个事件。通过使用这两个事件，您可以更好地控制图表渲染的过程，并在图表渲染完成之后执行一些操作。希望本文能够帮助您更好地理解和使用这两个事件。