|
@@ -57,13 +57,13 @@ export default { |
|
@@ -57,13 +57,13 @@ export default { |
|
57
|
// this.chartInstance = this.$echarts.init(this.$refs.volume_ref, 'macarons')
|
57
|
// this.chartInstance = this.$echarts.init(this.$refs.volume_ref, 'macarons')
|
|
58
|
this.chartInstance = echarts.init(document.getElementById('volume_ref'))
|
58
|
this.chartInstance = echarts.init(document.getElementById('volume_ref'))
|
|
59
|
const initOption = {
|
59
|
const initOption = {
|
|
60
|
- legend: {
|
60
|
+ /*legend: {
|
|
61
|
top: '20%',
|
61
|
top: '20%',
|
|
62
|
- left: 'center',
|
|
|
|
63
|
textStyle: {
|
62
|
textStyle: {
|
|
64
|
color: '#ffffff'
|
63
|
color: '#ffffff'
|
|
65
|
}
|
64
|
}
|
|
66
|
- }
|
65
|
+
|
|
|
|
66
|
+ }*/
|
|
67
|
}
|
67
|
}
|
|
68
|
this.chartInstance.setOption(initOption)
|
68
|
this.chartInstance.setOption(initOption)
|
|
69
|
},
|
69
|
},
|
|
@@ -128,8 +128,8 @@ export default { |
|
@@ -128,8 +128,8 @@ export default { |
|
128
|
},
|
128
|
},
|
|
129
|
updateChart () {
|
129
|
updateChart () {
|
|
130
|
const centerArr = [
|
130
|
const centerArr = [
|
|
131
|
- ['22%', '65%'],
|
|
|
|
132
|
- ['66%', '65%']
|
131
|
+ ['22%', '43%'],
|
|
|
|
132
|
+ ['66%', '43%']
|
|
133
|
]
|
133
|
]
|
|
134
|
|
134
|
|
|
135
|
|
135
|
|
|
@@ -162,7 +162,7 @@ export default { |
|
@@ -162,7 +162,7 @@ export default { |
|
162
|
|
162
|
|
|
163
|
return {
|
163
|
return {
|
|
164
|
type: 'pie',
|
164
|
type: 'pie',
|
|
165
|
- radius: ['20%', '50%'],
|
165
|
+ radius: ['28%', '42%'],
|
|
166
|
center: centerArr[index],
|
166
|
center: centerArr[index],
|
|
167
|
color:colorData,
|
167
|
color:colorData,
|
|
168
|
// minAngle: 15,//最小角度
|
168
|
// minAngle: 15,//最小角度
|
|
@@ -171,20 +171,80 @@ export default { |
|
@@ -171,20 +171,80 @@ export default { |
|
171
|
borderRadius: 2,
|
171
|
borderRadius: 2,
|
|
172
|
borderWidth: 2
|
172
|
borderWidth: 2
|
|
173
|
},
|
173
|
},
|
|
|
|
174
|
+ top:0,
|
|
174
|
left:0,
|
175
|
left:0,
|
|
175
|
right:0,
|
176
|
right:0,
|
|
176
|
label: {
|
177
|
label: {
|
|
177
|
// position: 'outer',
|
178
|
// position: 'outer',
|
|
178
|
// alignTo: 'labelLine',
|
179
|
// alignTo: 'labelLine',
|
|
|
|
180
|
+ show:false,
|
|
179
|
formatter: '{c}个',
|
181
|
formatter: '{c}个',
|
|
180
|
// padding:[10,-20,5,10],
|
182
|
// padding:[10,-20,5,10],
|
|
181
|
- position: 'inside',
|
183
|
+ position: 'center',
|
|
182
|
color:'#ffffff'
|
184
|
color:'#ffffff'
|
|
183
|
},
|
185
|
},
|
|
|
|
186
|
+ labelLine: {
|
|
|
|
187
|
+ show: false
|
|
|
|
188
|
+ },
|
|
184
|
data: dataArr
|
189
|
data: dataArr
|
|
185
|
}
|
190
|
}
|
|
186
|
})
|
191
|
})
|
|
187
|
const dataOption = {
|
192
|
const dataOption = {
|
|
|
|
193
|
+ legend:[
|
|
|
|
194
|
+ {
|
|
|
|
195
|
+ left: '8%',
|
|
|
|
196
|
+ bottom:'5%',
|
|
|
|
197
|
+ itemHeight:12,
|
|
|
|
198
|
+ itemWidth:12,
|
|
|
|
199
|
+ itemGap:20,
|
|
|
|
200
|
+ icon:'circle',
|
|
|
|
201
|
+ orient: "vertical",
|
|
|
|
202
|
+ textStyle: {
|
|
|
|
203
|
+ color: '#ffffff',
|
|
|
|
204
|
+ fontSize:12,
|
|
|
|
205
|
+ },
|
|
|
|
206
|
+
|
|
|
|
207
|
+ formatter:function(name){
|
|
|
|
208
|
+ let data=dataOption.series[0].data;
|
|
|
|
209
|
+ let tarValue=0;
|
|
|
|
210
|
+ data.map((item,index)=>{
|
|
|
|
211
|
+ if(item.name==name){
|
|
|
|
212
|
+ tarValue=item.value
|
|
|
|
213
|
+ }
|
|
|
|
214
|
+ })
|
|
|
|
215
|
+ let valStr=tarValue.toString()
|
|
|
|
216
|
+ let reg = valStr.indexOf(".") > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g;
|
|
|
|
217
|
+ let valData=valStr.replace(reg,"$1,");
|
|
|
|
218
|
+ return name+' '+' '+valData+' 个';
|
|
|
|
219
|
+ }
|
|
|
|
220
|
+ },
|
|
|
|
221
|
+ {
|
|
|
|
222
|
+ left: '53%',
|
|
|
|
223
|
+ bottom:'5%',
|
|
|
|
224
|
+ itemHeight:12,
|
|
|
|
225
|
+ itemWidth:12,
|
|
|
|
226
|
+ itemGap:20,
|
|
|
|
227
|
+ icon:'circle',
|
|
|
|
228
|
+ orient: "vertical",
|
|
|
|
229
|
+ textStyle: {
|
|
|
|
230
|
+ color: '#ffffff',
|
|
|
|
231
|
+ fontSize:12,
|
|
|
|
232
|
+ },
|
|
|
|
233
|
+ formatter:function(name){
|
|
|
|
234
|
+ let data=dataOption.series[0].data;
|
|
|
|
235
|
+ let tarValue=0;
|
|
|
|
236
|
+ data.map((item,index)=>{
|
|
|
|
237
|
+ if(item.name==name){
|
|
|
|
238
|
+ tarValue=item.value
|
|
|
|
239
|
+ }
|
|
|
|
240
|
+ })
|
|
|
|
241
|
+ let valStr=tarValue.toString()
|
|
|
|
242
|
+ let reg = valStr.indexOf(".") > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g;
|
|
|
|
243
|
+ let valData=valStr.replace(reg,"$1,");
|
|
|
|
244
|
+ return name+' '+' '+valData+' 个';
|
|
|
|
245
|
+ }
|
|
|
|
246
|
+ }
|
|
|
|
247
|
+ ],
|
|
188
|
tooltip: {
|
248
|
tooltip: {
|
|
189
|
trigger: 'item',
|
249
|
trigger: 'item',
|
|
190
|
backgroundColor:'rgba(50,50,50,0.7)',
|
250
|
backgroundColor:'rgba(50,50,50,0.7)',
|
|
@@ -240,14 +300,14 @@ export default { |
|
@@ -240,14 +300,14 @@ export default { |
|
240
|
// }
|
300
|
// }
|
|
241
|
// }
|
301
|
// }
|
|
242
|
// },
|
302
|
// },
|
|
243
|
- legend: {
|
303
|
+ /*legend: {
|
|
244
|
itemWidth: this.titleFontSize * 1.5,
|
304
|
itemWidth: this.titleFontSize * 1.5,
|
|
245
|
itemHeight: this.titleFontSize / 4,
|
305
|
itemHeight: this.titleFontSize / 4,
|
|
246
|
itemGap: this.titleFontSize * 2.5,
|
306
|
itemGap: this.titleFontSize * 2.5,
|
|
247
|
textStyle: {
|
307
|
textStyle: {
|
|
248
|
fontSize: this.titleFontSize / 1.3
|
308
|
fontSize: this.titleFontSize / 1.3
|
|
249
|
}
|
309
|
}
|
|
250
|
- }
|
310
|
+ }*/
|
|
251
|
}
|
311
|
}
|
|
252
|
this.chartInstance.setOption(adapterOption)
|
312
|
this.chartInstance.setOption(adapterOption)
|
|
253
|
this.chartInstance.resize()
|
313
|
this.chartInstance.resize()
|
