|
|
@@ -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
|
}
|