j计划进度图 优化

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

@@ -21,13 +21,13 @@
                 </div>
 
                 <el-row>
-                    <el-col :span="6">
+                    <el-col :span="5">
                         <div :style="{ height: height + 'px'}">
                             <div ref="chart1" class="chart" />
                         </div>
 
                     </el-col>
-                    <el-col :span="18">
+                    <el-col :span="19">
                         <div id="chart2" ref="chart2" class="chart2" :style="{ height: height + 'px'}" />
                     </el-col>
                 </el-row>
@@ -70,6 +70,7 @@ export default {
                 },
                 rightCustomShow: false, // 右图自定义
                 rightData: {
+                    direction: 'x',
                     title: '人数', // 右图标题
                     xAxisName: '', // 右图x轴标题
                     yAxisName: '', // 右图y轴标题
@@ -113,11 +114,11 @@ export default {
     created () {
         this.generalData = this.generalList[0]
         const height = this.generalData.rightData.yAxisData.length * 100
-        this.height = height > 300 ? height : 300
+        this.height = this.generalData.rightData.direction === 'x' ? 400 : height > 300 ? height : 300
 
         setTimeout(() => {
             this.getOption(this.generalData.leftData)
-            this.barDataPlan(this.generalData.rightData, this.generalData.rightCustomShow)
+            this.barDataPlan(this.generalData.rightData, this.generalData.rightCustomShow, this.generalData.rightData.direction)
         }, 100)
     },
     methods: {

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

@@ -87,7 +87,7 @@ export default {
             accept.setOption(JSON.parse(JSON.stringify(option)))
             // this.show1 = true
         },
-        barDataPlan (data, rightShow) {
+        barDataPlan (data, rightShow, direction) {
             let barDataTy = null
             if (!rightShow) {
                 data.series.forEach(item => {
@@ -98,6 +98,25 @@ export default {
                         focus: 'series'
                     }
                 })
+                const xAxis = {
+                    type: 'value',
+                    name: data.xAxisName || '数量（个）',
+                    minInterval: 1,
+                    axisTick: {
+                        alignWithLabel: true
+                    }
+                }
+                const yAxis = {
+                    type: 'category',
+                    name: data.yAxisName || '部门',
+                    nameTextStyle: {
+                        fontSize: 14
+                    },
+                    splitLine: {
+                        show: false
+                    },
+                    data: data.yAxisData
+                }
                 barDataTy = {
                     // 图例设置
                     legend: {
@@ -118,25 +137,8 @@ export default {
                         left: '50%',
                         top: '20px'
                     },
-                    xAxis: {
-                        type: 'value',
-                        name: data.xAxisName || '数量（个）',
-                        minInterval: 1,
-                        axisTick: {
-                            alignWithLabel: true
-                        }
-                    },
-                    yAxis: {
-                        type: 'category',
-                        name: data.yAxisName || '部门',
-                        nameTextStyle: {
-                            fontSize: 14
-                        },
-                        splitLine: {
-                            show: false
-                        },
-                        data: data.yAxisData
-                    },
+                    xAxis: direction === 'x' ? yAxis : xAxis,
+                    yAxis: direction === 'x' ? xAxis : yAxis,
                     series: data.series,
                     color: data.color,
                     tooltip: data.tooltip || this.tooltip