liveLogChart.vue
1.5 KB
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
<template>
<live-line-chart :chart-data="chartData"
:chart-settings="chartSettings"
/>
</template>
<script>
import LiveLineChart from '@/components/_Common/Chart/liveLineChart';
import dayjs from 'dayjs';
export default {
components: {
LiveLineChart,
},
props: {
chartData: {
type: Array,
default: null,
},
},
data() {
return {
chartSettings: {
chart: {
height: 400,
},
title: {
text: '시간별 드론 기체 수',
style: {
fontSize: '20px',
},
},
width: '100%',
xAxis: {
type: 'datetime',
},
yAxis: {
title: {
text: null,
},
min: 0,
},
tooltip: {
formatter() {
const trList = this.points.map((elem) => `
<tr>
<td style="font-size: 16px; padding:0; color:${elem.color}">${elem.series.name}</td>
<td style="font-size: 16px; padding:0; color:${elem.color}">: <b>${elem.y}</b></td>
</tr>
`);
return `
<span style="font-size:12px; color:${this.color}">${dayjs(this.x).format('YYYY-MM-DD HH:mm:ss')}</span>
<table>
${trList}
</table>
`;
},
},
data: {
enablePolling: true,
dataRefreshRate: 2,
},
},
};
},
};
</script>
<style scoped lang="scss">
</style>