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
| <template>
| <div :style="{ padding: '0' }">
| <h4 :style="{ marginBottom: '20px' }">{{ title }}</h4>
|
| <v-chart ref="chart" :forceFit="true" :height="height" :data="dataSource" :scale="scale">
| <v-tooltip :shared="false"/>
| <v-axis/>
| <v-line position="x*y" :size="lineSize" :color="lineColor"/>
| <v-area position="x*y" :color="color"/>
| </v-chart>
|
| </div>
| </template>
|
| <script>
| import { triggerWindowResizeEvent } from '@/utils/util'
|
| export default {
| name: 'AreaChartTy',
| props: {
| // 图表数据
| dataSource: {
| type: Array,
| required: true
| },
| // 图表标题
| title: {
| type: String,
| default: ''
| },
| // x 轴别名
| x: {
| type: String,
| default: 'x'
| },
| // y 轴别名
| y: {
| type: String,
| default: 'y'
| },
| // Y轴最小值
| min: {
| type: Number,
| default: 0
| },
| // Y轴最大值
| max: {
| type: Number,
| default: null
| },
| // 图表高度
| height: {
| type: Number,
| default: 254
| },
| // 线的粗细
| lineSize: {
| type: Number,
| default: 2
| },
| // 面积的颜色
| color: {
| type: String,
| default: ''
| },
| // 线的颜色
| lineColor: {
| type: String,
| default: ''
| }
| },
| computed: {
| scale() {
| return [
| { dataKey: 'x', title: this.x, alias: this.x },
| { dataKey: 'y', title: this.y, alias: this.y, min: this.min, max: this.max }
| ]
| }
| },
| mounted() {
| triggerWindowResizeEvent()
| }
| }
| </script>
|
| <style lang="less" scoped>
| @import "chart";
| </style>
|
|
