From 41aacf110288329a6beb494ccccaeabd217a08b9 Mon Sep 17 00:00:00 2001
From: 田源 <lastanimals@163.com>
Date: 星期二, 05 十二月 2023 18:05:46 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'

---
 Source/UBCS-WEB/src/components/StatisticsComponent/pieChart.vue |  105 ++++++++++++++++++++++++++++++++++------------------
 1 files changed, 68 insertions(+), 37 deletions(-)

diff --git a/Source/UBCS-WEB/src/components/StatisticsComponent/pieChart.vue b/Source/UBCS-WEB/src/components/StatisticsComponent/pieChart.vue
index 9b757c3..9efd832 100644
--- a/Source/UBCS-WEB/src/components/StatisticsComponent/pieChart.vue
+++ b/Source/UBCS-WEB/src/components/StatisticsComponent/pieChart.vue
@@ -1,5 +1,5 @@
 <template>
-  <basic-container>
+  <basic-container style="width: 100%">
     <v-chart :options="chartOptions" :auto-resize="true" id="chart"></v-chart>
   </basic-container>
 </template>
@@ -11,6 +11,62 @@
 import 'echarts/lib/component/legend'
 export default {
   name: "pieChart",
+  props:{
+    pieData:{
+      type:Array,
+      default:[]
+    },
+    chartName:{
+      type:String,
+      default: ""
+    }
+  },
+  watch:{
+    pieData:{
+      immediate:true,
+      handler(newval,oldval){
+        if (newval) {
+          // console.log(newval)
+          const series=[
+            {
+              name: '',
+              type: 'pie',
+              radius: ['40%', '70%'],
+              avoidLabelOverlap:false,
+              label: {
+                formatter: '{b}\n{d}%',
+                fontSize:14
+              },
+              itemStyle: {
+                color: function(params) {
+                  // 鏍规嵁鍏蜂綋闇�姹傝缃鑹�
+                  const colorList = ['#5470C6', '#91CC75', '#fac858', '#EE6666', '#3BA272', '#FC8452', '#9A60B4', '#e34d4d', '#b3e9b9', '#eaaaed', '#1bc6e4', '#c6b3e9'];
+                  return colorList[params.dataIndex % colorList.length];
+                }
+              },
+              data:newval[0].map((value, index) => {
+                return {
+                  value: value,
+                  name: this.getMonthName(index),
+                  newValue: newval[1][index]
+                };
+              }),
+            }
+          ]
+          this.chartOptions.series = series;
+        }
+      }
+    },
+    chartName:{
+      handler(newval,oldval){
+        if(newval){
+          this.chartOptions.title.text = newval + "鏁版嵁缁熻"
+        }
+      },
+      immediate:true,
+      deep:true
+    }
+  },
   data() {
     return {
       chartOptions: {
@@ -21,7 +77,7 @@
         tooltip: {
           trigger: 'item',
           formatter: function (params) {
-            var result = '';
+            let result = '';
             if (params.componentType === 'series') {
               result += params.name + '<br/>';
               result += '鏂板锛�' + params.data.newValue + '<br/>';
@@ -37,40 +93,14 @@
           top: 'middle',
           data: ['涓�鏈�', '浜屾湀', '涓夋湀', '鍥涙湀', '浜旀湀', '鍏湀', '涓冩湀', '鍏湀', '涔濇湀', '鍗佹湀', '鍗佷竴鏈�', '鍗佷簩鏈�']
         },
-        series: [
-          {
-            name: '',
-            type: 'pie',
-            radius: ['40%', '70%'],
-            avoidLabelOverlap:false,
-            label: {
-              formatter: '{b}\n{d}%',
-              fontSize:14
-            },
-            itemStyle: {
-              color: function(params) {
-                // 鏍规嵁鍏蜂綋闇�姹傝缃鑹�
-                var colorList = ['#5470C6', '#91CC75', '#fac858', '#EE6666', '#3BA272', '#FC8452', '#9A60B4', '#e34d4d', '#b3e9b9', '#eaaaed', '#1bc6e4', '#c6b3e9'];
-                return colorList[params.dataIndex % colorList.length];
-              }
-            },
-            data: [
-              { value: 110, name: '涓�鏈�', newValue: 10, totalValue: 110 },
-              { value: 220, name: '浜屾湀', newValue: 20, totalValue: 220 },
-              { value: 330, name: '涓夋湀', newValue: 30, totalValue: 330 },
-              { value: 440, name: '鍥涙湀', newValue: 40, totalValue: 440 },
-              { value: 550, name: '浜旀湀', newValue: 50, totalValue: 550 },
-              { value: 660, name: '鍏湀', newValue: 60, totalValue: 660 },
-              { value: 770, name: '涓冩湀', newValue: 70, totalValue: 770 },
-              { value: 880, name: '鍏湀', newValue: 80, totalValue: 880 },
-              { value: 990, name: '涔濇湀', newValue: 90, totalValue: 990 },
-              { value: 1100, name: '鍗佹湀', newValue: 100, totalValue: 1100 },
-              { value: 1210, name: '鍗佷竴鏈�', newValue: 110, totalValue: 1210 },
-              { value: 1320, name: '鍗佷簩鏈�', newValue: 120, totalValue: 1320 }
-            ]
-          }
-        ]
+        series: []
       },
+    }
+  },
+  methods:{
+    getMonthName(index){
+      const monthNames = ['涓�鏈�', '浜屾湀', '涓夋湀', '鍥涙湀', '浜旀湀', '鍏湀', '涓冩湀', '鍏湀', '涔濇湀', '鍗佹湀', '鍗佷竴鏈�', '鍗佷簩鏈�'];
+      return monthNames[index];
     }
   }
 }
@@ -78,7 +108,8 @@
 
 <style scoped lang="scss">
 #chart {
-  width: 800px;
-  height: 600px;
+  width: 90%;
+  height: 530px;
 }
+
 </style>

--
Gitblit v1.9.3