优化看板图表

jero-web/src/views/projectManagement/projectStatusBoard/index.vue

@@ -53,6 +53,7 @@
       <div class="box-top-content">
         <div id="main"></div>
         <div class="axis-tip"></div>
+        <JLoading :loading="loadingMain">{{this.$t('dataLoading')}}</JLoading>
       </div>
     </div>
     <div class="box-bottom">
@@ -112,6 +113,7 @@
       return {
         queryParam: {},
         loading: false,
+        loadingMain: false,
         dataSource: [],
         open: false,
         getTime: [],
@@ -192,6 +194,7 @@
           startTime: this.startTime,
           endTime: this.endTime
         }
+        this.loadingMain = true
         getAction(this.url.timeline, query).then((res) => {
           if (res.success) {
             this.getTimelineList(res.result)
@@ -228,7 +231,6 @@
         })
       },
       getEcharts(timeList, timeData) {
-
         var chartDom = document.getElementById('main')
         var myChart = echarts.init(chartDom)
         var option
@@ -291,7 +293,7 @@
           },
           grid: {
             top: 0,
-            left: 2,
+            left: 40,
             right: 40,
             containLabel: true
           },
@@ -313,7 +315,7 @@
                 fontFamily: 'Blue Sky Noto',
                 color: '#000F16',
                 fontSize: '16'
-              }
+              },
             },
             axisLine: {
               show: false
@@ -364,8 +366,11 @@
             }
           ]
         }
-
-        option && myChart.setOption(option)
+        this.loadingMain = false
+        option && myChart.setOption(option, true)
+        window.onresize = () => {
+          myChart.resize()
+        }
         myChart.on('mouseover', 'yAxis.category', function(e) {
           console.log(e)
           let axisTip = document.querySelector('.axis-tip')
@@ -452,7 +457,7 @@
     width: 100%;
     height: 400px;
     margin-bottom: 20px;
-    padding: 20px;
+    padding: 20px 0;
     box-sizing: border-box;
     overflow: auto;
   }
@@ -463,7 +468,7 @@
 
   #main {
     width: 100%;
-    height: 200%;
+    height: 100%;
   }
 
   .axis-tip {