ss

src/utils/options.js

@@ -11,17 +11,17 @@ export function getOption(xAxis, data = [], type, dataZoom = {}) {
       'left': '0',
       'right': '0',
       'top': '10%',
-      'bottom': data && data.length > 50 ? '70px' : '0',
+      'bottom': data && data.length > (dataZoom.endValue || 50) ? '50px' : '0',
       'containLabel': true
     },
     'dataZoom': [
       {
         'type': 'slider',
-        'show': data && data.length > 50,
+        'show': data && data.length > (dataZoom.endValue || 50),
         'startValue': 0,
         'endValue': dataZoom.endValue || 50,
         'handleSize': 8,
-        'bottom': '10%'
+        'bottom': '10px'
       }
     ],
     'xAxis': [{
@@ -29,7 +29,8 @@ export function getOption(xAxis, data = [], type, dataZoom = {}) {
       'data': (!xAxis || xAxis.length < 1) ? [0] : xAxis,
       'axisLabel': {
         'interval': 0,
-        'rotate': 40
+        'rotate': 40,
+        'fontSize': 10
       },
       'axisTick': {
         'alignWithLabel': true
@@ -44,7 +45,11 @@ export function getOption(xAxis, data = [], type, dataZoom = {}) {
         'lineStyle': {
           'type': 'dashed'
         }
-      }
+      },
+      'nameTextStyle': {
+        'fontSize': 10
+      },
+      'scale': true
     }],
     'series': [{
       'name': null,

src/views/dataBigManage/components/efficiencyModule/index.vue

@@ -160,7 +160,7 @@
                 'outColor': '#fff',
                 'label': item.label,
                 'labelColor': '#fff',
-                'subTitle': `<span style=color:#fff;> 1%（${item.remark}）</span>`,
+                'subTitle': `<span style=color:#fff;> ${item.countStr}%（${item.remark || '--'}）</span>`,
                 'bgColor': 'transparent',
                 'padding': '8px 0px'
               }"

src/views/dataBigManage/components/qualityModule/index.vue

@@ -5,7 +5,7 @@
     class="qualityModule"
   >
     <el-col :span="8">
-      <div class="itemBox onlineProblem" style="height: 403px">
+      <div class="itemBox onlineProblem" style="height: 480px">
         <div class="titleLevel3 mb10">线上问题</div>
         <el-row :gutter="10">
           <el-col
@@ -41,7 +41,7 @@
       </div>
     </el-col>
     <el-col :span="8">
-      <div class="itemBox quality" style="height: 403px">
+      <div class="itemBox quality" style="height: 480px">
         <div class="titleLevel3 mb10">线下质量</div>
         <el-row :gutter="10">
           <el-col v-for="(item, index) in mainData.offlineProblemList" :key="index" :span="12" class="mb10">
@@ -72,7 +72,7 @@
       </div>
     </el-col>
     <el-col :span="8">
-      <div class="itemBox progress" style="min-height: 281px">
+      <div class="itemBox progress" style="min-height: 338px">
         <div class="titleLevel3 mb10">上线过程</div>
         <el-row v-if="mainData.onlineProcessList" :gutter="10">
           <el-col v-for="(item, index) in mainData.onlineProcessList.list" :key="index" :span="12" class="mb10">
@@ -80,7 +80,12 @@
           </el-col>
         </el-row>
         <el-divider class="divider" />
-        <el-row v-if="mainData.onlineProcessList" :gutter="10" class="rollBack">
+        <el-row
+          v-if="mainData.onlineProcessList"
+          :gutter="10"
+          class="rollBack"
+          style="margin-top: 40px"
+        >
           <el-col :span="12" class="mb10">
             <span class="rollBackItem">
               <span class="bigCircle" style="background: #7ED321" />
@@ -111,7 +116,7 @@
           </el-col>
         </el-row>
       </div>
-      <div class="itemBox progress" style="margin-top: 20px; height: 102px;">
+      <div class="itemBox progress" style="margin-top: 20px; height: 122px;">
         <div class="titleLevel3 mb10">移动端发布质量</div>
         <el-row :gutter="10">
           <el-col v-for="(item, index) in mainData.mobilePublishQualityList" :key="index" :span="12" class="mb10">
@@ -239,7 +244,7 @@ export default {
       // 线上问题图
       if (onlineProblemChart) {
         const { xaxis, yaxis } = onlineProblemChart
-        this.onlineProblemChartOption = getOption(xaxis, yaxis[0].data, 'bar', { endValue: 10 })
+        this.onlineProblemChartOption = getOption(xaxis, yaxis[0].data, 'bar', { endValue: 6 })
       }
       // 线下质量表
       if (offlineProblemList) {
@@ -248,7 +253,7 @@ export default {
       // 线下质量图
       if (offlineProblemChart) {
         const { xaxis, yaxis } = offlineProblemChart
-        this.offlineProblemChartOption = getOption(xaxis, yaxis[0].data, 'bar', { endValue: 10 })
+        this.offlineProblemChartOption = getOption(xaxis, yaxis[0].data, 'bar', { endValue: 6 })
       }
       // 上线过程
       if (onlineProcessList) {
@@ -454,7 +459,7 @@ export default {
     margin-bottom: 10px;
   }
   .chartViewHeight {
-    height: 170px;
+    height: 250px;
     // padding-left: 15px;
   }
 }

src/views/dataBigManage/components/throughputModule/index.vue

@@ -50,7 +50,7 @@
       <div class="itemBox">
         <div class="titleLevel3 mb25">需求方向分布图</div>
         <div class="chartViewHeight">
-          <normal-echart v-if="requirementDirectionChartOption" :chart-id="'chart3'" :option="requirementDirectionChartOption" @onClick="changeList" />
+          <normal-echart v-if="requirementBacklogRateChartOption" :chart-id="'chart3'" :option="requirementDirectionChartOption" @onClick="changeList" />
         </div>
       </div>
     </el-col>
@@ -70,7 +70,7 @@
             </el-select>
           </div>
         </div>
-        <div class="chartViewHeight" style="height: 178px">
+        <div class="chartViewHeight" style="height: 222px">
           <normal-echart v-if="requirementBacklogRateChartOption" :chart-id="'chart4'" :option="requirementBacklogRateChartOption" @onClick="changeList" />
         </div>
       </div>
@@ -90,11 +90,11 @@
               <el-option v-for="o in mainData.versionRequirementChart" :key="o.label" :label="o.label" :value="o.label" />
             </el-select>
           </div>
-          <div class="chartViewHeight" style="height: 178px">
+          <div class="chartViewHeight" style="height: 232px">
             <normal-echart v-if="versionRequirementChartOption[verTab]" :chart-id="'chart5'" :option="versionRequirementChartOption[verTab]" @onClick="changeList" />
           </div>
         </div>
-        <div v-else style="height: 210px; font-size: 50px; text-align: center; padding-top: 20%;">
+        <div v-else style="height: 264px; font-size: 50px; text-align: center; padding-top: 30%;">
           <svg-icon icon-class="empty" />
         </div>
       </div>
@@ -160,19 +160,19 @@ export default {
       }
       if (requirementDirectionChart) {
         const { xaxis, yaxis } = requirementDirectionChart
-        this.requirementDirectionChartOption = getOption(xaxis, yaxis[0].data, 'bar', { endValue: 10 })
+        this.requirementDirectionChartOption = getOption(xaxis, yaxis[0].data, 'bar', { endValue: 6 })
       }
       // 积压率
       if (requirementBacklogRateChart) {
         const { xaxis, yaxis } = requirementBacklogRateChart
-        this.requirementBacklogRateChartOption = getOption(xaxis, yaxis[0].data, 'line', { endValue: 10 })
+        this.requirementBacklogRateChartOption = getOption(xaxis, yaxis[0].data, 'line', { endValue: 6 })
       }
       if (versionRequirementChart) {
         this.mainData = { ...this.mainData, versionRequirementChart }
         this.verTab = versionRequirementChart[0] && versionRequirementChart[0].label
         const obj = {}
         versionRequirementChart.forEach(t => {
-          obj[t.label] = getOption(t.xaxis, t.yaxis[0].data, 'bar', { endValue: 10 })
+          obj[t.label] = getOption(t.xaxis, t.yaxis[0].data, 'bar', { endValue: 6 })
         })
         this.versionRequirementChartOption = obj
       }
@@ -208,7 +208,7 @@ export default {
     border-radius: 6px;
     &.whole {
       padding: 10px 0px;
-      height: 276px;
+      height: 330px;
       .tab {
         padding: 0 20px;
       }
@@ -239,7 +239,7 @@ export default {
     margin-bottom: 10px;
   }
   .chartViewHeight {
-    height: 210px;
+    height: 264px;
     width: 100%;
   }
 }