类型：开发

描述：

src/components/PieRow/index.vue

@@ -11,7 +11,7 @@
 		<div v-if="condShow==0" class="nYong-du">加载中...</div>
 		<div v-if="condShow==1" class="nYong-du">暂无数据</div>
 	</div>
-  
+
 </template>
 
 <script setup>
@@ -50,8 +50,8 @@
 
   const { id, setOption,chartVal,dispose ,clearOption} = useEchart()
 
-  
-  
+
+
 	let condShow = ref(0)
 	let aIndex = 1
 	var colorList = []
@@ -59,56 +59,45 @@
   watch(
     () => props.dataList,
     (newVal) => {
-		
 		aIndex+=1
-		
+
 		if(aIndex>=3&&!newVal.length){
 			  condShow.value = 1
 		}
       if (newVal.length > 0) {
-		
-		  console.log(colorList.value,'colorList')
-		  condShow.value = 2
+
         nextTick(() => {
 			init()
-          // defaultCofig.legend.formatter = (name) => {
-          //   let percent = props.dataList.find((item) => item.name == name).value
-          //   return name + '\u3000' + `${percent}%`
-          // }
-          // defaultCofig.series[0].data = props.dataList
-          // defaultCofig.series[0].label.formatter = () => {
-          //   return `{value|${props.total}}` + '\n' + `{name|${props.label}  }`
-          // }
-          // setOption({
-          //   ...defaultCofig,
-          //   ...props.config
-          // })
-		  
+
         })
       }else{
-		
-		 
+
+
 	  }
     },
     { immediate: true }
   )
   const init = ()=>{
+    if(condShow.value===2){
+      return;
+    }
+    condShow.value = 2
 	  props.dataList.forEach((item,index)=>{
-		  
+
 		  if(item.name=='负面'){
 			  colorList.push('#d9011b')
 		  }
 		  else if(item.name=='正面'){
-			colorList.push('#50F0A6')  
+			colorList.push('#50F0A6')
 		  }
 		  else if(item.name=='中性'){
-			colorList.push('#2380fb')	  
+			colorList.push('#2380fb')
 		  }
 		  else{
 			   colorList = ['#3BA272', '#73C0DE','#EE6666','#FAC858','#91CC75','#5470C6','#d9011b','#feae00','#50F0A6']
 		  }
 	  })
-	  
+
 	  var defaultCofig = {
 	    color: colorList,
 	    legend: {
@@ -167,15 +156,41 @@
 	  defaultCofig.series[0].label.formatter = () => {
 	    return `{value|${props.total}}` + '\n' + `{name|${props.label}  }`
 	  }
-	  setOption({
+	   const chart = setOption({
 	    ...defaultCofig,
 	    ...props.config
 	  })
+    chart.on('legendselectchanged', function (e) {
+      console.log(e,'e')
+      var echartsArr = [];
+      for (let key in e.selected) {
+        if (e.selected[key]) {
+          echartsArr.push(key)
+        }
+      }
+      var echartsNum = 0;
+      props.dataList.forEach(item => {
+        if(echartsArr.includes(item.name)){
+          echartsNum += parseFloat(item.value)
+        }
+      })
+      defaultCofig.series[0].label.formatter = `{value|${parseInt(echartsNum/100*props.total)}}` + '\n' + `{name|${props.label}}`;
+      console.log(111111)
+      console.log({
+        ...defaultCofig,
+        ...props.config
+      })
+      console.log(222222)
+      setOption({
+        ...defaultCofig,
+        ...props.config
+      })
+    });
   }
 </script>
 
 <style scoped lang="scss">
-	
+
 	.nYong-du{
 		position:absolute;
 		left:0;
@@ -188,6 +203,6 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
-	
+
 	}
 </style>