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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
| <template>
| <!--
| 作者：luoyiming
| 时间：2019-10-24
| 描述：统计-会员统计-成交会员占比
| -->
| <div class="pie-container d-b-s d-c">
| <div class="ww100 d-b-c lh30">
| <span class="f16">成交会员占比</span>
| <el-select size="mini" v-model="selectDay" @change="changeFunc" placeholder="请选择">
| <el-option v-for="item in days" :key="item.value" :label="item.label" :value="item.value"></el-option>
| </el-select>
| </div>
| <div class="ww100">
| <div class="Echarts"><div id="PieBox" class="ww100"></div></div>
| </div>
| <div></div>
| </div>
| </template>
|
| <script>
| import StatisticsApi from '@/api/statistics.js';
| export default {
| data() {
| return {
| /*是否正在加载*/
| loading: true,
| /*天数*/
| days: [
| {
| label: '今天',
| value: 1
| },
| {
| label: '最近7天',
| value: 7
| },
| {
| label: '最近30天',
| value: 30
| },
| {
| label: '最近90天',
| value: 90
| },
| {
| label: '最近180天',
| value: 180
| },
| {
| label: '最近1年',
| value: 365
| },
| {
| label: '最近2年',
| value: 730
| },
| {
| label: '所有占比',
| value: 0
| }
| ],
| /*选择的天数*/
| selectDay: 7,
| /*数据对象*/
| payScale: {},
| /*图表对象*/
| myChart: null,
| /*图表配置*/
| option: {
| title: {
| text: '',
| subtext: '',
| left: 'center'
| },
| tooltip: {
| trigger: 'item',
| formatter: '{a} <br/>{b} : {c} ({d}%)'
| }
| }
| };
| },
| mounted() {
| this.myEcharts();
| },
| methods: {
| /*选择天数*/
| changeFunc() {
| this.getData();
| },
|
| /*创建图表对象*/
| myEcharts() {
| // 基于准备好的dom，初始化echarts实例
| this.myChart = this.$echarts.init(document.getElementById('PieBox'));
| this.getData();
| },
|
| /*格式数据*/
| createOption() {
| if (!this.loading) {
|
| this.option.color=["#e2e7f2", "#409EFF"];
|
| this.option.legend = {
| orient: 'vertical',
| left: 'left',
| data: [
| {
| name: '成交会员',
| color:"#666"
|
| },
| {
| name: '未成交会员',
| color:"#666"
| }
| ]
| };
| this.option.series = [
| {
| name: '成交会员占比',
| type: 'pie',
| radius: '55%',
| center: ['50%', '60%'],
| data: [{ value: this.payScale.no_pay, name: '未成交会员' }, { value: this.payScale.pay, name: '成交会员'}],
| emphasis: {
| itemStyle: {
| shadowBlur: 10,
| shadowOffsetX: 0,
| shadowColor: 'rgba(0, 0, 0, 0.5)'
| }
| }
| }
| ];
|
| this.myChart.setOption(this.option);
| this.myChart.resize();
| }
| },
|
| /*获取数据*/
| getData() {
| let self = this;
| StatisticsApi.getUserScale(
| {
| day: self.selectDay
| },
| true
| )
| .then(res => {
| self.payScale = res.data.payScale;
| self.loading = false;
| self.createOption();
| })
| .catch(error => {});
| }
| }
| };
| </script>
|
| <style scoped="scoped">
| .pie-container {
| padding: 10px 20px;
| width: 30%;
| box-sizing: border-box;
| }
| .Echarts > div {
| height: 400px;
| }
| </style>
|
|
