Echarts Events When Finished Rendering

Question

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.

From the docs it seems like either finished or rendered should do the trick but its not working as expected.

var chart = echarts.init(document.getElementById('chart'))

chart.on('finished', () => {
	alert('finished event')
	console.log('finished event fired')
})

chart.on('rendered', () => {
	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'
    }]
})

#chart {
  width: 400px;
  height: 400px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/3.7.0/echarts.min.js"></script>

<div id="chart"></div>

Answer 1

just use the new release, pls. I use the 4.0.3, it's OK.

var chart = echarts.init(document.getElementById('chart'))

chart.on('finished', () => {
	alert('finished event')
	console.log('finished event fired')
})

chart.on('rendered', () => {
	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'
    }]
})

#chart {
  width: 400px;
  height: 400px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.0.3/echarts.min.js"></script>

<div id="chart"></div>