From 28eeaa0e29512394ea2512f231e61eeb66e6c120 Mon Sep 17 00:00:00 2001
From: chengdandan <2549057906@qq.com>
Date: Thu, 23 Mar 2023 08:44:17 +0800
Subject: [PATCH] 20230322

---
 src/components/common/pieDateChart.vue | 475 +++++++++++++++++--------
 1 file changed, 336 insertions(+), 139 deletions(-)

diff --git a/src/components/common/pieDateChart.vue b/src/components/common/pieDateChart.vue
index be22c22..c416f25 100644
--- a/src/components/common/pieDateChart.vue
+++ b/src/components/common/pieDateChart.vue
@@ -9,7 +9,8 @@
     <div class="jsBox">
       <div class="bogJs" v-for="(item, i) in pieData" :key="i">
         <div class="jsChild">
-          <span style="background: #00B3FF;"></span>
+          <span :style="item.color"></span>
+          <!-- <span :background="item.color"></span> -->
           <span>{{item.groupName}}</span>
         </div>
         <div class="js2Child">
@@ -54,13 +55,13 @@ export default {
 
   data() {
     return {
-        totalPer:'',
-        // pieData:[],
-        color:['#00B3FF','#F1E453','#F85B60','#00A572', '#008AA4', '#7968D9', '#C7A73E'],
+        totalPer:0,
+        pieDataNew:[],
+        color:['background-color:#00B3FF','background-color:#F1E453','background-color:#F85B60','background-color:#00A572', 'background-color:#008AA4', 'background-color:#7968D9', 'background-color:#C7A73E'],
     };
   },
   mounted() {
-    // this.initCharts();
+    this.initCharts();
   },
   watch: {
     // 监听父组件中的数据变化，重新触发Echarts
@@ -74,7 +75,7 @@ export default {
         deep: true,
         handler(newVal) {
           console.log(newVal,'==============');
-           this.initCharts(newVal)
+        //    this.initCharts(newVal)
           this.changeNewVal(newVal)
           
         }
@@ -85,144 +86,340 @@ export default {
     //获取人员数据
     changeNewVal(newVal){
         console.log("newVal",newVal)
-        // var pieDataN = this.pieData.map((item,index) => {
-                      
-        //     })
-            var pieDataN = []
-              this.color.forEach((items,indexs) => {
-               pieDataN = this.pieData.map((item,index) => {
-                  if(index==indexs){
+        this.pieDataNew = newVal
+        // var pieDataN = []
+            newVal.map((item,index) => {
+                this.totalPer+=item.number
+                console.log("this.totalPer",this.totalPer)
+             this.color.forEach((items,indexs) => {
+                if(index==indexs){
                    return  item.color = items
-                }     
+                }
+             })            
             })
-               
-             }) 
-            console.log("this.pieDataN",pieDataN)
     },
-    initCharts(value) {
-        console.log(value,'============');
+
+    initCharts() {
       let myChart = this.$echarts.init(this.$refs.chart);
-      var placeHolderStyle = {
-        normal: {
-          label: {
-            show: false,
-            position: "center"
-          },
-          labelLine: {
-            show: false
-          },
-          color: "#104841a3",
-          borderWidth: 0
-        },
-        emphasis: {
-          color: "#104841a3",
-          borderColor: "#00b3ff",
-          borderWidth: 0
-        }
-      };
-      // 绘制图表
-      myChart.setOption({
-        series: [
-          {
-            name: '值',
-            type: 'pie',
-            clockWise: true,
-            hoverAnimation: false,
-            radius: ['92%', '97%'],
-            center: ['50%', '50%'],
-            itemStyle: {
-              normal: {
-                label: {
-                  show: false
-                },
-                labelLine: {
-                  show: false,
-                  length: 100,
-                  smooth: 0.5
-                },
-                borderWidth: 5,
-                shadowBlur: 40,
-                borderColor: "#00B3FF",
-                shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影
-              }
-            },
-            data: [{
-              value: 12,
-            }, {
-              value: 4,
-              name: '',
-              itemStyle: placeHolderStyle
-            }]
-          },
-          // ------------2
-          {
-            name: '值',
-            type: 'pie',
-            clockWise: true,
-            hoverAnimation: false,
-            radius: ['72%', '67%'],
-            center: ['50%', '50%'],
-            itemStyle: {
-              normal: {
-                label: {
-                  show: false
-                },
-                labelLine: {
-                  show: false,
-                  length: 100,
-                  smooth: 0.5
-                },
-                borderWidth: 5,
-                shadowBlur: 40,
-                borderColor: "#F1E453",
-                shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影
-              }
-            },
-            data: [{
-              value: 6,
-            }, {
-              value: 4,
-              name: '',
-              itemStyle: placeHolderStyle
-            }]
-          },
-          // ------------3
-          {
-            name: '值',
-            type: 'pie',
-            clockWise: true,
-            hoverAnimation: false,
-            radius: ['48%', '44%'],
-            center: ['50%', '50%'],
-            itemStyle: {
-              normal: {
-                label: {
-                  show: false
-                },
-                labelLine: {
-                  show: false,
-                  length: 100,
-                  smooth: 0.5
-                },
-                borderWidth: 5,
-                shadowBlur: 40,
-                borderColor: "#f85b60",
-                shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影
-              }
-            },
-            data: [{
-              value: 9,
-            }, {
-              value: 44,
-              name: '',
-              itemStyle: placeHolderStyle
-            }]
-          },
-        ]
-      });
-      //默认第一条高亮
-      myChart.dispatchAction({ type: 'highlight', seriesIndex: [0, 1, 2], dataIndex: 0 });
+    //   var placeHolderStyle = {
+    //     normal: {
+    //       label: {
+    //         show: false,
+    //         position: "center"
+    //       },
+    //       labelLine: {
+    //         show: false
+    //       },
+    //       color: "#104841a3",
+    //       borderWidth: 0
+    //     },
+    //     emphasis: {
+    //       color: "#104841a3",
+    //       borderColor: "#00b3ff",
+    //       borderWidth: 0
+    //     }
+    //   };
+    //   // 绘制图表
+    //   myChart.setOption({
+    //     series: [
+    //       {
+    //         name: '值',
+    //         type: 'pie',
+    //         clockWise: true,
+    //         hoverAnimation: false,
+    //         radius: ['92%', '97%'],
+    //         center: ['50%', '50%'],
+    //         itemStyle: {
+    //           normal: {
+    //             label: {
+    //               show: false
+    //             },
+    //             labelLine: {
+    //               show: false,
+    //               length: 100,
+    //               smooth: 0.5
+    //             },
+    //             borderWidth: 5,
+    //             shadowBlur: 40,
+    //             borderColor: "#00B3FF",
+    //             shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影
+    //           }
+    //         },
+    //         data: [{
+    //           value: 12,
+    //         }, {
+    //           value: 4,
+    //           name: '',
+    //           itemStyle: placeHolderStyle
+    //         }]
+    //       },
+    //       // ------------2
+    //       {
+    //         name: '值',
+    //         type: 'pie',
+    //         clockWise: true,
+    //         hoverAnimation: false,
+    //         radius: ['72%', '67%'],
+    //         center: ['50%', '50%'],
+    //         itemStyle: {
+    //           normal: {
+    //             label: {
+    //               show: false
+    //             },
+    //             labelLine: {
+    //               show: false,
+    //               length: 100,
+    //               smooth: 0.5
+    //             },
+    //             borderWidth: 5,
+    //             shadowBlur: 40,
+    //             borderColor: "#F1E453",
+    //             shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影
+    //           }
+    //         },
+    //         data: [{
+    //           value: 6,
+    //         }, {
+    //           value: 4,
+    //           name: '',
+    //           itemStyle: placeHolderStyle
+    //         }]
+    //       },
+    //       // ------------3
+    //       {
+    //         name: '值',
+    //         type: 'pie',
+    //         clockWise: true,
+    //         hoverAnimation: false,
+    //         radius: ['48%', '44%'],
+    //         center: ['50%', '50%'],
+    //         itemStyle: {
+    //           normal: {
+    //             label: {
+    //               show: false
+    //             },
+    //             labelLine: {
+    //               show: false,
+    //               length: 100,
+    //               smooth: 0.5
+    //             },
+    //             borderWidth: 5,
+    //             shadowBlur: 40,
+    //             borderColor: "#f85b60",
+    //             shadowColor: 'rgba(0, 0, 0, 0)' //边框阴影
+    //           }
+    //         },
+    //         data: [{
+    //           value: 9,
+    //         }, {
+    //           value: 44,
+    //           name: '',
+    //           itemStyle: placeHolderStyle
+    //         }]
+    //       },
+    //     ]
+    //   });
+   var  data = [{
+        name: "本科及以上",
+        value: 13211
+    },
+    {
+        name: "高中",
+        value: 42111
+    },
+    {
+        name: "初中及以下",
+        value: 81711
+    },
+    {
+        name: "其他",
+        value: 121711
     }
+];
+function   getArrayValue(array, key) {
+    var key = key || "value";
+    var res = [];
+    if (array) {
+        array.forEach(function(t) {
+            res.push(t[key]);
+        });
+    }
+    return res;
+}
+function array2obj(array,key) {
+	var resObj = {};
+	for(var i=0;i<array.length;i++){
+		resObj[array[i][key]] = array[i];
+	}
+	return resObj;
+}
+function getData(data) {
+    var res = {
+        series: [],
+        yAxis: []
+    };
+    for (let i = 0; i < data.length; i++) {
+        res.series.push({
+            name: '学历',
+            type: 'pie',
+            clockWise: false, //顺时加载
+            hoverAnimation: false, //鼠标移入变大
+            radius: [65 - i * 15 + '%', 57 - i * 15 + '%'],
+            center: ["30%", "55%"],
+            label: {
+                show: false
+            },
+            itemStyle: {
+                label: {
+                    show: false,
+                },
+                labelLine: {
+                    show: false
+                },
+                borderWidth: 5,
+            },
+            data: [{
+                value: data[i].value,
+                name: data[i].name
+            }, {
+                value: sumValue - data[i].value,
+                name: '',
+                itemStyle: {
+                    color: "rgba(0,0,0,0)",
+                    borderWidth: 0
+                },
+                tooltip: {
+                    show: false
+                },
+                hoverAnimation: false
+            }]
+        });
+        res.series.push({
+            name: '',
+            type: 'pie',
+            silent: true,
+            z: 1,
+            clockWise: false, //顺时加载
+            hoverAnimation: false, //鼠标移入变大
+            radius: [65 - i * 15 + '%', 57 - i * 15 + '%'],
+            center: ["30%", "55%"],
+            label: {
+                show: false
+            },
+            itemStyle: {
+                label: {
+                    show: false,
+                },
+                labelLine: {
+                    show: false
+                },
+                borderWidth: 5,
+            },
+            data: [{
+                value: 7.5,
+                itemStyle: {
+                    color: "#E3F0FF",
+                    borderWidth: 0
+                },
+                tooltip: {
+                    show: false
+                },
+                hoverAnimation: false
+            }, {
+                value: 2.5,
+                name: '',
+                itemStyle: {
+                    color: "rgba(0,0,0,0)",
+                    borderWidth: 0
+                },
+                tooltip: {
+                    show: false
+                },
+                hoverAnimation: false
+            }]
+        });
+        res.yAxis.push((data[i].value / sumValue * 100).toFixed(2) + "%");
+    }
+    return res;
+}
+var arrName = getArrayValue(data, "name");
+var arrValue = getArrayValue(data, "value");
+var sumValue = eval(arrValue.join('+'));
+var objData = array2obj(data, "name");
+var optionData = getData(data);
+
+
+myChart.option = {
+    backgroundColor:'#fff',
+    legend: {
+        show: true,
+        top: "center",
+        left: '70%',
+        data: arrName,
+        itemWidth: 30,
+        itemHeight: 20,
+        width:50,
+        padding: [0, 5],
+        itemGap: 25,
+        formatter: function(name) {
+            return "{title|" + name + "}\n{value|" + (objData[name].value) + "人}"
+        },
+        textStyle: {
+            rich: {
+                title: {
+                    fontSize: 10,
+                    lineHeight: 10,
+                    color: "rgba(0,0,0,.45)"
+                },
+                value: {
+                    fontSize: 14,
+                    lineHeight: 18,
+                    color: "rgba(0,0,0,.85)"
+                }
+            }
+        },
+    },
+    tooltip: {
+        show: true,
+        trigger: "item",
+        formatter: "{a}<br>{b}:{c}({d}%)"
+    },
+    color: ['#FF8700', '#ffc300', '#00e473', '#009DFF'],
+    grid: {
+        top: '20%',
+        bottom: '48%',
+        left: "30%",
+        containLabel: false
+    },
+    yAxis: [{
+        type: 'category',
+        inverse: true,
+        axisLine: {
+            show: false
+        },
+        axisTick: {
+            show: false
+        },
+        axisLabel: {
+            interval: 0,
+            inside: true,
+            textStyle: {
+                color: "#000",
+                fontSize: 10,
+            },
+            show: true
+        },
+        data: optionData.yAxis
+    }],
+    xAxis: [{
+        show: false
+    }],
+    series: optionData.series
+};
+      //默认第一条高亮
+    //   myChart.dispatchAction({ type: 'highlight', seriesIndex: [0, 1, 2], dataIndex: 0 });
+    },
+
   }
 };
 </script>