javascript - 渲染完成时的 Echarts 事件

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>