计划进度图优化

src/views/system/jbdScan/planImplementation/planImplementation.vue

@@ -20,12 +20,12 @@
                     />
                 </div>
 
-                <el-row :gutter="20">
+                <el-row>
                     <el-col :span="6">
                         <div ref="chart1" class="chart" />
                     </el-col>
                     <el-col :span="18">
-                        <div id="chart2" ref="chart2" class="chart2" :style="{ height: height + 'px'}"/>
+                        <div id="chart2" ref="chart2" class="chart2" :style="{ height: height + 'px'}" />
                     </el-col>
                 </el-row>
             </div>
@@ -54,24 +54,31 @@ export default {
             generalShow: this.show,
             id: '',
             generalData: {
-                title: '',
-                titleCentr: false,
-                alertShow: false,
+                title: '', // 弹出框标题
+                titleCentr: false, // 弹出框标题是否区中
+                alertShow: false, // 提示是否显示
                 alert: {
-                    title: '',
-                    description: ''
+                    title: '', // 提示标题
+                    description: '' // 提示内容
+                },
+                leftData: {
+                    leftTotal: 0, // 左图数量
+                    title: '' // 左图标题，默认"完成率"
                 },
-                leftTotal: 0,
                 rightData: {
-                    title: '人数',
-                    xAxisName: '',
-                    yAxisName: '',
-                    yAxisData: ['金源信通'],
+                    title: '人数', // 右图标题
+                    xAxisName: '', // 右图x轴标题
+                    yAxisName: '', // 右图y轴标题
+                    yAxisData: ['金源信通'], // 右图y轴项
                     series: [{
-                        name: '总数',
-                        data: ['']
+                        name: '总数', // 右图x轴项
+                        data: [''] // 右图x轴数量
                     }],
-                    color: ['rgb(55, 162, 218)', 'rgb(103, 224, 227)', 'rgb(253, 102, 109)']
+                    color: ['rgb(55, 162, 218)', 'rgb(103, 224, 227)', 'rgb(253, 102, 109)'], // 颜色
+                    tooltip: { // 右图弹出框
+                        show: true,
+                        trigger: 'axis'
+                    }
                 }
             },
             height: 300
@@ -88,11 +95,11 @@ export default {
     },
     created () {
         this.generalData = this.generalList[0]
-        const height = this.generalData.rightData.yAxisData.length * 80
+        const height = this.generalData.rightData.yAxisData.length * 100
         this.height = height > 300 ? height : 300
 
         setTimeout(() => {
-            this.getOption(this.generalData.leftTotal)
+            this.getOption(this.generalData.leftData)
             this.barDataPlan(this.generalData.rightData)
         }, 100)
     },
@@ -106,11 +113,11 @@ export default {
 
 <style  scoped>
 .stopCenter{
-    margin: 0 30px 20px 30px;
+    margin: 20px 30px 20px 30px;
 }
 
 .tableTop{
-    margin: 10px 0;
+    margin: 0 0 10px 0;
 }
 
 .chart{

src/views/system/jbdScan/planImplementation/planImplementationJS.js

@@ -22,7 +22,7 @@ export default {
         }
     },
     methods: {
-        getOption (totalMs = 0) {
+        getOption (leftData) {
             const option = {
                 series: [
                     {
@@ -69,9 +69,14 @@ export default {
                             formatter: '{value} %',
                             color: 'auto',
                             top: '100%',
-                            offsetCenter: [0, '75%']
+                            offsetCenter: [0, '65%']
                         },
-                        data: [{ value: totalMs <= 100 ? totalMs : 100, top: '100%' }]
+                        title: {
+                            offsetCenter: [0, '100%'],
+                            fontWeight: 'bold',
+                            fontSize: 20
+                        },
+                        data: [{ value: leftData.leftTotal && leftData.leftTotal <= 100 ? leftData.leftTotal : 100, name: leftData.title || '完成率', top: '100%' }]
                     }
                 ]
             }
@@ -111,6 +116,7 @@ export default {
                 xAxis: {
                     type: 'value',
                     name: data.xAxisName || '数量（个）',
+                    minInterval: 1,
                     axisTick: {
                         alignWithLabel: true
                     }
@@ -118,7 +124,6 @@ export default {
                 yAxis: {
                     type: 'category',
                     name: data.yAxisName || '部门',
-                    minInterval: 1,
                     nameTextStyle: {
                         fontSize: 14
                     },