From 81c1be1ce5f212f90017beaa20e96ef015463518 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=9D=8E=E5=8A=B2=E9=BE=99?= <2860996570@qq.com>
Date: Thu, 29 Aug 2024 20:02:01 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9Eecharts?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                                  |   2 +-
 src/assets/styles/publicPro.scss              |  12 +-
 .../components/AFuwufazhanzonglan/index.vue   |  12 +-
 .../components/BJinsannianzijin/index.vue     | 157 ++++++++++++------
 .../BJinsannianzijin/mixins/resize.js         |  56 +++++++
 5 files changed, 169 insertions(+), 70 deletions(-)
 create mode 100644 src/views/workbenchPro/components/BJinsannianzijin/mixins/resize.js

diff --git a/package.json b/package.json
index 02979ad..e3f8d83 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ruoyi",
-  "version": "1.0.202408291813",
+  "version": "1.0.202408291841",
   "description": "金鸡湖现代服务业品牌管理系统",
   "author": "若依",
   "license": "MIT",
diff --git a/src/assets/styles/publicPro.scss b/src/assets/styles/publicPro.scss
index c86b599..f45eeed 100644
--- a/src/assets/styles/publicPro.scss
+++ b/src/assets/styles/publicPro.scss
@@ -355,9 +355,6 @@
                     }
 
                     .AFuwufazhanzonglan-item-top {
-                      div {
-                        
-                      }
 
                       div:nth-child(1) {
                         font-size: 20px;
@@ -405,7 +402,14 @@
 
           //近三年
           .BJinsannianzijin-box {
-            .BJinsannianzijin {}
+            width: 100%;
+            .BJinsannianzijin {
+              width: 100%;
+              .BJinsannianzijinchart-left{
+                width: 50%;
+                height: 25vh;
+              }
+            }
           }
         }
 
diff --git a/src/views/workbenchPro/components/AFuwufazhanzonglan/index.vue b/src/views/workbenchPro/components/AFuwufazhanzonglan/index.vue
index 1472e4b..7593164 100644
--- a/src/views/workbenchPro/components/AFuwufazhanzonglan/index.vue
+++ b/src/views/workbenchPro/components/AFuwufazhanzonglan/index.vue
@@ -93,20 +93,12 @@ export default {
         },
     },
     mounted() {
-        // this.cancalDebounce();
-        window.addEventListener('resize', this.cancalDebounce);
+     
     },
     methods: {
         // 获取top5列表
 
-        // 屏幕尺寸变化
-        cancalDebounce() {
-            const element = document.getElementById('zhijinbofu-qingkaung'); // 通过元素的 ID 获取元素
-            const header = document.getElementById('zhijinbofu-header-id'); // 通过元素的 ID 获取元素
-            const elementHeight = element.offsetHeight;
-            const headerHeight = header.offsetHeight;
-            this.tabHeader = elementHeight - headerHeight - 35;
-        }
+       
     },
 }
 </script>
diff --git a/src/views/workbenchPro/components/BJinsannianzijin/index.vue b/src/views/workbenchPro/components/BJinsannianzijin/index.vue
index 04e3456..e486645 100644
--- a/src/views/workbenchPro/components/BJinsannianzijin/index.vue
+++ b/src/views/workbenchPro/components/BJinsannianzijin/index.vue
@@ -1,60 +1,107 @@
-<!-- 拨付资金企业申请情况TOP5 -->
 <template>
-    <div class="BJinsannianzijin">
+  <div class="BJinsannianzijin">
+    <div class="BJinsannianzijinchart-left" id="BJinsannianzijinchart-left"></div>
+  </div>
+</template>
 
