设备看板文字重叠

src/views/business/deviceManagement/components/barCharto.vue

@@ -148,7 +148,7 @@
               top: '80px',
               left: '40px',
               right: '20px',
-              bottom: '30px'
+              bottom: '40px'
           },
           tooltip: {
             trigger: 'axis',
@@ -161,7 +161,6 @@
             formatter: function (params) {
               let str = `${that.value[params[0].dataIndex].org}`
               params.forEach(item =>{
-                console.log(item,'iiiiiiiiiiiiii')
                 let nameNum = ''
                 nameNum = that.correspondence[item.seriesName] || that.correspondenceUn[item.seriesName]
                 str += `<br /> ${item.marker} ${nameNum}  ${item.data[item.seriesName]}`
@@ -178,7 +177,8 @@
             axisLabel: {
               color: '#fff',
               interval: 0,
-              // rotate: 20,
+              rotate: 20,
+              margin: 15,
               formatter: function (params) {
                 let str = ""
                 let paramsLen = params.length

src/views/business/deviceManagement/components/entirety.vue

@@ -22,7 +22,7 @@
             <div class="styFlex">
               <div v-for="(t, e) in item" :key="'item'+e">
                 <div>{{captionArr[e]}}</div>
-                <div style="color: rgb(255,255,0);font-weight:600;">{{t}}</div>
+                <div style="color: rgb(255,255,0);font-weight:600;margin-top: 1vh;">{{t}}</div>
               </div>
             </div>
           </div>
@@ -31,7 +31,7 @@
           <div class="itemSty" v-if="i!=='sum'" v-for="(item, i) in m" :key="'m2'+i">
             <div class="mySty styWidth">
               <div class="textAlign">{{captionArr[i]}}</div>
-              <div style="color: rgb(255,255,0);font-weight:600;">{{m[i]}}</div>
+              <div style="color: rgb(255,255,0);font-weight:600;margin-top: 1vh;">{{m[i]}}</div>
             </div>
           </div>
         </div>
@@ -40,11 +40,11 @@
           <div class="totaSty flexCaliSty">
               <div class="styWidth">
                 <div class="textAlign">{{captionArr['monthAldyNum']}}</div>
-                <div style="color: rgb(255,255,0);font-weight:600;">{{m['monthAldyNum']}}</div>
+                <div style="color: rgb(255,255,0);font-weight:600;margin-top: 1vh;">{{m['monthAldyNum']}}</div>
               </div>
               <div class="styWidth">
                 <div class="textAlign">{{captionArr['monthPlanNum']}}</div>
-                <div style="color: rgb(255,255,0);font-weight:600;">{{m['monthPlanNum']}}</div>
+                <div style="color: rgb(255,255,0);font-weight:600;margin-top: 1vh;">{{m['monthPlanNum']}}</div>
               </div>
           </div>
           <div>
@@ -184,11 +184,15 @@
           }
           .totaSty{
             display: flex;
+            font-size: small;
             justify-content: space-around;
           }
-          .caliSty{}
+          .caliSty{
+            font-size: small;
+          }
           .mySty{
             width: 100%;
+            font-size: small;
             .textAlign{
               text-align: center;
             }
@@ -202,7 +206,7 @@
             // width: 50%;
           }
           .flexCaliSty{
-            margin-top: 4%;
+            margin-top: 5%;
           }
         }
       }

src/views/business/deviceManagement/components/pieChart.vue

@@ -2,7 +2,7 @@
   <div class="statisticsPage" :style="{width:width,height:height}">
     <div v-show="show" :id="'pie'+id" :style="{height:'100%'}"/>
     <div v-show="!show"  :style="{height:'100%'}">
-      <div style="height:8%;font-size:24px;font-weight: 600;"> {{ title }} </div>
+      <div :style="{height:'8%','font-size':this.titleFontSize+'px','font-weight': '600'}"> {{ title }} </div>
       <div class="nullShow">暂无数据</div>
     </div>
   </div>
@@ -42,7 +42,8 @@
     },
     data () {
       return {
-        show: false
+        show: false,
+        titleFontSize: 24
       }
     },
     watch: {
@@ -64,19 +65,21 @@
       // setTimeout(() => {
       //   this.drawLine()
       // }, 100);
-      
+      let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
+      // this.titleFontSize = clientWidth * 0.0052083 * 24
     },
     methods: {
       drawLine(){
         const totality = GetTotality(this.value)
         const that = this
+        
         let pie = echarts.init(document.getElementById('pie'+this.id))
         let option;
         option = {
           title: {
             text: this.title,
             left: 'left',
-            textStyle:{ fontSize:24,color: this.colorw }
+            textStyle:{ fontSize:this.titleFontSize,color: this.colorw }
           },
           tooltip: {
             trigger: 'item'
@@ -121,19 +124,19 @@
                 a: {
                   width:80,
                   align: 'left',
-                  fontSize: 16,
-                  lineHeight: 20
+                  fontSize: 12,
+                  lineHeight: 18
                 },
                 b: {
                   width:60,
                   align: 'right',
-                  fontSize: 16,
+                  fontSize: 12,
                   fontWeight: 300
                 },
                 c: {
                   width:50,
                   align: 'right',
-                  fontSize: 16
+                  fontSize: 12
                 }
               }
             }