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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
| <template>
| <div class="timelineChart" :style="{height: height + 30}">
| <h4 v-if="title">{{title}}</h4>
| <ve-line
| :data="chartData"
| :data-zoom="dataZoom">
| </ve-line>
| </div>
|
| </template>
|
| <style lang="less">
| .timelineChart {
| background: #fff;
| }
| </style>
|
| <script lang="ts">
| import { Component, Prop, Vue } from 'vue-property-decorator';
|
| const sourceData = [
| /*
| { x: 'Jan', y1: 7.0, y2: 3.9 },
| { x: 'Feb', y1: 6.9, y2: 4.2 },
| { x: 'Mar', y1: 9.5, y2: 5.7 },
| { x: 'Apr', y1: 14.5, y2: 8.5 },
| { x: 'May', y1: 18.4, y2: 11.9 },
| { x: 'Jun', y1: 21.5, y2: 15.2 },
| { x: 'Jul', y1: 25.2, y2: 17.0 },
| { x: 'Aug', y1: 26.5, y2: 16.6 },
| { x: 'Sep', y1: 23.3, y2: 14.2 },
| { x: 'Oct', y1: 18.3, y2: 10.3 },
| { x: 'Nov', y1: 13.9, y2: 6.6 },
| { x: 'Dec', y1: 9.6, y2: 4.8 },
| */
| { x: 1536920320634, y1: 57, y2: 71 },
| { x: 1536922120634, y1: 106, y2: 17 },
| { x: 1536923920634, y1: 69, y2: 27 },
| { x: 1536925720634, y1: 28, y2: 87 },
| { x: 1536927520634, y1: 93, y2: 104 },
| { x: 1536929320634, y1: 35, y2: 13 },
| { x: 1536931120634, y1: 101, y2: 33 },
| { x: 1536932920634, y1: 39, y2: 90 },
| { x: 1536934720634, y1: 35, y2: 11 },
| { x: 1536936520634, y1: 53, y2: 98 },
| { x: 1536938320634, y1: 12, y2: 53 },
| { x: 1536940120634, y1: 77, y2: 15 },
| { x: 1536941920634, y1: 49, y2: 82 },
| { x: 1536943720634, y1: 101, y2: 41 },
| { x: 1536945520634, y1: 27, y2: 58 },
| { x: 1536947320634, y1: 27, y2: 106 },
| { x: 1536949120634, y1: 103, y2: 19 },
| { x: 1536950920634, y1: 23, y2: 95 },
| { x: 1536952720634, y1: 97, y2: 28 },
| { x: 1536954520634, y1: 36, y2: 102 },
| ];
|
|
| const scale = [
| {
| dataKey: 'x',
| min: 0,
| max: 1,
| },
| ];
|
| @Component({})
| export default class TimelineChart extends Vue {
| @Prop({ type: String, default: null })
| private title!: string;
|
| @Prop({
| type: Array,
| default() {
| return [];
| },
| })
| private columns!: any[];
|
| @Prop({
| type: Array,
| default() {
| return [];
| },
| })
| private data!: any[];
|
| @Prop({
| type: Number,
| default: 0,
| })
| private start!: number;
|
| @Prop({
| type: Number,
| default: 100,
| })
| private end!: number;
|
| get dataZoom(): any[] {
| return [{
| type: 'slider',
| start: this.start,
| end: this.end,
| },
| ];
| }
|
| get chartData(): any {
| return {
| columns: this.columns, // ['日期', '成本', '利润'],
| rows: this.data,
| };
| }
|
| private height = 400;
| private borderWidth = 2;
|
| private mounted() {
| }
|
|
| }
| </script>
|
|
