場(chǎng)景：同一個(gè)DOM元素怜珍，通過(guò)切換繪制兩個(gè)圖表畏陕，圖表數(shù)據(jù)會(huì)變化拓劝，但是沒(méi)有動(dòng)畫(huà)等效果。
解決：可以用以下方案解決踱卵。
1.實(shí)例清空函數(shù)
echartsInstance.clear()
作用：清空當(dāng)前實(shí)例廊驼，會(huì)移除實(shí)例中所有的組件和圖表。
清空實(shí)例之后，再次繪制妒挎，只需要再次調(diào)用echartsInstance.setOption進(jìn)行繪制
// echarts對(duì)象
let myChart = null
// 繪制標(biāo)定柱狀圖
const drawEcharts = () => {
const chartDom = document.getElementById('dom')
if (myChart) {
myChart.clear()
} else {
myChart = echarts.init(chartDom)
}
const option = {
.......
};
myChart.resize();
myChart.setOption(option);
};
注意： 如果你的echartsInstance實(shí)例對(duì)象绳锅，添加了事件，需要清除掉事件酝掩，不然會(huì)添加重復(fù)事件鳞芙。
// echarts對(duì)象
let myChart = null
// 繪制標(biāo)定柱狀圖
const drawEcharts = () => {
const chartDom = document.getElementById('dom')
if (myChart) {
// 取消點(diǎn)擊事件
myChart.off("click")
myChart.clear()
} else {
myChart = echarts.init(chartDom)
}
const option = {
.......
};
myChart.resize();
myChart.setOption(option);
// 添加點(diǎn)擊事件
myChart.on('click', params => {
// callbackTodo
})
};
2.實(shí)例銷毀函數(shù)
echartsInstance.dispose()
作用：銷毀實(shí)例，銷毀后實(shí)例無(wú)法再被使用期虾。
銷毀實(shí)例之后积蜻，再次繪制需要再初始化實(shí)例。
// echarts對(duì)象
let myChart = null
// 繪制標(biāo)定柱狀圖
const drawEchart = () => {
const chartDom = document.getElementById('dom')
if (myChart) {
myChart.dispose()
}
myChart = echarts.init(chartDom)
const option = {
......
};
myChart.resize();
myChart.setOption(option);
};
