lcw

src/views/home/echarts/lineEcharts.vue

@@ -9,21 +9,34 @@ const props = defineProps({
     type:String,
     default:'lineId'
   },
-  color:{
+  color:{ 
     type:String,
     default:'#fff'
   },
-  data:{
+  data:{ 
     type:Array,
     default:[]
   }
 });
-watch(()=>props.data,val=>{
-  nextTick(()=>{ chartFn() })
-},{immediate:true,deep:true})
+
+// 保存echarts实例
+const myChart = ref(null);
+
+// 定义resize处理函数
+const handleResize = () => {
+  if (myChart.value) {
+    myChart.value.resize();
+  }
+};
 
 function chartFn() {
-  var myChart = echarts.init(document.getElementById(props.echartsId));
+  // 如果已有实例，先销毁
+  if (myChart.value) {
+    myChart.value.dispose();
+  }
+  
+  // 创建新实例
+  myChart.value = echarts.init(document.getElementById(props.echartsId));
   var option = {
     grid: {
       top: "8%",
@@ -51,8 +64,7 @@ function chartFn() {
       data:props.data.map(v=>{return v.label}),
       axisTick: { show: false },
       axisLine: { show: false },
-      axisLabel: { color: "#fff" },
-      axisLabel: {
+      axisLabel: { 
         show: true,
         color: props.color,
         interval: 0, // 强制显示所有标签
@@ -103,11 +115,28 @@ function chartFn() {
       }
     ]
   };
-  option && myChart.setOption(option);
-  window.addEventListener('resize',function(){
-    myChart.resize();
-  })
+  option && myChart.value.setOption(option);
 }
+
+// 监听数据变化
+watch(()=>props.data,val=>{
+  nextTick(()=>{ chartFn() })
+},{immediate:true,deep:true})
+
+// 组件挂载时初始化图表并添加事件监听
+onMounted(()=>{
+  chartFn();
+  window.addEventListener('resize', handleResize);
+});
+
+// 组件卸载时清理资源
+onUnmounted(()=>{
+  if (myChart.value) {
+    myChart.value.dispose();
+    myChart.value = null;
+  }
+  window.removeEventListener('resize', handleResize);
+});
 </script>
 
 <style lang="scss" scoped>