fix pieRow

src/components/PieRow/index.vue

@@ -48,10 +48,7 @@
     }
   })
 
-  const { id, setOption,chartVal,dispose ,clearOption} = useEchart()
+  const { id,chart, setOption,chartVal,dispose ,clearOption} = useEchart()
-
-
-
 	let condShow = ref(0)
 	let aIndex = 1
 	var colorList = []
@@ -59,66 +56,49 @@
   watch(
     () => props.dataList,
     (newVal) => {
+		
 		aIndex+=1
 		if(aIndex>=3&&!newVal.length){
 			condShow.value = 1
-			dispose()
+			
-			return false
-		}
-		if (newVal.length === 0) {
-		  condShow.value = 1
-		  dispose()
-		  return false
 		}
       if (newVal.length > 0) {
-		clearOption()
 		    colorList = []
 			nextTick(() => {
+				clearOption();
 				init()
 			})
       }else{
 		
-
 	  }
     },
-    { immediate: true,deep: true  }
+    { immediate: true }
   )
+  var echartsArr = [];
   const init = ()=>{
+	  echartsArr = []
     if(condShow.value===2){
       return;
     }
+	clearOption()
+	colorList = [];
     condShow.value = 2
-	  // props.dataList.forEach((item,index)=>{
+	  props.dataList.forEach((item,index)=>{
-		 //  if(item.name=='负面'){
-			//   colorList.push('#d9011b')
-		 //  }
-		 //  else if(item.name=='正面'){
-			// colorList.push('#50F0A6')
-		 //  }
-		 //  else if(item.name=='中性'){
-			// colorList.push('#2380fb')
-		 //  }
-		 //  else{
-			//    colorList = ['#3BA272', '#73C0DE','#EE6666','#FAC858','#91CC75','#5470C6','#d9011b','#feae00','#50F0A6']
-		 //  }
-	  // })
 
-	  // 过滤数据
+		  if(item.name=='负面'){
-	  const validDataList = props.dataList.filter(item => {
-	    return item && item.name && (item.value || item.value === 0)
-	  })
-	  validDataList.forEach((item) => {
-	    if (item.name === '负面') {
 			  colorList.push('#d9011b')
-	    } else if (item.name === '正面') {
+		  }
+		  else if(item.name=='正面'){
 			colorList.push('#50F0A6')
-	    } else if (item.name === '中性') {
+		  }
+		  else if(item.name=='中性'){
 			colorList.push('#2380fb')
-	    } else {
+		  }
-	      // 非固定名称时，使用预设颜色数组（避免多次push导致颜色重复）
+		  else{
 			   colorList = ['#3BA272', '#73C0DE','#EE6666','#FAC858','#91CC75','#5470C6','#d9011b','#feae00','#50F0A6']
 		  }
 	  })
+
 	  var defaultCofig = {
 	    color: colorList,
 	    legend: {
@@ -132,14 +112,16 @@
 	        color: '#ffffff',
 	        fontSize: fitChartSize(14)
 	      },
-		   // 显式绑定图例数据，确保与新数据同步
-			data: validDataList.map(item => item.name),
-		// 修复图例formatter的空值问题
 		  formatter: (name) => {
-			const item = validDataList.find((item) => item.name === name)
+		   // let percent = props.dataList.find((item) => item.name == name).value
-			const percent = item ? item.value : 0
+		     const item = props.dataList.find((item) => item.name === name);
-			return name + '\u3000' + `${percent}%`
+		     
-		  }
+		     const percent = item ? item.value : 0;
+		     
+		     const displayName = name || '';
+		     return `${displayName}\u3000${percent}%`;
+		 
+		  },
 	    },
 	    series: [
 	      {
@@ -173,55 +155,57 @@
 	        labelLine: {
 	          show: false
 	        },
-			// 使用过滤后的有效数据
+	        data: []
-			data: validDataList
 	      }
 	    ]
 	  }
+	  defaultCofig.series[0].data = props.dataList
 	 //  defaultCofig.legend.formatter = (name) => {
 	 //    let percent = props.dataList.find((item) => item.name == name).value
+		// if(name){
 		// 	return name + '\u3000' + `${percent}%`
+		// }else{
+		// 	return name + '\u3000' + `${0}%`
+		// }
 	 //  }
-	  // defaultCofig.series[0].data = props.dataList
 	  // defaultCofig.series[0].label.formatter = () => {
 	  //   return `{value|${props.total}}` + '\n' + `{name|${props.label}  }`
 	  // }
-		const chart = setOption({
+	  setOption({},true)
+	const changeChart =  setOption({
 	    ...defaultCofig,
 	    ...props.config
 	  },true)
-		if (chart) {
+	  
-		    chart.off('legendselectchanged')
+	changeChart.off('legendselectchanged');
-		    chart.on('legendselectchanged', function (e) {
+    changeChart.on('legendselectchanged', function (e) {
-		      const echartsArr = []
+      console.log(e,'e')
+      
       for (let key in e.selected) {
         if (e.selected[key]) {
           echartsArr.push(key)
         }
       }
-		
+      var echartsNum = 0;
-		      let echartsNum = 0
+      props.dataList.forEach(item => {
-		      validDataList.forEach(item => {
         if(echartsArr.includes(item.name)){
-		          echartsNum += parseFloat(item.value) || 0
+          echartsNum += parseFloat(item.value)
         }
       })
-		      const newOption = {
+	  defaultCofig.legend.formatter = (name) => {
-		        ...defaultConfig,
+	    const item = props.dataList.find((item) => item.name === name);
-		        ...props.config,
-		        series: [{
-		          ...defaultConfig.series[0],
-		          label: {
-		            ...defaultConfig.series[0].label,
-		            formatter: `{value|${parseInt(echartsNum / 100 * props.total)}}` + '\n' + `{name|${props.label}}`
-		          }
-		        }]
-		      }
 	    
-		      // 强制更新配置
+	    const percent = item ? item.value : 0;
-		      setOption(newOption, true)
+	    
-		    })
+	    const displayName = name || '';
+	    return `${displayName}\u3000${percent}%`;
 	  }
+      defaultCofig.series[0].label.formatter = `{value|${parseInt(echartsNum/100*props.total)}}` + '\n' + `{name|${props.label}}`;
+      setOption({
+        ...defaultCofig,
+        ...props.config
+      })
+    });
   }
 </script>
 

src/hooks/echart.js

@@ -13,14 +13,8 @@ export function useEchart() {
   const setOption = (params, update = false) => {
 	initChart()
     chart.setOption(params, update)
-	if (update) {
-	  chart.setOption({}, true)
-	  chart.setOption(params)
-	}
     return chart;
   }
-
-  
   const clearOption = () => {
 	   // 将series设置为空数组，可以清空图表内容
     chart.setOption({
@@ -28,8 +22,8 @@ export function useEchart() {
 	})
   }
   const dispose = () => {
-    // chart.dispose()
+    chart.dispose()
-    // chart = null
+    chart = null
   }
   const resize = () => {
     if (chart) chart.resize()