1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
| <script lang="ts" setup>
| import type { MesHomeApi } from '#/api/mes/home';
| import type { EchartsUIType } from '@vben/plugins/echarts';
|
| import { onMounted, ref, watch } from 'vue';
|
| import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
|
| import { getProductionTrend } from '#/api/mes/home';
|
| defineOptions({ name: 'DashboardProductionTrend' });
|
| const chartRef = ref<EchartsUIType>();
| const { renderEcharts } = useEcharts(chartRef);
|
| async function loadTrend() {
| const data = await getProductionTrend(7);
| const dates = data.map((d: MesHomeApi.ProductionTrend) => d.date.slice(5));
| const quantities = data.map((d: MesHomeApi.ProductionTrend) => d.quantity);
| const qualified = data.map((d: MesHomeApi.ProductionTrend) => d.qualifiedQuantity);
| const unqualified = data.map((d: MesHomeApi.ProductionTrend) => d.unqualifiedQuantity);
|
| renderEcharts({
| grid: { bottom: 30, containLabel: true, left: 10, right: 30, top: 30 },
| legend: { bottom: 0, data: ['产量', '合格品', '不良品'], textStyle: { fontSize: 12 } },
| tooltip: { trigger: 'axis' },
| xAxis: {
| axisTick: { show: false },
| boundaryGap: false,
| data: dates,
| type: 'category',
| },
| yAxis: {
| axisTick: { show: false },
| splitNumber: 4,
| type: 'value',
| },
| series: [
| {
| barMaxWidth: 32,
| data: quantities,
| itemStyle: {
| borderRadius: 4,
| color: '#2563eb',
| },
| name: '产量',
| type: 'bar',
| },
| {
| data: qualified,
| itemStyle: { color: '#16a34a' },
| name: '合格品',
| smooth: true,
| symbol: 'circle',
| symbolSize: 6,
| type: 'line',
| },
| {
| data: unqualified,
| itemStyle: { color: '#dc2626' },
| name: '不良品',
| smooth: true,
| symbol: 'diamond',
| symbolSize: 6,
| type: 'line',
| },
| ],
| });
| }
|
| onMounted(() => {
| loadTrend();
| });
| </script>
|
| <template>
| <EchartsUI ref="chartRef" class="!h-[320px]" />
| </template>
|
|