-    </div>
-  </template>
-  <script>
-  import { top5Fund } from "@/api/jin_ji_hu/zijinbiao"
-  export default {
-    data() {
-      return {
-        loading:false,
-        tableData:[],
-        tabHeader: 288,
-      }
-    },
-    props:{
-      typeValue:{
-        type:Number,
-        default:1,
-      },
-      yearsChange:{
-        type:Number,
-        default:1,
-      },
-    },
-    watch:{
-      typeValue:{
-        handler(newVAlue){
-          console.log(newVAlue);
-        },
-      },
-      yearsChange:{
-        handler(newVAlue){
-          console.log(newVAlue);
-        },
-      },
-    },
-    mounted() {
-      // this.cancalDebounce();
-      window.addEventListener('resize', this.cancalDebounce);
+<script>
+import * as echarts from 'echarts'
+import resize from './mixins/resize'
+
+const animationDuration = 6000
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
     },
-    methods:{
-      // 获取top5列表
-    
-      // 屏幕尺寸变化
-      cancalDebounce(){
-        const element = document.getElementById('zhijinbofu-qingkaung'); // 通过元素的 ID 获取元素
-        const header = document.getElementById('zhijinbofu-header-id'); // 通过元素的 ID 获取元素
-        const elementHeight = element.offsetHeight;
-        const headerHeight = header.offsetHeight;
-        this.tabHeader = elementHeight - headerHeight - 35;
-      }
+    width: {
+      type: String,
+      default: '50%'
     },
+    height: {
+      type: String,
+      default: '200px'
+    }
+  },
+  data() {
+    return {
+      chart: null
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(document.getElementById('BJinsannianzijinchart-left'))
+      const option = {
+        series: [
+          {
+            type: 'gauge',
+            startAngle: 180,
+            endAngle: 0,
+            center: ['50%', '80%'],
+            radius: '100%',
+            axisLine: {
+              lineStyle: {
+                width: 30,
+                color: [
+                  [0.298, '#2d99e2'],
+                  [1, '#dce3ec'],
+                ],
+              },
+            },
+            axisTick: { show: false },
+            axisLabel: { show: false },
+            splitLine: { show: false },
+            pointer: {
+              offsetCenter: [0, '10%'],
+              icon: 'path://M0,0 L0,-20 L5,-20 L5,-30 L15,-30 L15,-20 L20,-20 L20,0 Z', // 圆点 + 线 + 三角形
+              length: '80%', // 调整长度
+              itemStyle: {
+                color: '#000',
+                width: 2, // 设置指针粗细
+              },
+            },
+            title: {
+              show: true,
+              offsetCenter: [0, '25%'],
+              textStyle: {
+                color: '#2d99e2',
+                fontSize: 15,
+                fontFamily: '微软雅黑',
+                fontWeight: 'bold',
+              },
+            },
+            detail: {
+              show: false,
+            },
+            data: [
+              {
+                value: 29.8,
+                name: '你要的比例 29.8%',
+              },
+            ],
+          },
+        ],
+      };
+
+      this.chart.setOption(
+        option
+      )
+    }
   }
-  </script>
-  <style lang="scss" scoped>
-  
-  </style>
-  
\ No newline at end of file
+}
+</script>
diff --git a/src/views/workbenchPro/components/BJinsannianzijin/mixins/resize.js b/src/views/workbenchPro/components/BJinsannianzijin/mixins/resize.js
new file mode 100644
index 0000000..b1e76e9
--- /dev/null
+++ b/src/views/workbenchPro/components/BJinsannianzijin/mixins/resize.js
@@ -0,0 +1,56 @@
+import { debounce } from '@/utils'
+
+export default {
+  data() {
+    return {
+      $_sidebarElm: null,
+      $_resizeHandler: null
+    }
+  },
+  mounted() {
+    this.initListener()
+  },
+  activated() {
+    if (!this.$_resizeHandler) {
+      // avoid duplication init
+      this.initListener()
+    }
+
+    // when keep-alive chart activated, auto resize
+    this.resize()
+  },
+  beforeDestroy() {
+    this.destroyListener()
+  },
+  deactivated() {
+    this.destroyListener()
+  },
+  methods: {
+    // use $_ for mixins properties
+    // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
+    $_sidebarResizeHandler(e) {
+      if (e.propertyName === 'width') {
+        this.$_resizeHandler()
+      }
+    },
+    initListener() {
+      this.$_resizeHandler = debounce(() => {
+        this.resize()
+      }, 100)
+      window.addEventListener('resize', this.$_resizeHandler)
+
+      this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
+      this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
+    },
+    destroyListener() {
+      window.removeEventListener('resize', this.$_resizeHandler)
+      this.$_resizeHandler = null
+
+      this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
+    },
+    resize() {
+      const { chart } = this
+      chart && chart.resize()
+    }
+  }
+}