针对echarts图表在a-tab标签页不能重加载问题

问题：在使用a-tab标签属性切换时，先出现了第二个标签页的echarts图表不能回显问题，修改后能回显，但要第二次点击切换标签页才回回显。

不管是使用封装函数，封装数组，封装组件等方法，都实现不了在标签页中回

问题解决进程

1.第一个标签页能显示，第二个却不能显示

结合csdn以及一些帖子，发现是Echarts图表在第二个页面渲染的时候无法拿到父元素的高度和宽度造成的

给盒子定了一个高后，发现还是不行，但是在箭头函数handleTabChange上调用两个echarts函数后，就可以回显echarts图表了，不过还是有问题。

  const handleTabChange = (key) => {
    activeKey.value = key;
      drawChart();
      drawEchart();
  };

切换标签页时，handleTabChange 函数会被触发，传入的 key 参数表示新的活动标签页的键值。函数内部首先更新 activeKey 的值以反映当前活动的标签页，然后调用 drawChart 和 drawEchart 函数重新绘制或更新图表，以确保图表显示的数据与当前选择的标签页一致。

2.每个标签页都能回显echarts图表后，又出现新的问题，第一次切换是不显示，第二次才显示。

判断是DOM的更新问题，考虑通过watch监听activeKey 的变化，重新绘制能耗图表和衰减程度图表。

 // 监听 activeKey 的变化，当 activeKey 变化时执行回调函数
  watch(activeKey, (val, oldVal) => {
    // 在下一个 DOM 更新周期后执行回调函数
    nextTick(() => {
      drawChart();
      drawEchart();
    });
  });

监听 activeKey 的变化，当 activeKey 的值发生变化时（即用户切换标签页时），在下一个 DOM 更新周期后重新绘制能耗图表和衰减程度图表。这样可以确保图表在 DOM 更新完成后正确绘制，避免因 DOM 未更新导致的图表绘制问题。

到这里，把在箭头函数handleTabChange 调用的函数删掉，就可以成功回显echarts图表了。

中间的小插曲：语法规范很重要！！！

在前期代码编写是，有些函数使用了vue2写法，有的函数使用了vue3的写法，所以在后面的watch监听是，导致方法不生效。通过代码整理，对vue3的<script setup>正确使用后才能生效。