424

src/components/PieRow/index.vue

@@ -50,7 +50,60 @@
 
   const { id, setOption,chartVal,dispose ,clearOption} = useEchart()
 
-  var colorList = ['#FDC40A', '#FF5232', '#50F0A6', '#5FDFFA']
+  
+  
+	let condShow = ref(0)
+	let aIndex = 1
+	var colorList = []
+	// ['#2380fb', '#d9011b','#feae00']
+  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 = ()=>{
+	  props.dataList.forEach((item,index)=>{
+		  if(item.name=='负面'){
+			  colorList.push('#d9011b')
+		  }
+		  if(item.name=='正面'){
+			colorList.push('#feae00')	  
+		  }
+		  if(item.name=='中性'){
+			colorList.push('#2380fb')	  
+		  }
+	  })
 	  
 	  var defaultCofig = {
 	    color: colorList,
@@ -102,20 +155,6 @@
 	      }
 	    ]
 	  }
-	let condShow = ref(0)
-	let aIndex = 1
-  watch(
-    () => props.dataList,
-    (newVal) => {
-		
-		aIndex+=1
-		
-		if(aIndex>=3&&!newVal.length){
-			  condShow.value = 1
-		}
-      if (newVal.length > 0) {
-		  condShow.value = 2
-        nextTick(() => {
 	  defaultCofig.legend.formatter = (name) => {
 	    let percent = props.dataList.find((item) => item.name == name).value
 	    return name + '\u3000' + `${percent}%`
@@ -128,15 +167,7 @@
 	    ...defaultCofig,
 	    ...props.config
 	  })
-		  
-        })
-      }else{
-		
-		 
   }
-    },
-    { immediate: true }
-  )
 </script>
 
 <style scoped lang="scss">