chart-choice-mixin-toggle-axis.vue
1.82 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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!--
* @Description:
* @Date: 2021-06-11 01:21:29
-->
<template>
<div class="bi-chart-choice-mixin-toggle-axis">
<BiBlank height="25" :usePrint="true"></BiBlank>
<div class="bi-chart-choice-mixin-toggle-axis_sub_title">
{{ dealAxis.join('与') }}
</div>
<div class="bi-chart-choice-mixin-toggle-axis_text">
<div>
<span>X轴：</span>
<span>{{ dealAxis[0] }}</span>
</div>
<div style="margin-top:10px;">
<span>Y轴：</span>
<span>{{ dealAxis[1] }}</span>
</div>
</div>
<el-button icon="el-icon-sort" v-if="!isPrint" @click="toggle">
切换
</el-button>
</div>
</template>
<script>
import mixin from '../mixin/index';
import { Button } from 'element-ui';
import BiBlank from './blank.vue';
export default {
name: 'bi-chart-choice-mixin-toggle-axis',
mixins: [mixin],
components: {
[Button.name]: Button,
BiBlank
},
props: {
axis: {
type: Array,
default: () => []
}
},
computed: {
dealAxis() {
return this.axis.map(item => item.name);
}
},
methods: {
toggle() {
this.$emit('toggle-axis');
}
}
};
</script>
<style lang="scss" scoped>
.bi-chart-choice-mixin-toggle-axis {
&_sub_title {
width: 1138px;
min-height: 80px;
border: 1px solid #ededed;
border-radius: 4px;
padding: 30px;
font-size: 14px;
line-height: 1.2;
color: #6f7a91;
margin-bottom: 25px;
}
&_text {
max-width: 1026px;
min-height: 40px;
line-height: 1.3;
border: 1px solid #efefef;
border-radius: 4px;
display: inline-block;
vertical-align: top;
padding: 10px 25px;
margin-right: 16px;
span {
font-size: 14px;
color: #6f7a91;
&:nth-child(2n + 1) {
font-weight: 500;
color: #2a3558;
}
}
}
}
</style>