修改数据显示

src/views/dashboard/components/dmadata/dmachart.vue

@@ -3,20 +3,7 @@
     <div class="dmaone">
       <div class="dmatitle"><div class="smallTitle">一级分区</div></div>
       <div class="onecontent">
-        <div class="dma-chart" ref="one_chart"></div>
-        <!-- <div class="dma_content">
-          <div class="titlelabel">
-            <div class="jt1"></div>
-            <div class="title">
-               <div class="usernum"><label class="ledfont">{{dmaOnePercent}}</label><label>%</label></div>
-              <div class="usertitle">综合漏损率</div>
-            </div>
-            <div class="jt2"></div>
-          </div>
-        </div> -->
-        <div class="dma-chart" ref="two_chart"></div>
-        <div class="dma-chart" ref="three_chart"></div>
-        <div class="dma-chart" ref="four_chart"></div>
+        <div v-for="item in dmaOneList" :key="item.id" ref="onechart" class="dma_one_chart" :style="'height:100%;width:'+(100/(dmaOneList.length > 0 ? dmaOneList.length : 1))+'%;'"/>
       </div>
     </div>
     <div class="dmatwo">
@@ -67,17 +54,6 @@ export default {
       dmaTreeCount:0,
       leakCount:0,
       dmaTwoList:[],
-      // dmaTwoList:[
-      //   { id:'0',name:'21片区',leakage:'9' },
-      //   { id:'1',name:'22片区',leakage:'10' },
-      //   { id:'2',name:'23片区',leakage:'16' },
-      //   { id:'3',name:'24片区',leakage:'14' },
-      // ],
-
-      seriesData1:[1,2,4,5,6,2,2,9,2,11,2,5],
-      seriesData2:[4,2,4,5,4,7,5,9,2,5,4,8],
-      seriesData3:[8,4,4,5,4,2,5,4,2,2,5,8],
-
       maxvalue:100,    //柱状最大值
     }
   },
