424

src/components/PieRow/index.vue

@@ -50,60 +50,12 @@
 
   const { id, setOption,chartVal,dispose ,clearOption} = useEchart()
 
-  var colorList = ['#FDC40A', '#FF5232', '#50F0A6', '#5FDFFA']
   
-  var defaultCofig = {
+  
-    color: colorList,
-    legend: {
-      orient: 'vertical',
-      x: '64%',
-      y: 'center',
-      itemWidth: fitChartSize(12),
-      itemHeight: fitChartSize(12),
-      itemGap: fitChartSize(10),
-      textStyle: {
-        color: '#ffffff',
-        fontSize: fitChartSize(14)
-      }
-    },
-    series: [
-      {
-        type: 'pie',
-        center: ['30%', '50%'],
-        radius: ['40%', '55%'],
-        itemStyle: {
-          borderWidth: fitChartSize(4),
-          borderColor: '#093672'
-        },
-        label: {
-          show: true,
-          position: 'center',
-          fontWeight: 'bold',
-          formatter: () => {
-            return `{value|${props.total}}` + '\n' + `{name|${props.label}  }`
-          },
-          rich: {
-            value: {
-              color: '#fff',
-              fontSize: fitChartSize(24),
-              fontWeight: 'bold',
-              padding: [0, 0, 5, 0]
-            },
-            name: {
-              color: '#fff',
-              fontSize: fitChartSize(12)
-            }
-          }
-        },
-        labelLine: {
-          show: false
-        },
-        data: []
-      }
-    ]
-  }
 	let condShow = ref(0)
 	let aIndex = 1
+	var colorList = []
+	// ['#2380fb', '#d9011b','#feae00']
   watch(
     () => props.dataList,
     (newVal) => {
@@ -114,20 +66,23 @@
 			  condShow.value = 1
 		}
       if (newVal.length > 0) {
+		
+		  console.log(colorList.value,'colorList')
 		  condShow.value = 2
         nextTick(() => {
-          defaultCofig.legend.formatter = (name) => {
+			init()
-            let percent = props.dataList.find((item) => item.name == name).value
+          // defaultCofig.legend.formatter = (name) => {
-            return name + '\u3000' + `${percent}%`
+          //   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 = () => {
+          // defaultCofig.series[0].data = props.dataList
-            return `{value|${props.total}}` + '\n' + `{name|${props.label}  }`
+          // defaultCofig.series[0].label.formatter = () => {
-          }
+          //   return `{value|${props.total}}` + '\n' + `{name|${props.label}  }`
-          setOption({
+          // }
-            ...defaultCofig,
+          // setOption({
-            ...props.config
+          //   ...defaultCofig,
-          })
+          //   ...props.config
+          // })
 		  
         })
       }else{
@@ -137,6 +92,82 @@
     },
     { 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,
+	    legend: {
+	      orient: 'vertical',
+	      x: '64%',
+	      y: 'center',
+	      itemWidth: fitChartSize(12),
+	      itemHeight: fitChartSize(12),
+	      itemGap: fitChartSize(10),
+	      textStyle: {
+	        color: '#ffffff',
+	        fontSize: fitChartSize(14)
+	      }
+	    },
+	    series: [
+	      {
+	        type: 'pie',
+	        center: ['30%', '50%'],
+	        radius: ['40%', '55%'],
+	        itemStyle: {
+	          borderWidth: fitChartSize(4),
+	          borderColor: '#093672'
+	        },
+	        label: {
+	          show: true,
+	          position: 'center',
+	          fontWeight: 'bold',
+	          formatter: () => {
+	            return `{value|${props.total}}` + '\n' + `{name|${props.label}  }`
+	          },
+	          rich: {
+	            value: {
+	              color: '#fff',
+	              fontSize: fitChartSize(24),
+	              fontWeight: 'bold',
+	              padding: [0, 0, 5, 0]
+	            },
+	            name: {
+	              color: '#fff',
+	              fontSize: fitChartSize(12)
+	            }
+	          }
+	        },
+	        labelLine: {
+	          show: false
+	        },
+	        data: []
+	      }
+	    ]
+	  }
+	  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
+	  })
+  }
 </script>
 
 <style scoped lang="scss">