fix scenic-box3

src/components/Line/index.vue

@@ -93,7 +93,7 @@
     },
     grid: {
       left: '2%',
-      right: '2%',
+      right: '5%',
       bottom: '5%',
       top: '10%',
       containLabel: true

src/components/PieRow/index.vue

@@ -60,44 +60,65 @@
     () => 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(() => {
 			init()
-
         })
       }else{
 
 
 	  }
     },
-    { immediate: true }
+    { immediate: true,deep: true  }
   )
   const init = ()=>{
     if(condShow.value===2){
       return;
     }
     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 {
-		  else{
+	      // 非固定名称时，使用预设颜色数组（避免多次push导致颜色重复）
 	      colorList = ['#3BA272', '#73C0DE', '#EE6666', '#FAC858', '#91CC75', '#5470C6', '#d9011b', '#feae00', '#50F0A6']
 	    }
 	  })
-
 	  var defaultCofig = {
 	    color: colorList,
 	    legend: {
@@ -110,6 +131,14 @@
 	      textStyle: {
 	        color: '#ffffff',
 	        fontSize: fitChartSize(14)
+	      },
+		   // 显式绑定图例数据，确保与新数据同步
+			data: validDataList.map(item => item.name),
+		// 修复图例formatter的空值问题
+		  formatter: (name) => {
+			const item = validDataList.find((item) => item.name === name)
+			const percent = item ? item.value : 0
+			return name + '\u3000' + `${percent}%`
 		  }
 		},
 	    series: [
@@ -144,42 +173,55 @@
 	        labelLine: {
 	          show: false
 	        },
-	        data: []
+			// 使用过滤后的有效数据
+			data: validDataList
 	      }
 	    ]
 	  }
-	  defaultCofig.legend.formatter = (name) => {
+	  // defaultCofig.legend.formatter = (name) => {
-	    let percent = props.dataList.find((item) => item.name == name).value
+	  //   let percent = props.dataList.find((item) => item.name == name).value
-	    return name + '\u3000' + `${percent}%`
+	  //   return name + '\u3000' + `${percent}%`
-	  }
+	  // }
-	  defaultCofig.series[0].data = props.dataList
+	  // defaultCofig.series[0].data = props.dataList
-	  defaultCofig.series[0].label.formatter = () => {
+	  // defaultCofig.series[0].label.formatter = () => {
-	    return `{value|${props.total}}` + '\n' + `{name|${props.label}  }`
+	  //   return `{value|${props.total}}` + '\n' + `{name|${props.label}  }`
-	  }
+	  // }
 		const chart = setOption({
 			...defaultCofig,
 			...props.config
-	  })
+		},true)
+		if (chart) {
+		    chart.off('legendselectchanged')
 		    chart.on('legendselectchanged', function (e) {
-      console.log(e,'e')
+		      const echartsArr = []
-      var echartsArr = [];
 		      for (let key in e.selected) {
 		        if (e.selected[key]) {
 		          echartsArr.push(key)
 		        }
 		      }
-      var echartsNum = 0;
+		
-      props.dataList.forEach(item => {
+		      let echartsNum = 0
+		      validDataList.forEach(item => {
 		        if (echartsArr.includes(item.name)) {
-          echartsNum += parseFloat(item.value)
+		          echartsNum += parseFloat(item.value) || 0
 		        }
 		      })
-      defaultCofig.series[0].label.formatter = `{value|${parseInt(echartsNum/100*props.total)}}` + '\n' + `{name|${props.label}}`;
+		      const newOption = {
-      setOption({
+		        ...defaultConfig,
-        ...defaultCofig,
+		        ...props.config,
-        ...props.config
+		        series: [{
+		          ...defaultConfig.series[0],
+		          label: {
+		            ...defaultConfig.series[0].label,
+		            formatter: `{value|${parseInt(echartsNum / 100 * props.total)}}` + '\n' + `{name|${props.label}}`
+		          }
+		        }]
+		      }
+		
+		      // 强制更新配置
+		      setOption(newOption, true)
 		    })
-    });
+		  }
   }
 </script>
 

src/hooks/echart.js

@@ -13,8 +13,14 @@ 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({
@@ -22,8 +28,8 @@ export function useEchart() {
 	})
   }
   const dispose = () => {
-    chart.dispose()
+    // chart.dispose()
-    chart = null
+    // chart = null
   }
   const resize = () => {
     if (chart) chart.resize()