合并代码

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

@@ -364,9 +364,6 @@
                     }
 
                     .AFuwufazhanzonglan-item-top {
-                      div {
-                        
-                      }
 
                       div:nth-child(1) {
                         font-size: 20px;
@@ -414,7 +411,14 @@
 
           //近三年
           .BJinsannianzijin-box {
-            .BJinsannianzijin {}
+            width: 100%;
+            .BJinsannianzijin {
+              width: 100%;
+              .BJinsannianzijinchart-left{
+                width: 50%;
+                height: 25vh;
+              }
+            }
           }
         }
 

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

@@ -1,29 +1,127 @@
-<!-- 近三年资金拨付情况 -->
 <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,
     }
   },
   mounted() {
-      // this.cancalDebounce();
+    this.$nextTick(() => {
-      window.addEventListener('resize', this.cancalDebounce);
+      this.initChart()
+    })
+  },
+  beforeDestroy() {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(document.getElementById('BJinsannianzijinchart-left'))
+      var value1 = Math.random() * 100; // 生成第一个随机值
+      var value2 = 300 - value1; // 第二个随机值，保证总和为100
+
+      // 计算比例
+      var minOffset = value1 / 100; // 第一个颜色的渐变比例
+      var maxOffset = (value1 + value2) / 100; // 第二个颜色的渐变比例（这里总和为100，所以maxOffset等于1）
+
+     let option = {
+        series: [
+          {
+            type: 'gauge',
+            splitNumber: 3,
+            radius: '93%',
+            center: ["50%", "70%"],
+            startAngle: 180,
+            endAngle: 0,
+            min: 0,
+            max: 100,
+            pointer: {
+              show: true,
+              width: 7,
+              length: "60%",
+              borderColor: '#000',
+              borderWidth: '10',
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                width: 35,
+                color: [
+                  [0.5, '#7BB2FF'], // 第一个颜色
+                  [0.6, '#000'],
+                  [1, '#4186FF']  // 第二个颜色
+                ],
+              },
+            },
+            axisLabel: {
+              show: true,
+              color: "#666",
+              fontSize: 16,
+              formatter: function (value) {
+                return value.toFixed(0);
+              },
+            },
+            axisTick: {
+              show: false,
             },
-    methods:{
+            splitLine: {
-      // 获取top5列表
+              show: false,
+              length: "28%",
+              lineStyle: {
+                color: "#fff",
+                width: 2,
               },
+            },
+            detail: {
+              show: false
+            },
+            title: {
+              show: false
+            },
+            data: [
+              {
+                value: value1,
+                name: '决策层国际化导向'
               }
-  </script>
+            ],
-  <style lang="scss" scoped>
+          }
+        ]
+      };
 
-  </style>
 
+      this.chart.setOption(
+        option
+      )
+    }
+  }
+}
+</script>

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