Echarts的清空销毁

场景：同一个DOM元素，通过切换绘制两个图表，图表数据会变化，但是没有动画等效果。
解决：可以用以下方案解决。

1.实例清空函数
echartsInstance.clear()
作用：清空当前实例，会移除实例中所有的组件和图表。

清空实例之后，再次绘制，只需要再次调用echartsInstance.setOption进行绘制

// echarts对象
let myChart = null
// 绘制标定柱状图
const drawEcharts = () => {
  const chartDom = document.getElementById('dom')
  if (myChart) {
    myChart.clear()
  } else {
   myChart = echarts.init(chartDom)
  }
  const option = {
  .......
  };
  myChart.resize();
  myChart.setOption(option);
};

注意： 如果你的echartsInstance实例对象，添加了事件，需要清除掉事件，不然会添加重复事件。

// echarts对象
let myChart = null
// 绘制标定柱状图
const drawEcharts = () => {
  const chartDom = document.getElementById('dom')
  if (myChart) {
    // 取消点击事件
    myChart.off("click")
    myChart.clear()
  } else {
   myChart = echarts.init(chartDom)
  }
  const option = {
  .......
  };
  myChart.resize();
  myChart.setOption(option);
  // 添加点击事件
  myChart.on('click', params => {
      // callbackTodo
  })
};

2.实例销毁函数
echartsInstance.dispose()
作用：销毁实例，销毁后实例无法再被使用。

销毁实例之后，再次绘制需要再初始化实例。

// echarts对象
let myChart = null
// 绘制标定柱状图
const drawEchart = () => {
  const chartDom = document.getElementById('dom')
  if (myChart) {
    myChart.dispose()
  }
  myChart = echarts.init(chartDom)
  const option = {
   ......
  };
  myChart.resize();
  myChart.setOption(option);
};