新增echarts

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ruoyi",
-  "version": "1.0.202408291813",
+  "version": "1.0.202408291841",
   "description": "金鸡湖现代服务业品牌管理系统",
   "author": "若依",
   "license": "MIT",

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;
+              }
+            }
           }
         }
 

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>

src/views/workbenchPro/components/BJinsannianzijin/index.vue

@@ -1,60 +1,107 @@
-<!-- 拨付资金企业申请情况TOP5 -->
 <template>
   <div class="BJinsannianzijin">
-
+    <div class="BJinsannianzijinchart-left" id="BJinsannianzijinchart-left"></div>
   </div>
-  </template>
+</template>
-  <script>
+
-  import { top5Fund } from "@/api/jin_ji_hu/zijinbiao"
+<script>
-  export default {
+import * as echarts from 'echarts'
+import resize from './mixins/resize'
+
+const animationDuration = 6000
+
+export default {
+  mixins: [resize],
+  props: {
+    className: {
+      type: String,
+      default: 'chart'
+    },
+    width: {
+      type: String,
+      default: '50%'
+    },
+    height: {
+      type: String,
+      default: '200px'
+    }
+  },
   data() {
     return {
-        loading:false,
+      chart: null
-        tableData:[],
-        tabHeader: 288,
     }
   },
-    props:{
+  mounted() {
-      typeValue:{
+    this.$nextTick(() => {
-        type:Number,
+      this.initChart()
-        default:1,
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
   },
-      yearsChange:{
+  methods: {
-        type:Number,
+    initChart() {
-        default:1,
+      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'],
+                ],
               },
             },
-    watch:{
+            axisTick: { show: false },
-      typeValue:{
+            axisLabel: { show: false },
-        handler(newVAlue){
+            splitLine: { show: false },
-          console.log(newVAlue);
+            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, // 设置指针粗细
               },
             },
-      yearsChange:{
+            title: {
-        handler(newVAlue){
+              show: true,
-          console.log(newVAlue);
+              offsetCenter: [0, '25%'],
+              textStyle: {
+                color: '#2d99e2',
+                fontSize: 15,
+                fontFamily: '微软雅黑',
+                fontWeight: 'bold',
               },
             },
+            detail: {
+              show: false,
             },
-    mounted() {
+            data: [
-      // this.cancalDebounce();
+              {
-      window.addEventListener('resize', this.cancalDebounce);
+                value: 29.8,
+                name: '你要的比例 29.8%',
               },
-    methods:{
+            ],
-      // 获取top5列表
+          },
+        ],
+      };
 
-      // 屏幕尺寸变化
+      this.chart.setOption(
-      cancalDebounce(){
+        option
-        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>
+}
-  <style lang="scss" scoped>
+</script>
-  
-  </style>
-  

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()
+    }
+  }
+}