Browse Source

refactor(blockingData): 调整图表样式和数据处理逻辑

统一调整多个模块的图表最小高度
修改饼图半径和标签显示格式
更新数据处理逻辑使用count字段替代percentage
优化图表图例和标签样式
huoyi 1 month ago
parent
commit
524cb7944c

+ 1 - 1
src/views/blockingData/blockingDataScreen/components/ModuleBrigadeOne.vue

@@ -381,7 +381,7 @@ onMounted(() => {
381
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
381
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
382
   display: flex;
382
   display: flex;
383
   flex-direction: column;
383
   flex-direction: column;
384
-  min-height: 280px;
384
+  min-height: 300px;
385
 }
385
 }
386
 
386
 
387
 .chart-title {
387
 .chart-title {

+ 1 - 1
src/views/blockingData/blockingDataScreen/components/ModuleBrigadeThree.vue

@@ -151,7 +151,7 @@ onMounted(() => {
151
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
151
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
152
   display: flex;
152
   display: flex;
153
   flex-direction: column;
153
   flex-direction: column;
154
-  min-height: 280px;
154
+  min-height: 300px;
155
 }
155
 }
156
 
156
 
157
 .chart-title {
157
 .chart-title {

+ 9 - 13
src/views/blockingData/blockingDataScreen/components/ModuleBrigadeTwo.vue

@@ -201,7 +201,7 @@ const fetchData = async () => {
201
     if (genderRes.value?.data) {
201
     if (genderRes.value?.data) {
202
       const genderData = genderRes.value.data.map(item => ({
202
       const genderData = genderRes.value.data.map(item => ({
203
         name: item.gender || item.name || '',
203
         name: item.gender || item.name || '',
204
-        value: item.percentage || item.value || 0
204
+        value: item.count || item.value || 0
205
       }))
205
       }))
206
       setOption4(pieChartOption(genderData, ['#ec4899', '#3b82f6']))
206
       setOption4(pieChartOption(genderData, ['#ec4899', '#3b82f6']))
207
     }
207
     }
@@ -209,7 +209,7 @@ const fetchData = async () => {
209
     if (certDetailRes.value?.data) {
209
     if (certDetailRes.value?.data) {
210
       const certData = certDetailRes.value.data.map(item => ({
210
       const certData = certDetailRes.value.data.map(item => ({
211
         name: item.certificateLevel || item.name || '',
211
         name: item.certificateLevel || item.name || '',
212
-        value: item.percentage || item.value || 0
212
+        value: item.count || item.value || 0
213
       }))
213
       }))
214
       setOption5(pieChartOption(certData, ['#22c55e', '#3b82f6']))
214
       setOption5(pieChartOption(certData, ['#22c55e', '#3b82f6']))
215
     }
215
     }
@@ -217,7 +217,7 @@ const fetchData = async () => {
217
     if (certBaseRes.value?.data) {
217
     if (certBaseRes.value?.data) {
218
       const baseData = certBaseRes.value.data.map(item => ({
218
       const baseData = certBaseRes.value.data.map(item => ({
219
         name: item.certificateLevel || item.name || '',
219
         name: item.certificateLevel || item.name || '',
220
-        value: item.percentage || item.value || 0
220
+        value: item.count || item.value || 0
221
       }))
221
       }))
222
       setOption6(pieChartOption(baseData, ['#22c55e', '#3b82f6']))
222
       setOption6(pieChartOption(baseData, ['#22c55e', '#3b82f6']))
223
     }
223
     }
@@ -226,7 +226,7 @@ const fetchData = async () => {
226
       const colors = ['#8b5cf6', '#ec4899', '#f97316', '#22c55e', '#3b82f6', '#14b8a6', '#ef4444', '#fbbf24', '#6366f1', '#06b6d4', '#84cc16', '#e11d48']
226
       const colors = ['#8b5cf6', '#ec4899', '#f97316', '#22c55e', '#3b82f6', '#14b8a6', '#ef4444', '#fbbf24', '#6366f1', '#06b6d4', '#84cc16', '#e11d48']
227
       const locationData = locationRes.value.data.map(item => ({
227
       const locationData = locationRes.value.data.map(item => ({
228
         name: item.itemLocation || item.name || '',
228
         name: item.itemLocation || item.name || '',
229
-        value: item.percentage || item.value || 0
229
+        value: item.count || item.value || 0
230
       }))
230
       }))
231
       setOption7(donutChartOption(locationData, colors))
231
       setOption7(donutChartOption(locationData, colors))
232
     }
232
     }
@@ -249,7 +249,7 @@ const fetchData = async () => {
249
       const colors = ['#3b82f6', '#22c55e', '#f97316', '#ec4899', '#8b5cf6', '#14b8a6', '#ef4444', '#fbbf24', '#6366f1', '#06b6d4', '#84cc16', '#e11d48', '#a855f7', '#f59e0b']
249
       const colors = ['#3b82f6', '#22c55e', '#f97316', '#ec4899', '#8b5cf6', '#14b8a6', '#ef4444', '#fbbf24', '#6366f1', '#06b6d4', '#84cc16', '#e11d48', '#a855f7', '#f59e0b']
250
       const supervisorData = supervisorDistRes.value.data.map(item => ({
250
       const supervisorData = supervisorDistRes.value.data.map(item => ({
251
         name: item.supervisorName || item.name || '',
251
         name: item.supervisorName || item.name || '',
252
-        value: item.percentage || item.value || 0
252
+        value: item.totalCount || item.value || 0
253
       }))
253
       }))
254
       setOption10(donutChartOption(supervisorData, colors))
254
       setOption10(donutChartOption(supervisorData, colors))
255
     }
255
     }
@@ -329,18 +329,14 @@ const pieChartOption = (data, colors) => ({
329
   },
329
   },
330
   series: [{
330
   series: [{
331
     type: 'pie',
331
     type: 'pie',
332
-    radius: ['40%', '65%'],
332
+    radius: ['35%', '45%'],
333
     center: ['50%', '55%'],
333
     center: ['50%', '55%'],
334
     data: data,
334
     data: data,
335
     label: {
335
     label: {
336
       show: true,
336
       show: true,
337
-      formatter: (params) => {
338
-        const total = data.reduce((sum, item) => sum + item.value, 0)
339
-        const percentage = ((params.value / total) * 100).toFixed(2)
340
-        return `${params.name}\n${params.value}(${percentage}%)`
341
-      },
337
+      formatter: '{b}\n{c} ({d}%)',
342
       fontSize: 10
338
       fontSize: 10
343
-    }
339
+    },
344
   }]
340
   }]
345
 })
341
 })
346
 
342
 
@@ -436,7 +432,7 @@ onMounted(() => {
436
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
432
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
437
   display: flex;
433
   display: flex;
438
   flex-direction: column;
434
   flex-direction: column;
439
-  min-height: 280px;
435
+  min-height: 320px;
440
 }
436
 }
441
 
437
 
442
 .chart-title {
438
 .chart-title {

+ 4 - 3
src/views/blockingData/blockingDataScreen/components/ModuleOne.vue

@@ -303,13 +303,14 @@ const loadData = async () => {
303
       },
303
       },
304
       series: [{
304
       series: [{
305
         type: 'bar',
305
         type: 'bar',
306
-        data: brigadeRateData.map(d => d.avgBlockedRate),
306
+        data: brigadeRateData.map(d => Number(d.avgBlockedRate.toFixed(2))),
307
         itemStyle: { color: '#3b82f6' },
307
         itemStyle: { color: '#3b82f6' },
308
         barWidth: 8,
308
         barWidth: 8,
309
         label: {
309
         label: {
310
           show: true,
310
           show: true,
311
           position: 'right',
311
           position: 'right',
312
-          fontSize: 10
312
+          fontSize: 10,
313
+          formatter: '{c}'
313
         }
314
         }
314
       }]
315
       }]
315
     }
316
     }
