From 013ed9283200da41902835f9fd679df13299d436 Mon Sep 17 00:00:00 2001
From: zmc <zmc_li@foxmail.com>
Date: 星期四, 31 八月 2023 12:53:53 +0800
Subject: [PATCH] 扬尘Vue

---
 src/views/line_graph/components/DustRadarChart.vue |   97 +++++++++++++++++++++++++++++++++++++-----------
 1 files changed, 75 insertions(+), 22 deletions(-)

diff --git a/src/views/line_graph/components/DustRadarChart.vue b/src/views/line_graph/components/DustRadarChart.vue
index 732b39d..b0e5748 100644
--- a/src/views/line_graph/components/DustRadarChart.vue
+++ b/src/views/line_graph/components/DustRadarChart.vue
@@ -4,17 +4,19 @@
 <script>
 import * as echarts from 'echarts';
 export default {
-  props:{
-    name:{
-        type:Array,
-        default:()=>{
-          return []
-        }
-      },
-    data:{
-      type:Array,
-      default:()=>{
-        return []
+  props: {
+    // 灞炴��
+    name: {
+      type: Array,
+      default: () => {
+        return [];
+      }
+    },
+    // 鏁版嵁
+    yData: {
+      type: Array,
+      default: () => {
+        return [];
       }
     }
   },
@@ -23,25 +25,35 @@
       chart: null
     };
   },
-  watch:{
-    data(){
-      this.set()
+  watch: {
+    yData() {
+      this.set();
     }
   },
   mounted() {
     this.initRadarChart();
+    window.addEventListener('resize', this.resizeChart);
   },
   methods: {
     initRadarChart() {
       this.chart = echarts.init(document.getElementById('main'));
     },
-    set(){
+    set() {
+      // this.data[0] = this.data[0]*0.01
       let option = {
         title: {
           text: '缁煎悎椋庨櫓'
         },
         tooltip: {},
         radar: {
+
+          // 杈规棰滆壊
+          splitLine: {
+            lineStyle: {
+              // 浣跨敤娣辨祬鐨勯棿闅旇壊
+              color: ['#ddd', '#aaa']
+            }
+          },
           // shape: 'circle',
           indicator: [
             { name: this.name[0], max: 1 },
@@ -49,23 +61,64 @@
             { name: this.name[2], max: 1 },
             { name: this.name[3], max: 1 },
             { name: this.name[4], max: 1 }
-          ]
+          ],
+          //     splitArea: {
+          //   areaStyle: {
+          //     // color: ['#77EADF', '#26C3BE', '#64AFE9', '#428BD4'],
+          //     shadowColor: 'rgba(0, 0, 0, 0.2)',
+          //     shadowBlur: 10
+          //   }
+          // },
+          axisName: {
+            color: '#428BD4'
+          },
+          legend: {
+            borderColor: '#428BD4'
+          }
         },
         series: [
           {
-            name: 'Budget vs spending',
             type: 'radar',
             data: [
               {
-                value: [this.data[0]*0.01,this.data[1]*0.01, this.data[2]*0.01,this.data[3]*0.01,this.data[4]*0.01],
+                value: [
+                  (this.yData[0] / 100).toFixed(4),
+                  this.yData[1],
+                  this.yData[2],
+                  (this.yData[3] / 100).toFixed(4),
+                  (this.yData[4] / 100).toFixed(4)
+                ],
+                // value: [
+                //   this.yData[0],
+                //   this.yData[1],
+                //   this.yData[2],
+                //   this.yData[3] ,
+                //   this.yData[4] 
+                // ],
                 name: '寮傚父鍒嗘瀽'
-              },
-            ]
+              }
+            ],
+            label: {
+              show: true,
+              formatter: function (params) {
+                
+                return params.value*100+'%';
+              }
+            }
           }
         ]
       };
       this.chart.setOption(option);
-    }
+    },
+        // 璺熼〉闈㈠搷搴斿紡鍙樺寲
+        resizeChart() {
+          // this.chart.resize();
+          this.$nextTick(() => {
+            if (this.chart) {
+              this.chart.resize();
+            }
+          });
+      }
   }
 };
 </script>
@@ -77,6 +130,6 @@
 <style scoped>
 .chart {
   width: 100%;
-  height: 35vh;
+  height: 500px;
 }
 </style>

--
Gitblit v1.9.3