title: Echarts Events When Finished Rendering
body: <p>I am working with echarts and I would like to attach an event handler to do some things once my echarts instance has finished rendering but, can't seem to get it figured out.</p>
  
  <p>From the <a href="https://ecomfe.github.io/echarts-doc/public/en/api.html#events.finished" rel="nofollow noreferrer">docs</a> it seems like either finished or rendered should do the trick but its not working as expected.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var chart = echarts.init(document.getElementById('chart'))
  
  chart.on('finished', () =&gt; {
   alert('finished event')
   console.log('finished event fired')
  })
  
  chart.on('rendered', () =&gt; {
   alert('rendered event')
   console.log('finished event fired')
  })
  
  chart.setOption({
      xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
          type: 'value'
      },
      series: [{
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line'
      }]
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#chart {
    width: 400px;
    height: 400px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/3.7.0/echarts.min.js"&gt;&lt;/script&gt;
  
  &lt;div id="chart"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>