Przeglądaj źródła

fix(portrait): 修复每日查获面积图表动态数据适配问题

1. 新增nextTick调用初始化每日查获面积图表
2. 重构图表数据逻辑,改为动态读取接口返回的分组和日期数据
3. 替换硬编码的图例、X轴数据和模拟series为动态生成内容
4. 新增图表实例初始化判断逻辑,避免重复初始化
huoyi@samsundot.com 3 tygodni temu
rodzic
commit
aac64837dd

+ 41 - 47
src/views/portraitManagement/stationProfile/component/runData.vue

@@ -197,6 +197,7 @@ const invokerCountSeizureSingleQuantity = (params) => {
197 197
   countSeizureSingleQuantity(params).then(res => {
198 198
     if (res.code === 200 && res.data) {
199 199
       countSeizureSingleQuantityData.value = res.data || []
200
+      nextTick(() => initDailySeizedArea())
200 201
     }
201 202
   })
202 203
 }
@@ -419,7 +420,43 @@ const initHourlyPassChart = () => {
419 420
 
420 421
 const initDailySeizedArea = () => {
421 422
   if (!dailySeizedAreaRef.value) return
422
-  dailySeizedArea = echarts.init(dailySeizedAreaRef.value)
423
+  if (!dailySeizedArea) {
424
+    dailySeizedArea = echarts.init(dailySeizedAreaRef.value)
425
+  }
426
+  const rawData = countSeizureSingleQuantityData.value
427
+  if (!rawData || rawData.length === 0) return
428
+  const groupMap = {}
429
+  rawData.forEach(item => {
430
+    if (!groupMap[item.groupName]) {
431
+      groupMap[item.groupName] = []
432
+    }
433
+    groupMap[item.groupName].push(item.seizeQuantity)
434
+  })
435
+  const groupNames = Object.keys(groupMap)
436
+  const dates = [...new Set(rawData.map(item => item.recordDate))]
437
+  const countryColors = ['#4da6ff', '#7eff7e', '#bd03fb', '#ffd93d', '#ff6b6b', '#00f5ff', '#ffa500', '#71B138']
438
+  const series = groupNames.map((name, idx) => {
439
+    const color = countryColors[idx % countryColors.length]
440
+    return {
441
+      name,
442
+      type: 'line',
443
+      smooth: true,
444
+      data: groupMap[name],
445
+      itemStyle: { color },
446
+      lineStyle: { color },
447
+      areaStyle: {
448
+        color: {
449
+          type: 'linear',
450
+          x: 0, y: 0, x2: 0, y2: 1,
451
+          colorStops: [
452
+            { offset: 0, color },
453
+            { offset: 1, color: color + '00' }
454
+          ],
455
+          global: false
456
+        }
457
+      }
458
+    }
459
+  })
423 460
   const option = {
424 461
     tooltip: {
425 462
       trigger: 'axis',
@@ -428,7 +465,7 @@ const initDailySeizedArea = () => {
428 465
       textStyle: { color: '#fff' }
429 466
     },
430 467
     legend: {
431
-      data: ['旅检一部', '旅检二部', '旅检三部'],
468
+      data: groupNames,
432 469
       textStyle: { color: '#a0c4ff' },
433 470
       top: 0
434 471
     },
@@ -440,7 +477,7 @@ const initDailySeizedArea = () => {
440 477
     },
441 478
     xAxis: {
442 479
       type: 'category',
443
-      data: ['1号', '2号', '3号', '4号', '5号', '6号', '7号', '8号', '9号', '10号', '11号', '12号', '13号', '14号', '15号', '16号', '17号', '18号', '19号'],
480
+      data: dates,
444 481
       axisLabel: { color: '#a0c4ff', fontSize: 9 },
445 482
       axisLine: { lineStyle: { color: 'rgba(15,70,250,0.3)' } }
446 483
     },
@@ -450,50 +487,7 @@ const initDailySeizedArea = () => {
450 487
       axisLine: { lineStyle: { color: 'rgba(15,70,250,0.3)' } },
451 488
       splitLine: { lineStyle: { color: 'rgba(15,70,250,0.2)' } }
452 489
     },
453
-    series: [
454
-      {
455
-        name: '旅检一部',
456
-        type: 'line',
457
-        stack: 'total',
458
-        smooth: true,
459
-        data: [50, 55, 48, 60, 56, 65, 52, 47, 54, 62, 58, 68, 60, 65, 55, 53, 62, 58, 63],
460
-        itemStyle: { color: '#4da6ff' },
461
-        areaStyle: {
462
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
463
-            { offset: 0, color: 'rgba(77,166,255,0.3)' },
464
-            { offset: 1, color: 'rgba(77,166,255,0.05)' }
465
-          ])
466
-        }
467
-      },
468
-      {
469
-        name: '旅检二部',
470
-        type: 'line',
471
-        stack: 'total',
472
-        smooth: true,
473
-        data: [55, 60, 52, 65, 62, 70, 58, 50, 60, 68, 65, 75, 68, 72, 60, 58, 68, 65, 70],
474
-        itemStyle: { color: '#7eff7e' },
475
-        areaStyle: {
476
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
477
-            { offset: 0, color: 'rgba(126,255,126,0.3)' },
478
-            { offset: 1, color: 'rgba(126,255,126,0.05)' }
479
-          ])
480
-        }
481
-      },
482
-      {
483
-        name: '旅检三部',
484
-        type: 'line',
485
-        stack: 'total',
486
-        smooth: true,
487
-        data: [45, 45, 45, 55, 52, 55, 45, 43, 51, 55, 52, 57, 52, 58, 55, 49, 55, 52, 57],
488
-        itemStyle: { color: '#bd03fb' },
489
-        areaStyle: {
490
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
491
-            { offset: 0, color: 'rgba(189,3,251,0.3)' },
492
-            { offset: 1, color: 'rgba(189,3,251,0.05)' }
493
-          ])
494
-        }
495
-      }
496
-    ]
490
+    series
497 491
   }
498 492
   dailySeizedArea.setOption(option)
499 493
 }