@@ -1408,7 +1409,7 @@ onMounted(() => {
1408
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
1409
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
1409
   display: flex;
1410
   display: flex;
1410
   flex-direction: column;
1411
   flex-direction: column;
1411
-  min-height: 280px;
1412
+  min-height: 300px;
1412
 }
1413
 }
1413
 
1414
 
1414
 .chart-row.full-width .chart-item {
1415
 .chart-row.full-width .chart-item {

+ 27 - 22
src/views/blockingData/blockingDataScreen/components/ModuleTwo.vue

@@ -127,7 +127,7 @@ const loadData = async () => {
127
       teamLeaderRanking(queryParams),
127
       teamLeaderRanking(queryParams),
128
       reviewedUserRanking(queryParams)
128
       reviewedUserRanking(queryParams)
129
     ])
129
     ])
130
-    
130
+
131
     // 更新排行榜数据
131
     // 更新排行榜数据
132
     if (supervisorRankRes?.value?.data) {
132
     if (supervisorRankRes?.value?.data) {
133
       rankData1.splice(0, rankData1.length, ...supervisorRankRes.value.data.map((item, index) => ({
133
       rankData1.splice(0, rankData1.length, ...supervisorRankRes.value.data.map((item, index) => ({
@@ -172,7 +172,7 @@ const loadData = async () => {
172
 
172
 
173
     setOption2(pieOption(
173
     setOption2(pieOption(
174
       missCheckReasonRes?.value?.data?.map(item => ({
174
       missCheckReasonRes?.value?.data?.map(item => ({
175
-        name: item.name || item.reason || '未知',
175
+        name: item.missCheckReasonCategory || item.reason || '未知',
176
         value: item.value || item.count || 0
176
         value: item.value || item.count || 0
177
       })) || [],
177
       })) || [],
178
       ['#ef4444', '#f97316', '#eab308', '#22c55e', '#3b82f6', '#64748b'],
178
       ['#ef4444', '#f97316', '#eab308', '#22c55e', '#3b82f6', '#64748b'],
@@ -186,7 +186,6 @@ const loadData = async () => {
186
       })) || [],
186
       })) || [],
187
       ['#3b82f6', '#60a5fa', '#93c5fd', '#bfdbfe', '#dbeafe', '#eff6ff']
187
       ['#3b82f6', '#60a5fa', '#93c5fd', '#bfdbfe', '#dbeafe', '#eff6ff']
188
     ))
188
     ))
189
-
190
     setOption4(pieOption(
189
     setOption4(pieOption(
191
       genderRes?.value?.data?.map(item => ({
190
       genderRes?.value?.data?.map(item => ({
192
         name: item.gender || '未知',
191
         name: item.gender || '未知',
@@ -214,7 +213,7 @@ const loadData = async () => {
214
         { name: '4年', key: 'cnt4Years' },
213
         { name: '4年', key: 'cnt4Years' },
215
         { name: '5年', key: 'cntGe5Year' }
214
         { name: '5年', key: 'cntGe5Year' }
216
       ]
215
       ]
217
-      
216
+
218
       const seriesData = tenureLevels.map(level => ({
217
       const seriesData = tenureLevels.map(level => ({
219
         name: level.name,
218
         name: level.name,
220
         type: 'bar',
219
         type: 'bar',
@@ -231,9 +230,9 @@ const loadData = async () => {
231
 
230
 
232
       setOption6({
231
       setOption6({
233
         grid: { left: '15%', top: '10%', right: '5%', bottom: '15%', containLabel: true },
232
         grid: { left: '15%', top: '10%', right: '5%', bottom: '15%', containLabel: true },
234
-        xAxis: { 
235
-          type: 'category', 
236
-          data: categories, 
233
+        xAxis: {
234
+          type: 'category',
235
+          data: categories,
237
           axisLabel: { fontSize: 9 },
236
           axisLabel: { fontSize: 9 },
238
           axisTick: {
237
           axisTick: {
239
             alignWithLabel: true
238
             alignWithLabel: true
@@ -250,7 +249,7 @@ const loadData = async () => {
250
     if (certificateData.length > 0) {
249
     if (certificateData.length > 0) {
251
       const certificateCategories = ['高级证书', '中级证书', '初级证书']
250
       const certificateCategories = ['高级证书', '中级证书', '初级证书']
252
       const brigadeNames = [...new Set(certificateData.map(item => item.brigadeName))]
251
       const brigadeNames = [...new Set(certificateData.map(item => item.brigadeName))]
253
-      
252
+
254
       const certificateSeriesData = brigadeNames.map((brigadeName, index) => {
253
       const certificateSeriesData = brigadeNames.map((brigadeName, index) => {
255
         const brigadeData = certificateData.find(d => d.brigadeName === brigadeName)
254
         const brigadeData = certificateData.find(d => d.brigadeName === brigadeName)
256
         return {
255
         return {
@@ -271,22 +270,22 @@ const loadData = async () => {
271
 
270
 
272
       setOption7({
271
       setOption7({
273
         grid: { left: '15%', top: '10%', right: '5%', bottom: '15%', containLabel: true },
272
         grid: { left: '15%', top: '10%', right: '5%', bottom: '15%', containLabel: true },
274
-        xAxis: { 
275
-          type: 'category', 
276
-          data: certificateCategories, 
273
+        xAxis: {
274
+          type: 'category',
275
+          data: certificateCategories,
277
           axisLabel: { fontSize: 10 },
276
           axisLabel: { fontSize: 10 },
278
           axisLine: { lineStyle: { color: '#999' } }
277
           axisLine: { lineStyle: { color: '#999' } }
279
         },
278
         },
280
-        yAxis: { 
281
-          type: 'value', 
279
+        yAxis: {
280
+          type: 'value',
282
           axisLabel: { fontSize: 10 },
281
           axisLabel: { fontSize: 10 },
283
           axisLine: { lineStyle: { color: '#999' } },
282
           axisLine: { lineStyle: { color: '#999' } },
284
           splitLine: { lineStyle: { color: '#eee' } }
283
           splitLine: { lineStyle: { color: '#eee' } }
285
         },
284
         },
286
-        legend: { 
287
-          top: 0, 
288
-          right: 10, 
289
-          textStyle: { fontSize: 10 } 
285
+        legend: {
286
+          top: 0,
287
+          right: 10,
288
+          textStyle: { fontSize: 10 }
290
         },
289
         },
291
         series: certificateSeriesData
290
         series: certificateSeriesData
292
       })
291
       })
@@ -303,19 +302,24 @@ watch(() => props.filterParams, () => {
303
 }, { deep: true })
302
 }, { deep: true })
304
 
303
 
305
 const rankData1 = reactive([
304
 const rankData1 = reactive([
306
-  
305
+
307
 ])
306
 ])
308
 
307
 
309
 const rankData2 = reactive([
308
 const rankData2 = reactive([
310
-  
309
+
311
 ])
310
 ])
312
 
311
 
313
 const rankData3 = reactive([
312
 const rankData3 = reactive([
314
- 
313
+
315
 ])
314
 ])
316
 
315
 
317
 const pieOption = (data, colors, isRing = false) => ({
316
 const pieOption = (data, colors, isRing = false) => ({
318
   color: colors,
317
   color: colors,
318
+  legend: {
319
+    orient: 'horizontal',
320
+    top: 'top',
321
+    textStyle: { fontSize: 10 }
322
+  },
319
   series: [{
323
   series: [{
320
     type: 'pie',
324
     type: 'pie',
321
     radius: isRing ? ['50%', '70%'] : '60%',
325
     radius: isRing ? ['50%', '70%'] : '60%',
@@ -325,7 +329,8 @@ const pieOption = (data, colors, isRing = false) => ({
325
       show: true,
329
       show: true,
326
       formatter: '{b}\n{c} ({d}%)',
330
       formatter: '{b}\n{c} ({d}%)',
327
       fontSize: 10
331
       fontSize: 10
328
-    }
332
+    },
333
+
329
   }]
334
   }]
330
 })
335
 })
331
 
336
 
@@ -390,7 +395,7 @@ onMounted(() => {
390
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
395
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
391
   display: flex;
396
   display: flex;
392
   flex-direction: column;
397
   flex-direction: column;
393
-  min-height: 280px;
398
+  min-height: 300px;
394
 }
399
 }
395
 
400
 
396
 .chart-title {
401
 .chart-title {