Changes

src/views/dashboard-screen/syjhdxqk/index.vue

@@ -12,11 +12,17 @@
 
 <script>
 
+import {chartDlydts, chartSyjhdxqk} from '@/api/dashboard-json'
+
 export default {
   name: 'SyjhdxqkChart',
   data() {
     return {
-      option: {}
+      option: {},
+      arrMap: {
+        '开关分合计划': [],
+        '单体计划': []
+      }
     }
   },
   created() {
@@ -24,7 +30,43 @@ export default {
   },
 
   methods: {
-    getOption() {
+    async getOption() {
+      const res = await chartSyjhdxqk()
+      if (res?.code === 200) {
+        const arrMap = {
+          '开关分合计划': [],
+          '单体计划': []
+        }
+        // const max =
+        res.info.xaxis.forEach((item, index) => {
+          const valItem = {
+            name: item,
+            value: res.info.series[1].data[index],
+            used: res.info.series[1].data[index],
+            total: res.info.series[0].data[index]
+          }
+          arrMap['开关分合计划'].push(valItem)
+          const valItem2 = {
+            name: item,
+            value: res.info.series[3].data[index],
+            used: res.info.series[3].data[index],
+            total: res.info.series[2].data[index]
+          }
+          arrMap['单体计划'].push(valItem2)
+        })
+        arrMap['开关分合计划'].forEach(item => {
+          if (item.used > item.total) {
+            item.used = item.total
+          }
+        })
+        arrMap['单体计划'].forEach(item => {
+          if (item.used > item.total) {
+            item.used = item.total
+          }
+        })
+        this.arrMap = arrMap
+      }
+      window['is'] = this
       const baseWidth = this.EchartfontSize(16)
       const offsetWidth = this.EchartfontSize(14)
       const triangleHeight = 8
@@ -84,7 +126,8 @@ export default {
         },
         series: [
           {
-            data: [200, 85, 112, 275],
+            // data: [200, 85, 112, 275],
+            data: this.arrMap['开关分合计划'].map(item => item.used),
 
             type: 'pictorialBar',
             symbol: 'rect',
@@ -132,7 +175,8 @@ export default {
             zlevel: 1
           },
           {
-            data: [200, 85, 112, 275],
+            // data: [200, 85, 112, 275],
+            data: this.arrMap['开关分合计划'].map(item => item.used),
             type: 'pictorialBar',
             symbolPosition: 'end',
             symbol: 'triangle',
@@ -147,7 +191,8 @@ export default {
             zlevel: 2
           },
           {
-            data: [600, 541, 741, 741],
+            // data: [600, 541, 741, 741],
+            data: this.arrMap['开关分合计划'].map(item => item.total),
             type: 'pictorialBar',
             symbol: 'rect',
 
@@ -180,14 +225,19 @@ export default {
               distance: 10,
               color: '#fff',
               fontSize: this.EchartfontSize(12),
-              position: [-baseWidth - offsetWidth / this.EchartfontSize(10), -this.EchartfontSize(20)]
+              position: [-baseWidth - offsetWidth / this.EchartfontSize(10), -this.EchartfontSize(36)],
+              formatter: (evt) => {
+                const item = this.arrMap['开关分合计划']?.[evt.dataIndex] || {}
+                return `${item.value}\n /\n${item.total}`
+              }
             },
             zlevel: -1
 
           },
 
           {
-            data: [600, 541, 741, 741],
+            // data: [600, 541, 741, 741],
+            data: this.arrMap['开关分合计划'].map(item => item.total),
             type: 'pictorialBar',
 
             symbolPosition: 'end',
@@ -208,8 +258,8 @@ export default {
 
           // 2
           {
-            data: [160, 410, 112, 275],
-
+            // data: [160, 410, 112, 275],
+            data: this.arrMap['单体计划'].map(item => item.used),
             type: 'pictorialBar',
             symbol: 'rect',
 
@@ -259,7 +309,8 @@ export default {
             zlevel: 1
           },
           {
-            data: [160, 410, 112, 275],
+            // data: [160, 410, 112, 275],
+            data: this.arrMap['单体计划'].map(item => item.used),
             type: 'pictorialBar',
 
             symbolPosition: 'end',
@@ -277,7 +328,8 @@ export default {
             zlevel: 2
           },
           {
-            data: [580, 541, 741, 420],
+            // data: [580, 541, 741, 420],
+            data: this.arrMap['单体计划'].map(item => item.total),
             type: 'pictorialBar',
             symbol: 'rect',
 
@@ -311,13 +363,18 @@ export default {
               distance: 10,
               color: '#fff',
               fontSize: this.EchartfontSize(12),
-              position: [baseWidth - offsetWidth / this.EchartfontSize(2), -this.EchartfontSize(20)]
+              position: [baseWidth - offsetWidth / this.EchartfontSize(2), -this.EchartfontSize(36)],
+              formatter: (evt) => {
+                const item = this.arrMap['单体计划']?.[evt.dataIndex] || {}
+                return `${item.value}\n /\n${item.total}`
+              }
             },
             zlevel: -1
 
           },
           {
-            data: [580, 541, 741, 420],
+            // data: [580, 541, 741, 420],
+            data: this.arrMap['单体计划'].map(item => item.total),
             type: 'pictorialBar',
 
             symbolPosition: 'end',
@@ -361,7 +418,8 @@ $xHeight: 120px;
     z-index: 1;
     right: 1.5vw;
     top: 0;
-    img{
+
+    img {
       height: 20px;
       width: auto;
       object-fit: cover;