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
| <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 '@tievd/cube-block/lib/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>
| .antv-chart-mini {
| position: relative;
| width: 100%;
|
| .chart-wrapper {
| position: absolute;
| bottom: -28px;
| width: 100%;
|
| /* margin: 0 -5px;
| overflow: hidden;*/
| }
| }
| </style>
|
|
