vue3 vite echarts 线上二次显示空白问题

1、安装引入

npm install echarts
import echarts from "echarts"

2、需设定大小

<div class="chat-content" id="myCharts"></div>

.chat-content {
          width: 100%;
          height: 150px;
        }

3、nextTick初始化实例

nextTick(() => {
        setDataCharts();
      });

const setDataCharts = () => { state.echartsInstance = echarts.init(document.getElementById("myCharts")); }

4、延时设置option

// 绘制图表
  setTimeout(() => {
    state.echartsInstance.setOption(option);
  }, 100);

5、及时销毁

onBeforeUnmount(() => {
  state.echartsInstance.dispose();
  console.log("onBeforeUnmount>>>");
});