Changes

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

@@ -61,7 +61,6 @@ export default {
         total: 100
       }]
       data = this.arrMap
-      window['data'] = data
       const colors = [
         [
           new echarts.graphic.LinearGradient(0, 1, 0, 0, [{offset: 0, color: 'rgb(82, 113, 195)'}, {

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

@@ -5,7 +5,7 @@
         <v-chart autoresize :option="option1"/>
       </div>
       <div class="col-2 col">
-        <!--        <v-chart autoresize :option="option2"/>-->
+        <v-chart autoresize :option="option2"/>
       </div>
     </div>
   </div>
@@ -38,62 +38,53 @@ export default {
           [res.info.series[0].data[2], res.info.series[1].data[2]]
         ]
       }
-      var xData2 = ['变电', '电力']
+      var xData2 = ['变电']
       var data = arrMap || [
-        [50, 50],
-        [100, 100],
-        [80, 80]
+        [50, 10],
+        [100, 10],
+        [80, 10]
+      ]
+      const data1 = [
+        [data[0][0]],
+        [data[1][0]],
+        [data[2][0]]
+      ]
+      const data2 = [
+        [data[0][1]],
+        [data[1][1]],
+        [data[2][1]]
       ]
       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])
 
-      data.forEach((item, index) => {
-        let sealingBeforeItem = item
-        let sealingStart = [0, 0, 0]
-        let sealingEnd = sealingBeforeItem
-        if (index > 0) {
-          sealingBeforeItem = sealingData[index - 1][1]
-          sealingStart = sealingBeforeItem.map((d) => {
-            return d + gapPerSize
-          })
-          sealingEnd = sealingBeforeItem.map((d, dIndex) => {
-            return d + gapPerSize + item[dIndex]
-          })
-        }
-        sealingData[index] = [sealingStart, sealingEnd]
-        // const gapItem = item.map(n => {
-        //   return n + gapPerSize
-        // })
-        // gapData.push(gapItem)
-      })
+      window['xDataSum'] = xDataSum
 
-      // 三条数据变两条
-      sealingData = JSON.parse(JSON.stringify(sealingData))
-      sealingData.forEach((item, index) => {
-        const start = item[0].splice(0, 2)
-        const end = item[1].splice(0, 2)
-        sealingData[index] = [start, end]
-      })
       const gapWidth = this.EchartfontSize(125)
       const barWidth = this.EchartfontSize(10)
       const symbolOffsetWidth = this.EchartfontSize(1)
       const symbolSizeWidth = this.EchartfontSize(4)
       const barGap = 10
       const params = {
-        xData2: [xData2[0]],
-        data,
+        xData2: xData2,
+        data: data2,
         gapWidth,
         barWidth,
         symbolOffsetWidth,
         symbolSizeWidth,
         barGap,
-        gapData,
-        sealingData,
         xDataSum
       }
       this.renderOption('option1', params)
+      const params2 = {
+        xData2: ['电力'],
+        data: data1,
+        gapWidth,
+        barWidth,
+        symbolOffsetWidth,
+        symbolSizeWidth,
+        barGap,
+        xDataSum
+      }
+      this.renderOption('option2', params2)
     },
     renderOption(optionName, params) {
       const {
@@ -104,25 +95,62 @@ export default {
         symbolOffsetWidth,
         symbolSizeWidth,
         barGap,
-        gapData,
-        sealingData,
         xDataSum
       } = params
+      window['params'] = params
+      window['tis'] = this
+
+      let sealingData = []
+      const gapPerSize = 3
+      const gapData = data.map((item) => {
+        if (item[0] === 0) {
+          return [0, 0, 0]
+        } else {
+          return [gapPerSize, gapPerSize, gapPerSize]
+        }
+      })
+
+      data.forEach((item, index) => {
+        let sealingBeforeItem = item
+        let sealingStart = [0, 0, 0]
+        let sealingEnd = sealingBeforeItem
+        if (index > 0) {
+          sealingBeforeItem = sealingData[index - 1][1]
+          sealingStart = sealingBeforeItem.map((d) => {
+            return d + gapPerSize
+          })
+          sealingEnd = sealingBeforeItem.map((d, dIndex) => {
+            return d + gapPerSize + item[dIndex]
+          })
+        }
+        sealingData[index] = [sealingStart, sealingEnd]
+      })
+
+      console.log('sealingData1', sealingData)
+      // 三条数据变两条
+      sealingData = JSON.parse(JSON.stringify(sealingData))
+      sealingData.forEach((item, index) => {
+        const start = item[0].splice(0, 2)
+        const end = item[1].splice(0, 2)
+        sealingData[index] = [start, end]
+      })
+      console.log('sealingData2', sealingData)
+
       this[optionName] = {
         tooltip: {
           trigger: 'item'
         },
         legend: {
           selectedMode: false,
-          show: true,
+          show: optionName !== 'option2',
           top: '5%',
           right: '30%',
           width: '100%',
-          height: '100%',
+          height: '0%',
           // orient: 'vertical',
           textStyle: {
             color: '#ffffff',
-            fontSize: this.EchartfontSize(16)
+            fontSize: this.EchartfontSize(12)
           },
           data: [
             {
@@ -160,7 +188,8 @@ export default {
           right: '10%',
           left: '5%',
           height: '80%',
-          top: '30%',
+          top: optionName === 'option2' ? 0 : '50%',
+          bottom: optionName === 'option2' ? '30%' : 0,
           containLabel: true
 
         },
@@ -245,7 +274,7 @@ export default {
               color: 'rgba(255,0,0,1)',
               opacity: 0
             },
-            data: gapData[0]
+            data: data[0][0] === 0 ? [0] : gapData[0]
           },
           { // 二级
             name: '二级',
@@ -282,7 +311,7 @@ export default {
               color: 'rgba(255,0,0,1)',
               opacity: 0
             },
-            data: gapData[1]
+            data: data[1][0] === 0 ? [0] : gapData[1]
           },
           { // 三级
             name: '三级',
@@ -328,7 +357,7 @@ export default {
             'symbolSize': [symbolSizeWidth, barWidth],
             'symbolOffset': [symbolOffsetWidth, 0],
             itemStyle: {
-              opacity: 1,
+              opacity: data[0][0] === 0 ? 0 : 1,
               color: (params) => {
                 return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                   offset: 0,
@@ -353,7 +382,7 @@ export default {
             'symbolPosition': 'end',
             'z': 12,
             itemStyle: {
-              opacity: 1,
+              opacity: data[0][0] === 0 ? 0 : 1,
               color: (params) => {
                 return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                   offset: 0,
@@ -375,7 +404,7 @@ export default {
             'symbolOffset': [symbolOffsetWidth, 0],
             'z': 12,
             itemStyle: {
-              opacity: 1,
+              opacity: data[1][0] === 0 ? 0 : 1,
               color: (params) => {
                 return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                   offset: 0,
@@ -396,7 +425,7 @@ export default {
               //     return 'ssss'
               // }
             },
-            'symbolPosition': 'end',
+            'symbolPosition': 'start',
             'data': sealingData[1][0]
           },
           { // 封口4
@@ -408,7 +437,7 @@ export default {
             'symbolPosition': 'end',
             'z': 12,
             itemStyle: {
-              opacity: 1,
+              opacity: data[1][0] === 0 ? 0 : 1,
               color: (params) => {
                 return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                   offset: 1,
@@ -431,10 +460,10 @@ export default {
             'symbolOffset': [symbolOffsetWidth, 0],
             'z': 12,
             itemStyle: {
-              opacity: 1,
+              opacity: data[2][0] === 0 ? 0 : 1,
               color: (params) => {
                 return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
-                  offset: 0,
+                  offset: data[2][0] === 0 ? 0 : 1,
                   color: 'rgba(162, 237, 255,.1)' // 0% 处的颜色
                 }, {
                   offset: 1,
@@ -455,7 +484,7 @@ export default {
             'symbolPosition': 'end',
             'data': sealingData[2][0]
           },
-          { // 封口5
+          { // 封口6
             'name': '',
             'type': 'pictorialBar',
             'symbolSize': [symbolSizeWidth, barWidth],
@@ -463,8 +492,9 @@ export default {
             'symbolOffset': [symbolOffsetWidth, 0],
             'symbolPosition': 'end',
             'z': 12,
+            show: false,
             itemStyle: {
-              opacity: 1,
+              opacity: data[2][0] === 0 ? 0 : 1,
               color: (params) => {
                 return new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                   offset: 0,
@@ -509,7 +539,11 @@ export default {
               position: 'right',
               formatter: (item) => {
                 console.log('item', item)
-                return xDataSum[item.dataIndex]
+                if (optionName === 'option1') {
+                  return xDataSum[1]
+                } else {
+                  return xDataSum[0]
+                }
               }
             }
           }