渲染完成时绘制事件

Question

我正在与echarts一起工作，我想在echarts实例完成渲染后附加一个事件处理程序，以执行某些操作，但似乎无法弄清楚。

从docs看来，完成或渲染应该可以解决问题，但无法正常工作。

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

请仅使用新版本。 我使用的是4.0.3，就可以了。

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>