检测看板自适应调整

src/views/system/jbdHome/board/checkBoard.vue

@@ -81,7 +81,8 @@
                 bottomCardData: {
                     flag: false
                 },
-                timer: null
+                timer: null,
+                dataLength: 12
             }
         },
         // beforeRouteEnter(to, from, next){
@@ -97,6 +98,7 @@
                 this.allView()
             }
 
+            this.dataLength = window.innerWidth > 1600 ? 12 : 8
             const sql = 'select lei_xing_ming_che from t_lhjclx'
             curdPost('sql', sql).then(res => {
                 const { data = [] } = res.variables || {}
@@ -300,7 +302,7 @@
 		            // 对数据进行排序
                     result.sort((a, b) => b.value - a.value)
                     // 根据排序后数据重新生成图例
-                    const newRes = result.slice(0, 12).map(i => i.name)
+                    const newRes = result.slice(0, this.dataLength).map(i => i.name)
                     const completionRate = [
                         {
                             name: '及时',
@@ -328,7 +330,7 @@
                         // }
                     ]
                     this.middleCardData.config = this.getOptions(newRes)
-                    this.middleCardData.acceptData = result.slice(0, 12)
+                    this.middleCardData.acceptData = result.slice(0, this.dataLength)
                     this.middleCardData.completionRate = completionRate
                     this.middleCardData.flag = true
                 }).catch(error => {

src/views/system/jbdHome/board/component/middleCard.vue

@@ -104,11 +104,11 @@
         width: 100%;
         height: 100%;
         .item {
-            width: 28%;
+            width: 24%;
             height: 100%;
             background-color: rgba(6, 30, 93, 0.5);
             &:first-child, &:last-child {
-                width: 34%;
+                width: 36%;
             }
             .no_data {
                 font-size: 20px;

src/views/system/jbdHome/board/data.js

@@ -1,5 +1,7 @@
 import echarts from "echarts"
 
+const radius = window.innerWidth > 1600 ? '55%' : '45%'
+
 const rowLimit = (params, max) => {
     let result = ''
     //一行显示几个字
@@ -192,7 +194,7 @@ export const acceptOption = {
         {
             name: '任务完成情况',
             type: 'pie',
-            radius: '55%',
+            radius,
             center: ['35%', '50%'],
             data: [],
             itemStyle: {
@@ -205,7 +207,7 @@ export const acceptOption = {
                     label: {
                         show: true,
                         position: 'outer',
-                        formatter: `数量:{c} 占比：{d}%`,
+                        formatter: `{c}【{d}%】`,
                         // formatter: `{b}:{c}`,
                         fontSize: 14
                     },
@@ -368,10 +370,8 @@ export const taskOption = {
         {
             name: '任务完成情况',
             type: 'pie',
+            radius,
             // radius: ['40%', '70%'],
-            avoidLabelOverlap: true,
-            // startAngle: 180,
-            radius: '55%',
             // center: ['50%', '70%'],
             data: [],
             itemStyle: {
@@ -385,34 +385,14 @@ export const taskOption = {
                         show: true,
                         position: 'outer',
                         // formatter: `占比：{d}%\t{b}:{c}`,
-                        formatter: `数量:{c} 占比：{d}%`,
+                        formatter: `{c}【{d}%】`,
                         fontSize: 14
                     },
                     labelLine: {
                         show: true
                     }
                 }
-            },
-            // label: {
-            //     alignTo: 'edge',
-            //     minMargin: 5,
-            //     edgeDistance: 10,
-            //     lineHeight: 15
-            // },
-            // labelLine: {
-            //     length: -5,
-            //     length2: 0,
-            //     maxSurfaceAngle: 80
-            // },
-            // labelLayout (params) {
-            //     const isLeft = params.labelRect.x < myChart.getWidth() / 2
-            //     const points = params.labelLinePoints
-            //     // Update the end point.
-            //     points[2][0] = isLeft ? params.labelRect.x : params.labelRect.x + params.labelRect.width
-            //     return {
-            //         labelLinePoints: points
-            //     }
-            // }
+            }
         }
     ],
     color: ['#00a78e', '#d20962', '#f47721'],
@@ -830,7 +810,7 @@ export const yearOption = {
         {
             name: '任务完成情况',
             type: 'pie',
-            radius: '55%',
+            radius,
             center: ['50%', '50%'],
             data: [],
             itemStyle: {
@@ -844,7 +824,7 @@ export const yearOption = {
                         show: true,
                         position: 'outer',
                         // formatter: `占比：{d}%\t{b}:{c}`,
-                        formatter: `数量:{c} 占比：{d}%`,
+                        formatter: `{c}【{d}%】`,
                         fontSize: 14
                     },
                     labelLine: {