进度统计图 优化

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

@@ -22,7 +22,10 @@
 
                 <el-row>
                     <el-col :span="6">
-                        <div ref="chart1" class="chart" />
+                        <div :style="{ height: height + 'px'}">
+                            <div ref="chart1" class="chart" />
+                        </div>
+
                     </el-col>
                     <el-col :span="18">
                         <div id="chart2" ref="chart2" class="chart2" :style="{ height: height + 'px'}" />
@@ -65,6 +68,7 @@ export default {
                     leftTotal: 0, // 左图数量
                     title: '' // 左图标题，默认"完成率"
                 },
+                rightCustomShow: false, // 右图自定义
                 rightData: {
                     title: '人数', // 右图标题
                     xAxisName: '', // 右图x轴标题
@@ -72,7 +76,20 @@ export default {
                     yAxisData: ['金源信通'], // 右图y轴项
                     series: [{
                         name: '总数', // 右图x轴项
-                        data: [''] // 右图x轴数量
+                        data: [''], // 右图x轴数量
+                        label: {
+                            show: true,
+                            position: 'right',
+                            textStyle: { // 数值样式
+                                color: 'black',
+                                fontSize: 12
+                            },
+                            formatter: (params) => {
+                                // 这个回调函数不起作用了
+                                return params.value === '0' ? '' : params.value
+                            }
+
+                        }
                     }],
                     color: ['rgb(55, 162, 218)', 'rgb(103, 224, 227)', 'rgb(253, 102, 109)'], // 颜色
                     tooltip: { // 右图弹出框
@@ -100,7 +117,7 @@ export default {
 
         setTimeout(() => {
             this.getOption(this.generalData.leftData)
-            this.barDataPlan(this.generalData.rightData)
+            this.barDataPlan(this.generalData.rightData, this.generalData.rightCustomShow)
         }, 100)
     },
     methods: {
@@ -113,6 +130,7 @@ export default {
 
 <style  scoped>
 .stopCenter{
+    max-height: 800px;
     margin: 20px 30px 20px 30px;
 }
 

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

@@ -18,6 +18,9 @@ export default {
             tooltip: {
                 show: true,
                 trigger: 'axis'
+                // axisPointer: {
+                //     type: 'none'
+                // }
             }
         }
     },
@@ -72,11 +75,11 @@ export default {
                             offsetCenter: [0, '65%']
                         },
                         title: {
-                            offsetCenter: [0, '100%'],
+                            offsetCenter: [0, '-120%'],
                             fontWeight: 'bold',
                             fontSize: 20
                         },
-                        data: [{ value: leftData.leftTotal <= 100 ? leftData.leftTotal : 100, name: leftData.title || '完成率', top: '100%' }]
+                        data: [{ value: leftData.leftTotal <= 100 ? leftData.leftTotal : 100, name: leftData.title || '', top: '100%' }]
                     }
                 ]
             }
@@ -84,58 +87,64 @@ export default {
             accept.setOption(JSON.parse(JSON.stringify(option)))
             // this.show1 = true
         },
-        barDataPlan (data) {
-            data.series.forEach(item => {
-                item.label = this.barLable
-                item.type = 'bar'
-                item.barGap = 0
-                item.emphasis = {
-                    focus: 'series'
-                }
-            })
-            const barDataTy = {
-                // 图例设置
-                legend: {
-                    textStyle: {
-                        fontSize: 12,
-                        color: '#333'
+        barDataPlan (data, rightShow) {
+            let barDataTy = null
+            if (!rightShow) {
+                data.series.forEach(item => {
+                    item.label = item.label || this.barLable
+                    item.type = 'bar'
+                    item.barGap = 0
+                    item.emphasis = {
+                        focus: 'series'
                     }
-                },
-                title: {
-                    show: true,
-                    text: data.title,
-                    textStyle: {
-                        // color: '#fff',
-                        fontSize: 20,
-                        fontWeight: '600'
+                })
+                barDataTy = {
+                    // 图例设置
+                    legend: {
+                        textStyle: {
+                            fontSize: 12,
+                            color: '#333'
+                        }
                     },
-                    textAlign: 'center',
-                    left: '50%',
-                    top: '20px'
-                },
-                xAxis: {
-                    type: 'value',
-                    name: data.xAxisName || '数量（个）',
-                    minInterval: 1,
-                    axisTick: {
-                        alignWithLabel: true
-                    }
-                },
-                yAxis: {
-                    type: 'category',
-                    name: data.yAxisName || '部门',
-                    nameTextStyle: {
-                        fontSize: 14
+                    title: {
+                        show: true,
+                        text: data.title,
+                        textStyle: {
+                            // color: '#fff',
+                            fontSize: 20,
+                            fontWeight: '600'
+                        },
+                        textAlign: 'center',
+                        left: '50%',
+                        top: '20px'
+                    },
+                    xAxis: {
+                        type: 'value',
+                        name: data.xAxisName || '数量（个）',
+                        minInterval: 1,
+                        axisTick: {
+                            alignWithLabel: true
+                        }
                     },
-                    splitLine: {
-                        show: false
+                    yAxis: {
+                        type: 'category',
+                        name: data.yAxisName || '部门',
+                        nameTextStyle: {
+                            fontSize: 14
+                        },
+                        splitLine: {
+                            show: false
+                        },
+                        data: data.yAxisData
                     },
-                    data: data.yAxisData
-                },
-                series: data.series,
-                color: data.color,
-                tooltip: data.tooltip || this.tooltip
+                    series: data.series,
+                    color: data.color,
+                    tooltip: data.tooltip || this.tooltip
+                }
+            } else {
+                barDataTy = data
             }
+
             const accept = echarts.init(this.$refs.chart2)
             accept.setOption(JSON.parse(JSON.stringify(barDataTy)))
         }