Changes

src/api/dashboard-json.js

@@ -111,3 +111,11 @@ export function chartSyjhdxqk(params) {
     params
   })
 }
+
+export function chartMapTable(params) {
+  return request({
+    url: '/chart/map/table',
+    method: 'get',
+    params
+  })
+}

src/views/dashboard-screen/chart-map/chartMap.vue

@@ -23,5 +23,10 @@ export default {
     height: 100%;
   }
 }
+::v-deep{
+  #container{
+    background-image: none !important;
+  }
+}
 
 </style>

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

@@ -3,25 +3,28 @@
     <div class="child c-1">
       <div class="cr">
         <div class="cr-1">
-          100%
+          {{ arrMap['一季度'].per }}%
         </div>
         <span class="label">第一季度</span>
       </div>
       <div class="cr">
         <div class="cr-2">
-          100%
+          {{ arrMap['二季度'].per }}%
+
         </div>
         <span class="label">第二季度</span>
       </div>
       <div class="cr">
         <div class="cr-3">
-          100%
+          {{ arrMap['三季度'].per }}%
+
         </div>
         <span class="label">第三季度</span>
       </div>
       <div class="cr">
         <div class="cr-4">
-          100%
+          {{ arrMap['四季度'].per }}%
+
         </div>
         <span class="label">第四季度</span>
       </div>
@@ -34,13 +37,19 @@
 
 <script>
 import * as echarts from 'echarts'
