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
79
80
81
82
|
<template>
<div>
<highcharts :options="chartOptions.line" />
</div>
</template>
<script>
import { setTime, Series, setCategories } from './helpers';
import { Chart } from 'highcharts-vue';
export default {
components: {
highcharts: Chart,
},
props: {
timeScale: {
type: String,
default: 'hour',
},
},
computed: {
chartOptions() {
return {
line: {
chart: {
type: 'areaspline',
margin: [12, 50, 32, 60],
height: '320px',
},
title: null,
xAxis: {
categories: setTime(6, this.timeScale),
title: null,
labels: {
step: 1,
},
minorGridLineColor: '#1A3E5B1A',
},
yAxis: {
categories: setCategories(2.5, 'A'),
min: 0,
max: 4,
title: null,
tickInterval: 1,
minorGridLineColor: '#1A3E5B1A',
},
series: Series['power'].map((item) => ({
...item,
marker: {
enabled: false,
},
})),
legend: {
enabled: false,
},
tooltip: {
enabled: false,
crosshairs: false,
},
plotOptions: {
series: {
showInLegend: true,
},
areaspline: {
fillOpacity: 0,
},
},
},
};
},
},
};
</script>
<style lang="scss">
.highcharts-credits {
display: none;
}
.highcharts-plot-line-label {
transform: translate(-15px, 0) !important;
}
</style>
|