@@ -98,13 +74,10 @@ export default {
       getLevelDmaLeak({}).then(res => {
         that.levelDmaLeak = res.result
         that.dmaTwoList = that.levelDmaLeak.twoLeakList
+        that.dmaOneList = that.levelDmaLeak.oneLeakList
         that.loading = false
       }).then(()=>{
-        that.drawOneLeftChart()
-        that.drawOneCenterChart()
-        that.drawOneRightChart()
-        that.drawFourChart()
-
+        that.drawOneChart()
         that.drawTwoChart()
         that.drawThreeChart()
       }).catch((err) => {
@@ -112,710 +85,13 @@ export default {
       });
     },
 
-    /**
-     * @description 一级分区 左
-     */
-    drawOneLeftChart() {
-      const that = this;
-      const chartReady = that.$echarts.init(that.$refs.one_chart)
-      //一级分区数值
-      const result = that.levelDmaLeak.oneLeakList[0]
-      var data = Number(result.leakageRate) // 百分比
-      var width = 100;    //宽度
-      var cant = 20;    //面
-      var cantoffset = 10;    
-      //根据数字、判断数据
-      let maxvalue = 100
-      if(data<40){
-        maxvalue = data
-      }
-      const options = this.drawComOneChart(result)
-      // const options = {
-      //     // backgroundColor: '#0e202d',
-      //     tooltip: {
-      //         trigger: 'none'
-      //     },
-      //     grid: {
-      //           top:'15%',
-      //           bottom: '20%',
-      //           containLabel: true
-      //         },
-      //     xAxis: {
-      //         data: ["百分比"],
-      //         axisTick: {
-      //             show: false
-      //         },
-      //         axisLine: {
-      //             show: false
-      //         },
-      //         axisLabel: {
-      //             show: false,
-      //             textStyle: {
-      //                 color: '#e54035'
-      //             }
-      //         }
-      //     },
-      //     yAxis: {
-      //         splitLine: {
-      //             show: false
-      //         },
-      //         axisTick: {
-      //             show: false
-      //         },
-      //         axisLine: {
-      //             show: false
-      //         },
-      //         axisLabel: {
-      //             show: false
-      //         }
-      //     },
-      //     series: [
-      //       {
-      //         name: '最上层立体圆',
-      //         type: 'pictorialBar',
-      //         symbolSize: [width, cant],
-      //         symbolOffset: [0, -cantoffset],
-      //         z: 12,
-      //         itemStyle: {
-      //             normal: {
-      //                 color: '#027988'
-      //             }
-      //         },
-      //         label: {
-      //           show: true,
-      //           position: "top",
-      //           offset:[0,20],
-      //           formatter: result.name,
-      //           color: "#A4D9F9",
-      //           fontSize:16,
-      //       },
-      //         data: [{
-      //             value: that.maxvalue,
-      //             symbolPosition: 'end'
-      //         }]
-      //     }, {
-      //         name: '中间立体圆',
-      //         type: 'pictorialBar',
-      //         symbolSize: [width, cant],
-      //         symbolOffset: [0, -cantoffset],
-      //         z: 12,
-      //         itemStyle: {
-      //             normal: {
-      //                 color: '#30E6FD'
-      //             }
-      //         },
-      //         data: [{
-      //             value: data,
-      //             symbolPosition: 'end'
-      //         }]
-      //     }, {
-      //         name: '最底部立体圆',
-      //         type: 'pictorialBar',
-      //         symbolSize: [width, cant],
-      //         symbolOffset: [0, 10],
-      //         z: 12,
-      //         itemStyle: {
-      //             normal: {
-      //                 color: '#016ACC'
-      //             }
-      //         },
-      //         data: [that.maxvalue - data]
-      //     }, {
-      //         //底部立体柱
-      //         stack: '1',
-      //         type: 'bar',
-      //         itemStyle: {
-      //                     "normal": {
-      //                         "color": {
-      //                             "x": 0,
-      //                             "y": 0,
-      //                             "x2": 0,
-      //                             "y2": 1,
-      //                             "type": "linear",
-      //                             "global": false,
-      //                             "colorStops": [{//第一节下面
-      //                                 "offset": 0,
-                                    
-      //                               "color": "rgba(2, 216, 243, 1)"
-      //                             }, {
-      //                                 "offset": 1,
-      //                                 "color": "#016ACC"
-      //                             }]
-      //                         }
-      //                     }
-      //                 },
-      //         // label: {
-      //         //     show: true,
-      //         //     position: "top",
-      //         //     distance: 15,
-      //         //     color: "#FFFE00",
-      //         //     fontSize:50,
-      //         //     formatter:'{c}'+'%'
-      //         // },
-      //         label: {
-      //           show: true,
-      //           color:'#FFFFFF',
-      //           fontSize:20,
-      //           fontFamily: "ShiShangZhongHeiJianTi",
-      //           position: 'inside',
-      //           formatter:'{c}'+'%'
-      //         },
-              
-      //         silent: true,
-      //         barWidth: width,
-      //         barGap: '-100%', // Make series be overlap
-      //         data: [data]
-      //     }, {
-      //         //上部立体柱
-      //         stack: '1',
-      //         type: 'bar',
-      //         itemStyle: {
-      //             normal: {
-      //                   color: '#027988',
-      //                 opacity:0.3
-      //             }
-      //         },
-      //         silent: true,
-      //         barWidth: width,
-      //         barGap: '-100%', // Make series be overlap
-      //         data: [that.maxvalue - data]
-      //     }]
-      // };
-      chartReady.setOption(options)
-
-      //自定义缩放
-      window.addEventListener("resize", () => {
-        if(chartReady){
-          chartReady.resize()
-        }
-      })
-    },
-    /**
-     * @description 一级分区 左
-     */
-    drawOneCenterChart() {
-      const that = this;
-      const chartReady = that.$echarts.init(that.$refs.two_chart)
-      //一级分区数值
-      const result = that.levelDmaLeak.oneLeakList[1]
-      var data = Number(result.leakageRate) // 百分比
-      var width = 100;    //宽度
-      var cant = 20;    //面
-      var cantoffset = 10;    //
-      const options = this.drawComOneChart(result)
-      // const options = {
-      //     // backgroundColor: '#0e202d',
-      //     tooltip: {
-      //         trigger: 'none'
-      //     },
-      //     grid: {
-      //           top:'15%',
-      //           bottom: '20%',
-      //           containLabel: true
-      //         },
-      //     xAxis: {
-      //         data: ["百分比"],
-      //         axisTick: {
-      //             show: false
-      //         },
-      //         axisLine: {
-      //             show: false
-      //         },
-      //         axisLabel: {
-      //             show: false,
-      //             textStyle: {
-      //                 color: '#e54035'
-      //             }
-      //         }
-      //     },
-      //     yAxis: {
-      //         splitLine: {
-      //             show: false
-      //         },
-      //         axisTick: {
-      //             show: false
-      //         },
-      //         axisLine: {
-      //             show: false
-      //         },
-      //         axisLabel: {
-      //             show: false
-      //         }
-      //     },
-      //     series: [{
-      //         name: '最上层立体圆',
-      //         type: 'pictorialBar',
-      //         symbolSize: [width, cant],
-      //         symbolOffset: [0, -cantoffset],
-      //         z: 12,
-      //         itemStyle: {
-      //             normal: {
-      //                 color: '#027988'
-      //             }
-      //         },
-      //         label: {
-      //           show: true,
-      //           position: "top",
-      //           offset:[0,20],
-      //           formatter: result.name,
-      //           color: "#A4D9F9",
-      //           fontSize:16,
-      //       },
-      //         data: [{
-      //             value: that.maxvalue,
-      //             symbolPosition: 'end'
-      //         }]
-      //     }, {
-      //         name: '中间立体圆',
-      //         type: 'pictorialBar',
-      //         symbolSize: [width, cant],
-      //         symbolOffset: [0, -cantoffset],
-      //         z: 12,
-      //         itemStyle: {
-      //             normal: {
-      //                 color: '#30E6FD'
-      //             }
-      //         },
-      //         data: [{
-      //             value: data,
-      //             symbolPosition: 'end'
-      //         }]
-      //     }, {
-      //         name: '最底部立体圆',
-      //         type: 'pictorialBar',
-      //         symbolSize: [width, cant],
-      //         symbolOffset: [0, 10],
-      //         z: 12,
-      //         itemStyle: {
-      //             normal: {
-      //                 color: '#016ACC'
-      //             }
-      //         },
-      //         data: [that.maxvalue - data]
-      //     }, {
-      //         //底部立体柱
-      //         stack: '1',
-      //         type: 'bar',
-      //         itemStyle: {
-      //                     "normal": {
-      //                         "color": {
-      //                             "x": 0,
-      //                             "y": 0,
-      //                             "x2": 0,
-      //                             "y2": 1,
-      //                             "type": "linear",
-      //                             "global": false,
-      //                             "colorStops": [{//第一节下面
-      //                                 "offset": 0,
-                                    
-      //                               "color": "rgba(2, 216, 243, 1)"
-      //                             }, {
-      //                                 "offset": 1,
-      //                                 "color": "#016ACC"
-      //                             }]
-      //                         }
-      //                     }
-      //                 },
-      //         // label: {
-      //         //     show: true,
-      //         //     position: "top",
-      //         //     distance: 15,
-      //         //     color: "#FFFE00",
-      //         //     fontSize:50,
-      //         //     formatter:'{c}'+'%'
-      //         // },
-      //         label: {
-      //           show: true,
-      //           color:'#FFFFFF',
-      //           fontSize:20,
-      //           fontFamily: "ShiShangZhongHeiJianTi",
-      //           position: 'inside',
-      //           formatter:'{c}'+'%'
-      //         },
-              
-      //         silent: true,
-      //         barWidth: width,
-      //         barGap: '-100%', // Make series be overlap
-      //         data: [data]
-      //     }, {
-      //         //上部立体柱
-      //         stack: '1',
-      //         type: 'bar',
-      //         itemStyle: {
-      //             normal: {
-      //                   color: '#027988',
-      //                 opacity:0.3
-      //             }
-      //         },
-      //         silent: true,
-      //         barWidth: width,
-      //         barGap: '-100%', // Make series be overlap
-      //         data: [that.maxvalue - data]
-      //     }]
-      // };
-      chartReady.setOption(options)
-
-      //自定义缩放
-      window.addEventListener("resize", () => {
-        if(chartReady){
-          chartReady.resize()
-        }
-      })
-    },
-
-    /**
-     * @description 一级分区 右
-     */
-    drawOneRightChart() {
-      const that = this;
-      const chartReady = that.$echarts.init(that.$refs.three_chart)
-      //一级分区数值
-      const result = that.levelDmaLeak.oneLeakList[2]
-      var data = Number(result.leakageRate) // 百分比 
-      var width = 100;    //宽度
-      var cant = 20;    //面
-      var cantoffset = 10;    //
-      const options = this.drawComOneChart(result)
-      // const options = {
-      //     // backgroundColor: '#0e202d',
-      //     tooltip: {
-      //         trigger: 'none'
-      //     },
-      //     grid: {
-      //           top:'15%',
-      //           bottom: '20%',
-      //           containLabel: true
-      //         },
-      //     xAxis: {
-      //         data: ["百分比"],
-      //         axisTick: {
-      //             show: false
-      //         },
-      //         axisLine: {
-      //             show: false
-      //         },
-      //         axisLabel: {
-      //             show: false,
-      //             textStyle: {
-      //                 color: '#e54035'
-      //             }
-      //         }
-      //     },
-      //     yAxis: {
-      //         splitLine: {
-      //             show: false
-      //         },
-      //         axisTick: {
-      //             show: false
-      //         },
-      //         axisLine: {
-      //             show: false
-      //         },
-      //         axisLabel: {
-      //             show: false
-      //         }
-      //     },
-      //     series: [{
-      //         name: '最上层立体圆',
-      //         type: 'pictorialBar',
-      //         symbolSize: [width, cant],
-      //         symbolOffset: [0, -cantoffset],
-      //         z: 12,
-      //         itemStyle: {
-      //             normal: {
-      //                 color: '#027988'
-      //             }
-      //         },
-      //         label: {
-      //           show: true,
-      //           position: "top",
-      //           offset:[0,20],
-      //           formatter: result.name,
-      //           color: "#A4D9F9",
-      //           fontSize:16,
-      //       },
-      //         data: [{
-      //             value: that.maxvalue,
-      //             symbolPosition: 'end'
-      //         }]
-      //     }, {
-      //         name: '中间立体圆',
-      //         type: 'pictorialBar',
-      //         symbolSize: [width, cant],
-      //         symbolOffset: [0, -cantoffset],
-      //         z: 12,
-      //         itemStyle: {
-      //             normal: {
-      //                 color: '#30E6FD'
-      //             }
-      //         },
-      //         data: [{
-      //             value: data,
-      //             symbolPosition: 'end'
-      //         }]
-      //     }, {
-      //         name: '最底部立体圆',
-      //         type: 'pictorialBar',
-      //         symbolSize: [width, cant],
-      //         symbolOffset: [0, 10],
-      //         z: 12,
-      //         itemStyle: {
-      //             normal: {
-      //                 color: '#016ACC'
-      //             }
-      //         },
-      //         data: [that.maxvalue - data]
-      //     }, {
-      //         //底部立体柱
-      //         stack: '1',
-      //         type: 'bar',
-      //         itemStyle: {
-      //                     "normal": {
-      //                         "color": {
-      //                             "x": 0,
-      //                             "y": 0,
-      //                             "x2": 0,
-      //                             "y2": 1,
-      //                             "type": "linear",
-      //                             "global": false,
-      //                             "colorStops": [{//第一节下面
-      //                                 "offset": 0,
-                                    
-      //                               "color": "rgba(2, 216, 243, 1)"
-      //                             }, {
-      //                                 "offset": 1,
-      //                                 "color": "#016ACC"
-      //                             }]
-      //                         }
-      //                     }
-      //                 },
-      //         // label: {
-      //         //     show: true,
-      //         //     position: "top",
-      //         //     distance: 15,
-      //         //     color: "#FFFE00",
-      //         //     fontSize:50,
-      //         //     formatter:'{c}'+'%'
-      //         // },
-      //         label: {
-      //           show: true,
-      //           color:'#FFFFFF',
-      //           fontSize:20,
-      //           fontFamily: "ShiShangZhongHeiJianTi",
-      //           position: 'inside',
-      //           formatter:'{c}'+'%'
-      //         },
-              
-      //         silent: true,
-      //         barWidth: width,
-      //         barGap: '-100%', // Make series be overlap
-      //         data: [data]
-      //     }, {
-      //         //上部立体柱
-      //         stack: '1',
-      //         type: 'bar',
-      //         itemStyle: {
-      //             normal: {
-      //                   color: '#027988',
-      //                 opacity:0.3
-      //             }
-      //         },
-      //         silent: true,
-      //         barWidth: width,
-      //         barGap: '-100%', // Make series be overlap
-      //         data: [that.maxvalue - data]
-      //     }]
-      // };
-      chartReady.setOption(options)
-
-      //自定义缩放
-      window.addEventListener("resize", () => {
-        if(chartReady){
-          chartReady.resize()
-        }
-      })
-    },
-
-    /**
-     * @description 一级分区 右
-     */
-    drawFourChart() {
-      const that = this;
-      const chartReady = that.$echarts.init(that.$refs.four_chart)
-      //一级分区数值
-      const result = that.levelDmaLeak.oneLeakList[3]
-      var data = Number(result.leakageRate) // 百分比 
-      var width = 100;    //宽度
-      var cant = 20;    //面
-      var cantoffset = 10;    //
-      const options = this.drawComOneChart(result)
-      // const options = {
-      //     // backgroundColor: '#0e202d',
-      //     tooltip: {
-      //         trigger: 'none'
-      //     },
-      //     grid: {
-      //           top:'15%',
-      //           bottom: '20%',
-      //           containLabel: true
-      //         },
-      //     xAxis: {
-      //         data: ["百分比"],
-      //         axisTick: {
-      //             show: false
-      //         },
-      //         axisLine: {
-      //             show: false
-      //         },
-      //         axisLabel: {
-      //             show: false,
-      //             textStyle: {
-      //                 color: '#e54035'
-      //             }
-      //         }
-      //     },
-      //     yAxis: {
-      //         splitLine: {
-      //             show: false
-      //         },
-      //         axisTick: {
-      //             show: false
-      //         },
-      //         axisLine: {
-      //             show: false
-      //         },
-      //         axisLabel: {
-      //             show: false
-      //         }
-      //     },
-      //     series: [{
-      //         name: '最上层立体圆',
-      //         type: 'pictorialBar',
-      //         symbolSize: [width, cant],
-      //         symbolOffset: [0, -cantoffset],
-      //         z: 12,
-      //         itemStyle: {
-      //             normal: {
-      //                 color: '#027988'
-      //             }
-      //         },
-      //         label: {
-      //           show: true,
-      //           position: "top",
-      //           offset:[0,20],
-      //           formatter: result.name,
-      //           color: "#A4D9F9",
-      //           fontSize:16,
-      //       },
-      //         data: [{
-      //             value: that.maxvalue,
-      //             symbolPosition: 'end'
-      //         }]
-      //     }, {
-      //         name: '中间立体圆',
-      //         type: 'pictorialBar',
-      //         symbolSize: [width, cant],
-      //         symbolOffset: [0, -cantoffset],
-      //         z: 12,
-      //         itemStyle: {
-      //             normal: {
-      //                 color: '#30E6FD'
-      //             }
-      //         },
-      //         data: [{
-      //             value: data,
-      //             symbolPosition: 'end'
-      //         }]
-      //     }, {
-      //         name: '最底部立体圆',
-      //         type: 'pictorialBar',
-      //         symbolSize: [width, cant],
-      //         symbolOffset: [0, 10],
-      //         z: 12,
-      //         itemStyle: {
-      //             normal: {
-      //                 color: '#016ACC'
-      //             }
-      //         },
-      //         data: [that.maxvalue - data]
-      //     }, {
-      //         //底部立体柱
-      //         stack: '1',
-      //         type: 'bar',
-      //         itemStyle: {
-      //                     "normal": {
-      //                         "color": {
-      //                             "x": 0,
-      //                             "y": 0,
-      //                             "x2": 0,
-      //                             "y2": 1,
-      //                             "type": "linear",
-      //                             "global": false,
-      //                             "colorStops": [{//第一节下面
-      //                                 "offset": 0,
-                                    
-      //                               "color": "rgba(2, 216, 243, 1)"
-      //                             }, {
-      //                                 "offset": 1,
-      //                                 "color": "#016ACC"
-      //                             }]
-      //                         }
-      //                     }
-      //                 },
-      //         // label: {
-      //         //     show: true,
-      //         //     position: "top",
-      //         //     distance: 15,
-      //         //     color: "#FFFE00",
-      //         //     fontSize:50,
-      //         //     formatter:'{c}'+'%'
-      //         // },
-      //         label: {
-      //           show: true,
-      //           color:'#FFFFFF',
-      //           fontSize:20,
-      //           fontFamily: "ShiShangZhongHeiJianTi",
-      //           position: 'inside',
-      //           formatter:'{c}'+'%'
-      //         },
-              
-      //         silent: true,
-      //         barWidth: width,
-      //         barGap: '-100%', // Make series be overlap
-      //         data: [data]
-      //     }, {
-      //         //上部立体柱
-      //         stack: '1',
-      //         type: 'bar',
-      //         itemStyle: {
-      //             normal: {
-      //                   color: '#027988',
-      //                 opacity:0.3
-      //             }
-      //         },
-      //         silent: true,
-      //         barWidth: width,
-      //         barGap: '-100%', // Make series be overlap
-      //         data: [that.maxvalue - data]
-      //     }]
-      // };
-      chartReady.setOption(options)
-
-      //自定义缩放
-      window.addEventListener("resize", () => {
-        if(chartReady){
-          chartReady.resize()
-        }
-      })
-    },
-
     /**
      * @description 一级分区公用
      */
     drawComOneChart(result){
-       const that = this;
-        
+      const that = this;  
       var data = Number(result.leakageRate) // 百分比
+      var newData = data
       var width = 100;    //宽度
       var cant = 20;    //面
       var cantoffset = 10;    
@@ -823,9 +99,19 @@ export default {
       let maxval = that.maxvalue
       let dbshow = true
       let sbshow = false
-      if(data<40){
+      if(data<0){
         dbshow = false
         sbshow = true
+        newData = data+''
+        data = 0
+        maxval = data
+      }else if(data>=0 && data<40){
+        dbshow = false
+        sbshow = true
+        maxval = data
+      }else if(data>100){
+        newData = data+''
+        data = 100
         maxval = data
       }else{
         maxval = maxval - data
@@ -914,7 +200,7 @@ export default {
               type: 'pictorialBar',
               symbolSize: [width, cant],
               symbolOffset: [0, 10],
-              z: 12,
+              z: 0,
               itemStyle: {
                   normal: {
                       color: '#016ACC'
@@ -951,7 +237,8 @@ export default {
                 fontSize:20,
                 fontFamily: "ShiShangZhongHeiJianTi",
                 position: 'inside',
-                formatter:'{c}'+'%'
+                // formatter:'{c}'+'%'
+                formatter: newData+'%'
               },
               silent: true,
               barWidth: width,
@@ -972,8 +259,8 @@ export default {
                 color:'#FFFFFF',
                 fontSize:20,
                 fontFamily: "ShiShangZhongHeiJianTi",
-                position: ['20%', '50%'],
-                formatter: data+'%'
+                // position: ['20%', '50%'],
+                formatter: newData+'%'
               },
               silent: true,
               barWidth: width,
@@ -984,6 +271,23 @@ export default {
       return options
     },
 
+    drawOneChart(){
+      const that = this;
+      that.levelDmaLeak.oneLeakList.forEach((item,index)=>{
+        const chartReady = that.$echarts.init(that.$refs.onechart[index])
+        //一级分区数值
+        const result = item
+        const options = that.drawComOneChart(result)
+        chartReady.setOption(options)
+        //自定义缩放
+        window.addEventListener("resize", () => {
+          if(chartReady){
+            chartReady.resize()
+          }
+        })
+      })
+    },
+
 
     /**
      * @description 二级分区
@@ -1010,6 +314,7 @@ export default {
       const that = this;
       const chartReady = that.$echarts.init(that.$refs.twochart[index])
       var data = reust.leakage; //百分比
+      var newData = data
       var width = 60;    //宽度
       var cant = 20;    //面
       var cantoffset = 10;    //
@@ -1017,13 +322,24 @@ export default {
       let maxval = that.maxvalue
       let dbshow = true
       let sbshow = false
-      if(data<40){
+      if(data<0){
         dbshow = false
         sbshow = true
+        newData = data+''
+        data = 0
+        maxval = data
+      }else if(data>=0 && data<40){
+        dbshow = false
+        sbshow = true
+        maxval = data
+      }else if(data>100){
+        newData = data+''
+        data = 100
         maxval = data
       }else{
         maxval = maxval - data
       }
+
       const options = {
           // backgroundColor: '#0e202d',
           tooltip: {
@@ -1144,7 +460,7 @@ export default {
                 fontSize:14,
                 fontFamily: "ShiShangZhongHeiJianTi",
                 position: 'inside',
-                formatter:'{c}'+'%'
+                formatter: newData+'%'
               },
               silent: true,
               barWidth: width,
@@ -1157,7 +473,7 @@ export default {
               itemStyle: {
                   normal: {
                         color: '#027988',
-                      opacity:0.3
+                      // opacity:0.3
                   }
               },
               label: {
@@ -1165,8 +481,8 @@ export default {
                 color:'#FFFFFF',
                 fontSize:14,
                 fontFamily: "ShiShangZhongHeiJianTi",
-                position: ['20%', '50%'],
-                formatter: data+'%'
+                // position: ['20%', '50%'],
+               formatter: newData+'%'
               },
               silent: true,
               barWidth: width,
@@ -1311,26 +627,6 @@ export default {
           }
         },
         series: seriesAry
-        // [
-        //   {
-        //     name: 'A片区',
-        //     type: 'line',
-        //     data: seriesData1,
-        //     smooth: true,
-        //   },
-        //   {
-        //     name: 'B片区',
-        //     type: 'line',
-        //     data: seriesData2,
-        //     smooth: true,
-        //   },
-        //   {
-        //     name: 'C片区',
-        //     type: 'line',
-        //     data: seriesData3,
-        //     smooth: true,
-        //   }
-        // ]
       }
       chartReady.setOption(options)
 

src/views/dashboard/components/misdata/yearmoney.vue

@@ -44,7 +44,7 @@ export default {
         this.curYearPay = parseFloat(res.Result.ThisYearPay)
         this.curMonthPay = parseFloat(res.Result.ThismonthPay === '' ? 0 : res.Result.ThismonthPay)
         this.nextMonthPay = parseFloat(res.Result.lastmonthPay)
-        this.beforeNextMonthPay = this.curYearPay - this.curMonthPay - this.nextMonthPay
+        this.beforeNextMonthPay = (this.curYearPay - this.curMonthPay - this.nextMonthPay).toFixed(2)
       }
     })
   },