lcw

src/views/home/echarts/moreBarEcharts.vue

@@ -5,7 +5,7 @@
 import * as echarts from "echarts";
 import { el } from "element-plus/es/locale.mjs";
 import { on } from "element-plus/lib/utils";
-import { onMounted, ref, reactive, defineProps, onUnmounted, watch, nextTick } from "vue";
+import { onMounted, ref, reactive, defineProps, onUnmounted, watch, nextTick, onBeforeUnmount } from "vue";
 
 const props = defineProps({
   echartsId:{
@@ -24,11 +24,17 @@ const props = defineProps({
     }
   }
 });
+
+// 保存图表实例和 resize 处理函数
+let myChart = null;
+const handleResize = () => {
+  myChart && myChart.resize();
+};
+
 watch(()=>props.data,val=>{
   nextTick(()=>{ init(val) })
 },{immediate:true,deep:true})
 
-
 // 初始化
 function init (val) {
   let color = val.color;
@@ -63,7 +69,10 @@ function init (val) {
 }
 
 function chartFn(series) {
-  var myChart = echarts.init(document.getElementById(props.echartsId));
+  // 复用已有的图表实例，避免重复创建
+  if (!myChart) {
+    myChart = echarts.init(document.getElementById(props.echartsId));
+  }
   var option = {
     grid: {
       top: "12%",
@@ -113,10 +122,21 @@ function chartFn(series) {
     series:series
   };
   option && myChart.setOption(option);
-  window.addEventListener('resize',function(){
-    myChart.resize();
-  })
 }
+
+// 组件挂载时添加 resize 监听
+onMounted(() => {
+  window.addEventListener('resize', handleResize);
+});
+
+// 组件卸载时清理资源
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', handleResize);
+  if (myChart) {
+    myChart.dispose();
+    myChart = null;
+  }
+});
 </script>
 
 <style lang="scss" scoped>