-import {chartDlbpds, chartDlsdxl} from "@/api/dashboard-json";
+import {chartDlsdxl} from '@/api/dashboard-json'
 
 export default {
   name: 'Dlsdxl',
   data() {
     return {
-      option: {}
+      option: {},
+      arrMap: {
+        '一季度': 0,
+        '二季度': 0,
+        '三季度': 0,
+        '四季度': 0
+      }
     }
   },
   created() {
@@ -49,14 +58,32 @@ export default {
 
   methods: {
     async getOption() {
+      let keys = []
+      const maxs = []
+      const values = []
+      const used = []
       const res = await chartDlsdxl()
       if (res?.code === 200) {
-        const arrMap = []
-        res.info.xaxis.forEach((item, index) => {
-          arrMap.push(res.info.series[0].data[index], res.info.series[1].data[index])
+        keys = res?.info.xaxis
+        res?.info.xaxis.forEach((key, index) => {
+          maxs.push(res.info.series[0].data[index])
+          values.push(res.info.series[1].data[index])
+          used.push(res.info.series[1].data[index])
+          const keyMap = {
+            [res?.info.series[0].name]: res.info.series[0].data[index],
+            [res?.info.series[1].name]: res.info.series[1].data[index],
+            per: (res.info.series[1].data[index] * 100 / res.info.series[0].data[index]).toFixed(0)
+          }
+
+          this.arrMap[key] = keyMap
         })
-        this.arrMap = arrMap
       }
+      // maxs.forEach((_, index) => {
+      //   if (used[index] > maxs[index]) {
+      //     used[index] = findMax
+      //   }
+      //   maxs[index] = findMax
+      // })
 
       const labelList = ['第一季度', '第二季度', '第三季度', '第四季度']
       this.option = {
@@ -100,7 +127,7 @@ export default {
                 fontSize: this.EchartfontSize(12)
               }
             },
-            data: ['4', '13', '25', '29', '38']
+            // data: values.reverse()
           },
           {
             nameTextStyle: {
@@ -120,15 +147,19 @@ export default {
             name: 'front-bar',
             type: 'bar',
             yAxisIndex: 0,
-            data: [4, 13, 25, 29, 38],
+            data: values.reverse(),
             label: {
+
               normal: {
                 show: true,
                 position: [this.EchartfontSize(240), -this.EchartfontSize(18)],
                 textStyle: {
                   color: '#ffffff',
                   fontSize: this.EchartfontSize(14)
-                }
+                },
+                formatter: (a, b) => {
+                  return values[a.dataIndex]
+                },
               }
             },
             barWidth: this.EchartfontSize(10),
@@ -146,7 +177,7 @@ export default {
             yAxisIndex: 0,
             symbol: 'rect',
             symbolSize: [4, 10],
-            data: [4, 13, 25, 29],
+            data: values.reverse(),
             itemStyle: {
               normal: {
                 borderRadius: 10,
@@ -160,7 +191,7 @@ export default {
             type: 'bar',
             yAxisIndex: 2,
             // barGap: '-100%',
-            data: [100, 100, 100, 100],
+            data: maxs.reverse(),
             barWidth: this.EchartfontSize(10),
             itemStyle: {
               normal: {

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

@@ -1,19 +1,26 @@
 <template>
   <div class="chart-wrap">
     <div class="wrap-fix">
-      <v-chart autoresize :option="option"/>
+      <div class="col-1 col">
+        <v-chart autoresize :option="option1"/>
+      </div>
+      <div class="col-2 col">
+        <!--        <v-chart autoresize :option="option2"/>-->
+      </div>
     </div>
   </div>
 </template>
 
 <script>
 import * as echarts from 'echarts'
+import {chartMapTable} from '@/api/dashboard-json'
 
 export default {
   name: 'Jryl',
   data() {
     return {
-      option: {}
+      option1: {},
+      option2: {}
     }
   },
   created() {
@@ -21,13 +28,23 @@ export default {
   },
 
   methods: {
-    getOption() {
+    async getOption() {
+      let arrMap = []
+      const res = await chartMapTable()
+      if (res.code === 200) {
+        arrMap = [
+          [res.info.series[0].data[0], res.info.series[1].data[0]],
+          [res.info.series[0].data[1], res.info.series[1].data[1]],
+          [res.info.series[0].data[2], res.info.series[1].data[2]]
+        ]
+      }
       var xData2 = ['变电', '电力']
-      var data = [
-        [50, 50, 50],
-        [100, 100, 100],
-        [80, 80, 80]
+      var data = arrMap || [
+        [50, 50],
+        [100, 100],
+        [80, 80]
       ]
+      const xDataSum = [arrMap[0][0] + arrMap[1][0] + arrMap[2][0], arrMap[0][1] + arrMap[1][1] + arrMap[2][1]]
       let sealingData = []
       const gapPerSize = 10
       const gapData = data.map(() => [gapPerSize, gapPerSize, gapPerSize])
@@ -59,12 +76,39 @@ export default {
         const end = item[1].splice(0, 2)
         sealingData[index] = [start, end]
       })
-      window['sealingData'] = sealingData
       const gapWidth = this.EchartfontSize(125)
       const barWidth = this.EchartfontSize(10)
       const symbolOffsetWidth = this.EchartfontSize(1)
       const symbolSizeWidth = this.EchartfontSize(4)
-      this.option = {
+      const barGap = 10
+      const params = {
+        xData2: [xData2[0]],
+        data,
+        gapWidth,
+        barWidth,
+        symbolOffsetWidth,
+        symbolSizeWidth,
+        barGap,
+        gapData,
+        sealingData,
+        xDataSum
+      }
+      this.renderOption('option1', params)
+    },
+    renderOption(optionName, params) {
+      const {
+        xData2,
+        data,
+        gapWidth,
+        barWidth,
+        symbolOffsetWidth,
+        symbolSizeWidth,
+        barGap,
+        gapData,
+        sealingData,
+        xDataSum
+      } = params
+      this[optionName] = {
         tooltip: {
           trigger: 'item'
         },
@@ -167,7 +211,7 @@ export default {
             name: '一级',
             type: 'bar',
             stack: 'total',
-            barGap: 10, /* 多个并排柱子设置柱子之间的间距*/
+            barGap: barGap, /* 多个并排柱子设置柱子之间的间距*/
             barCategoryGap: 10, /* 多个并排柱子设置柱子之间的间距*/
             barWidth: barWidth,
             itemStyle: { // lenged文本
@@ -188,7 +232,8 @@ export default {
               fontSize: this.EchartfontSize(16),
               color: '#ffffff'
             },
-            data: data[0]
+            data: data[0],
+            show: false
           },
           { // gap
             name: '',
@@ -209,7 +254,7 @@ export default {
             barWidth: barWidth,
             itemStyle: { // lenged文本
               opacity: 1,
-              color: function (params) {
+              color: (params) => {
                 return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                   offset: 0,
                   color: 'rgba(231, 203, 2, 0.30)' // 0% 处的颜色
@@ -246,7 +291,7 @@ export default {
             barWidth: barWidth,
             itemStyle: { // lenged文本
               opacity: 1,
-              color: function (params) {
+              color: (params) => {
                 return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                   offset: 0,
                   color: 'rgba(78, 231, 255, 0.30)' // 0% 处的颜色
@@ -284,7 +329,7 @@ export default {
             'symbolOffset': [symbolOffsetWidth, 0],
             itemStyle: {
               opacity: 1,
-              color: function (params) {
+              color: (params) => {
                 return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                   offset: 0,
                   color: 'rgba(237, 118, 101,.4)' // 0% 处的颜色
@@ -309,7 +354,7 @@ export default {
             'z': 12,
             itemStyle: {
               opacity: 1,
-              color: function (params) {
+              color: (params) => {
                 return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                   offset: 0,
                   color: 'rgba(237, 118, 101,1)' // 0% 处的颜色
@@ -331,7 +376,7 @@ export default {
             'z': 12,
             itemStyle: {
               opacity: 1,
-              color: function (params) {
+              color: (params) => {
                 return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                   offset: 0,
                   color: 'rgba(255, 238, 91,.1)' // 0% 处的颜色
@@ -364,7 +409,7 @@ export default {
             'z': 12,
             itemStyle: {
               opacity: 1,
-              color: function (params) {
+              color: (params) => {
                 return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                   offset: 1,
                   color: 'rgba(255, 238, 91, 1)' // 0% 处的颜色
@@ -387,7 +432,7 @@ export default {
             'z': 12,
             itemStyle: {
               opacity: 1,
-              color: function (params) {
+              color: (params) => {
                 return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                   offset: 0,
                   color: 'rgba(162, 237, 255,.1)' // 0% 处的颜色
@@ -420,7 +465,7 @@ export default {
             'z': 12,
             itemStyle: {
               opacity: 1,
-              color: function (params) {
+              color: (params) => {
                 return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                   offset: 0,
                   color: 'rgba(162, 237, 255,1)' // 0% 处的颜色
@@ -443,7 +488,7 @@ export default {
             'z': 12,
             itemStyle: {
               opacity: 1,
-              color: function (params) {
+              color: (params) => {
                 return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                   offset: 0,
                   color: 'rgba(162, 237, 255,0)' // 0% 处的颜色
@@ -463,7 +508,8 @@ export default {
               // position: [-baseWidth - offsetWidth / this.EchartfontSize(10), -this.EchartfontSize(20)]
               position: 'right',
               formatter: (item) => {
-                return '-/-'
+                console.log('item', item)
+                return xDataSum[item.dataIndex]
               }
             }
           }
@@ -487,6 +533,13 @@ export default {
   .wrap-fix {
     height: 100%;
     width: 100%;
+    display: flex;
+    flex-direction: column;
+
+    .col {
+      flex: 1;
+      flex-shrink: 0;
+    }
   }
 
 }

src/views/dashboard-screen/qb-dlsbxjdx/index.vue

@@ -31,7 +31,6 @@ export default {
 
   methods: {
     async getOption() {
-
       let keys = []
       const maxs = []
       const values = []