From 2171e52259e2b6e64178f77d14eda487f45ed8d6 Mon Sep 17 00:00:00 2001
From: 田源 <lastanimals@163.com>
Date: 星期二, 12 十二月 2023 16:50:16 +0800
Subject: [PATCH] 统计分析模块更改

---
 Source/UBCS-WEB/src/components/StatisticsComponent/pieChart.vue |  100 +++++++++++++++++++++++---------------------------
 1 files changed, 46 insertions(+), 54 deletions(-)

diff --git a/Source/UBCS-WEB/src/components/StatisticsComponent/pieChart.vue b/Source/UBCS-WEB/src/components/StatisticsComponent/pieChart.vue
index 9efd832..d81c227 100644
--- a/Source/UBCS-WEB/src/components/StatisticsComponent/pieChart.vue
+++ b/Source/UBCS-WEB/src/components/StatisticsComponent/pieChart.vue
@@ -6,11 +6,11 @@
 
 <script>
 import 'echarts'
-import 'echarts/lib/chart/pie'
+import 'echarts/lib/chart/bar' // 瀵煎叆鏌辩姸鍥剧粍浠�
 import 'echarts/lib/component/tooltip'
 import 'echarts/lib/component/legend'
 export default {
-  name: "pieChart",
+  name: "polarBarChart",
   props:{
     pieData:{
       type:Array,
@@ -19,97 +19,89 @@
     chartName:{
       type:String,
       default: ""
+    },
+    monthData:{
+      type:Array,
+      default: () => ['涓�鏈�', '浜屾湀', '涓夋湀', '鍥涙湀', '浜旀湀', '鍏湀', '涓冩湀', '鍏湀', '涔濇湀', '鍗佹湀', '鍗佷竴鏈�', '鍗佷簩鏈�']
     }
   },
   watch:{
     pieData:{
       immediate:true,
-      handler(newval,oldval){
+      handler(newval, oldval){
         if (newval) {
-          // console.log(newval)
-          const series=[
+          const series = [
             {
-              name: '',
-              type: 'pie',
-              radius: ['40%', '70%'],
-              avoidLabelOverlap:false,
-              label: {
-                formatter: '{b}\n{d}%',
-                fontSize:14
+              type: 'bar',
+              name: '鏂板',
+              data: newval[1],
+              coordinateSystem: 'polar',
+              stack: 'a',
+              emphasis: {
+                focus: 'series'
               },
               itemStyle: {
-                color: function(params) {
-                  // 鏍规嵁鍏蜂綋闇�姹傝缃鑹�
-                  const colorList = ['#5470C6', '#91CC75', '#fac858', '#EE6666', '#3BA272', '#FC8452', '#9A60B4', '#e34d4d', '#b3e9b9', '#eaaaed', '#1bc6e4', '#c6b3e9'];
-                  return colorList[params.dataIndex % colorList.length];
-                }
+                color: '#91cc75' // 鏂板鐨勯鑹�
+              }
+            },
+            {
+              type: 'bar',
+              name: '鎬婚噺',
+              data: newval[0],
+              coordinateSystem: 'polar',
+              stack: 'a',
+              emphasis: {
+                focus: 'series'
               },
-              data:newval[0].map((value, index) => {
-                return {
-                  value: value,
-                  name: this.getMonthName(index),
-                  newValue: newval[1][index]
-                };
-              }),
+              itemStyle: {
+                color: '#5470c6' // 鎬婚噺鐨勯鑹�
+              }
             }
-          ]
+          ];
           this.chartOptions.series = series;
         }
       }
     },
     chartName:{
-      handler(newval,oldval){
+      handler(newval, oldval){
         if(newval){
           this.chartOptions.title.text = newval + "鏁版嵁缁熻"
         }
       },
-      immediate:true,
-      deep:true
+      immediate:true
     }
   },
   data() {
     return {
       chartOptions: {
         title: {
-          text: '渚涘簲鍟嗕富鏁版嵁缁熻',
-          left: 'center'
-        },
-        tooltip: {
-          trigger: 'item',
-          formatter: function (params) {
-            let result = '';
-            if (params.componentType === 'series') {
-              result += params.name + '<br/>';
-              result += '鏂板锛�' + params.data.newValue + '<br/>';
-              result += '鎬婚噺锛�' + params.data.value + '<br/>';
-              result += '鐧惧垎姣旓細' + params.percent + '%';
-            }
-            return result;
-          }
+          text: '',
         },
         legend: {
-          orient: 'vertical',
-          right: 10,
-          top: 'middle',
+          data: ['鎬婚噺', '鏂板'],
+        },
+        polar: {},
+        angleAxis: {
+          type: 'category',
           data: ['涓�鏈�', '浜屾湀', '涓夋湀', '鍥涙湀', '浜旀湀', '鍏湀', '涓冩湀', '鍏湀', '涔濇湀', '鍗佹湀', '鍗佷竴鏈�', '鍗佷簩鏈�']
         },
+        radiusAxis: {},
+        tooltip: {
+          trigger: 'axis'
+        },
         series: []
-      },
+      }
     }
   },
-  methods:{
-    getMonthName(index){
-      const monthNames = ['涓�鏈�', '浜屾湀', '涓夋湀', '鍥涙湀', '浜旀湀', '鍏湀', '涓冩湀', '鍏湀', '涔濇湀', '鍗佹湀', '鍗佷竴鏈�', '鍗佷簩鏈�'];
-      return monthNames[index];
-    }
+  created(){
+    this.chartOptions.color = ['#5470c6', '#91cc75', '#fac858', '#ca8622', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4'];
   }
 }
 </script>
 
 <style scoped lang="scss">
 #chart {
-  width: 90%;
+  width: 97%;
   height: 530px;
 }
-
 </style>

--
Gitblit v1.9.3