|
@@ -38,8 +38,8 @@
|
38
|
38
|
:index="indexMethod"
|
39
|
39
|
>
|
40
|
40
|
</el-table-column>
|
41
|
|
- <el-table-column prop="uname" label="姓名" align="center">
|
42
|
|
- </el-table-column>
|
|
41
|
+ <!-- <el-table-column prop="uname" label="姓名" align="center">
|
|
42
|
+ </el-table-column> -->
|
43
|
43
|
<el-table-column
|
44
|
44
|
prop="usex"
|
45
|
45
|
label="性别"
|
|
@@ -270,76 +270,80 @@ export default {
|
270
|
270
|
xAxisdata: [],
|
271
|
271
|
seriesdata: [],
|
272
|
272
|
// chart 数据设置
|
273
|
|
- option : {
|
274
|
|
- title: {
|
275
|
|
- // text: "仓储、质检人员职业资格情况",
|
276
|
|
- textStyle: {
|
277
|
|
- color: "#7d7d7d",
|
278
|
|
- fontStyle: "normal",
|
279
|
|
- fontWeight: "900",
|
280
|
|
- fontSize: "14"
|
281
|
|
- },
|
282
|
|
- left: "center"
|
283
|
|
- },
|
284
|
|
- tooltip: {
|
285
|
|
- trigger: "axis",
|
286
|
|
- axisPointer: {
|
287
|
|
- // 坐标轴指示器,坐标轴触发有效
|
288
|
|
- type: "shadow" // 默认设置为直线,可选为 'line' | 'shadow'
|
289
|
|
- }
|
290
|
|
- },
|
291
|
|
- grid: {
|
292
|
|
- y2: 60
|
|
273
|
+ option: {
|
|
274
|
+ title: {
|
|
275
|
+ // text: "仓储、质检人员职业资格情况",
|
|
276
|
+ textStyle: {
|
|
277
|
+ color: "#7d7d7d",
|
|
278
|
+ fontStyle: "normal",
|
|
279
|
+ fontWeight: "900",
|
|
280
|
+ fontSize: "14"
|
293
|
281
|
},
|
294
|
|
- /* legend:{
|
|
282
|
+ left: "center"
|
|
283
|
+ },
|
|
284
|
+ tooltip: {
|
|
285
|
+ trigger: "axis",
|
|
286
|
+ axisPointer: {
|
|
287
|
+ // 坐标轴指示器,坐标轴触发有效
|
|
288
|
+ type: "shadow" // 默认设置为直线,可选为 'line' | 'shadow'
|
|
289
|
+ }
|
|
290
|
+ },
|
|
291
|
+ grid: {
|
|
292
|
+ y2: 60
|
|
293
|
+ },
|
|
294
|
+ /* legend:{
|
295
|
295
|
data:['初级','中级','高级','技师','高级技师']
|
296
|
296
|
}, */
|
297
|
|
- /* grid:{
|
|
297
|
+ /* grid:{
|
298
|
298
|
left:'3%',
|
299
|
299
|
right:'4%',
|
300
|
300
|
bottom:'3%',
|
301
|
301
|
containLabel:true
|
302
|
302
|
}, */
|
303
|
|
- xAxis: {
|
304
|
|
- type: "category",
|
305
|
|
- data: this.xAxisdata,
|
306
|
|
- // data: ["初级", "中级", "高级", "技师", "高级技师"],
|
307
|
|
- // data: this.xAxisdata,
|
308
|
|
- axisTick: {
|
309
|
|
- alignWithLabel: true
|
310
|
|
- },
|
311
|
|
- axisLabel: {
|
312
|
|
- rotate: 60
|
313
|
|
- }
|
314
|
|
- },
|
315
|
|
- yAxis: {
|
316
|
|
- type: "value",
|
317
|
|
- min: 3
|
|
303
|
+ xAxis: {
|
|
304
|
+ type: "category",
|
|
305
|
+ data: this.xAxisdata,
|
|
306
|
+ // data: ["初级", "中级", "高级", "技师", "高级技师"],
|
|
307
|
+ // data: this.xAxisdata,
|
|
308
|
+ max: "10",
|
|
309
|
+ min: ["初级", "中级", "高级", "技师", "高级技师"],
|
|
310
|
+ axisTick: {
|
|
311
|
+ alignWithLabel: true
|
318
|
312
|
},
|
319
|
|
- series: [
|
320
|
|
- {
|
321
|
|
- name: "人数",
|
322
|
|
- barWidth: "40%",
|
323
|
|
- data: this.seriesdata,
|
324
|
|
- // data: [1, 2, 1, 1, 1, 1, null, null],
|
325
|
|
- type: "bar",
|
326
|
|
- //修改第一组柱子的颜色
|
327
|
|
- itemStyle: {
|
328
|
|
- // barBorderRadius:20,
|
329
|
|
- color: function(p) {
|
330
|
|
- var color = [
|
331
|
|
- "#F1DE34",
|
332
|
|
- "#58CEFF",
|
333
|
|
- "#8CCF23",
|
334
|
|
- "#FEBB46",
|
335
|
|
- "#4FC5BB"
|
336
|
|
- ]
|
337
|
|
- return color[p.dataIndex]
|
338
|
|
- }
|
|
313
|
+ axisLabel: {
|
|
314
|
+ rotate: 60
|
|
315
|
+ }
|
|
316
|
+ },
|
|
317
|
+ yAxis: {
|
|
318
|
+ type: "value",
|
|
319
|
+
|
|
320
|
+ max: "10",
|
|
321
|
+ min: "2"
|
|
322
|
+ },
|
|
323
|
+ series: [
|
|
324
|
+ {
|
|
325
|
+ name: "人数",
|
|
326
|
+ barWidth: "40%",
|
|
327
|
+ data: this.seriesdata,
|
|
328
|
+ // data: [1, 2, 1, 1, 1, 1, null, null],
|
|
329
|
+ type: "bar",
|
|
330
|
+ //修改第一组柱子的颜色
|
|
331
|
+ itemStyle: {
|
|
332
|
+ // barBorderRadius:20,
|
|
333
|
+ color: function(p) {
|
|
334
|
+ var color = [
|
|
335
|
+ "#F1DE34",
|
|
336
|
+ "#58CEFF",
|
|
337
|
+ "#8CCF23",
|
|
338
|
+ "#FEBB46",
|
|
339
|
+ "#4FC5BB"
|
|
340
|
+ ]
|
|
341
|
+ return color[p.dataIndex]
|
339
|
342
|
}
|
340
|
343
|
}
|
341
|
|
- ]
|
342
|
|
- }
|
|
344
|
+ }
|
|
345
|
+ ]
|
|
346
|
+ }
|
343
|
347
|
}
|
344
|
348
|
},
|
345
|
349
|
|
|
@@ -432,34 +436,50 @@ export default {
|
432
|
436
|
pageIndex: this.listQuery.page,
|
433
|
437
|
pageSize: this.listQuery.limit
|
434
|
438
|
}
|
|
439
|
+ //设置图表数据
|
|
440
|
+ var myChart = echarts.init(document.querySelector("#chartProfession"))
|
|
441
|
+ myChart.showLoading()
|
435
|
442
|
getAllPersonInfo(data)
|
436
|
443
|
.then(res => {
|
437
|
|
- // console.log(res, "职业资格")
|
|
444
|
+ console.log(res, "职业资格")
|
438
|
445
|
// console.log(res.data, "1212111")
|
439
|
446
|
/* res.data.forEach(item => {
|
440
|
447
|
this.grainname.push(item.grainVarieties)
|
441
|
448
|
this.grainvalue.push(item.count)
|
442
|
449
|
console.log(item, "98765432")
|
443
|
450
|
}) */
|
444
|
|
- // console.log(res.data, "res.data---echarts....................")
|
|
451
|
+ console.log(
|
|
452
|
+ res.data.pageResult.total,
|
|
453
|
+ "res.data---echarts...................."
|
|
454
|
+ )
|
445
|
455
|
this.xAxisdata = res.data.xAxis
|
446
|
456
|
this.seriesdata = res.data.series
|
447
|
457
|
console.log(this.xAxisdata, "this.xAxisdata1111....")
|
448
|
458
|
console.log(this.seriesdata, "this.seriesdata222....")
|
449
|
|
- //设置图表数据
|
450
|
|
- var myChart = echarts.init(document.querySelector("#chartProfession"))
|
451
|
|
- myChart.setOption({
|
452
|
|
- xAxis: {
|
453
|
|
- data: res.data.xAxis
|
454
|
|
- },
|
455
|
|
- series: [
|
456
|
|
- {
|
457
|
|
- // 根据名字对应到相应的系列
|
458
|
|
- name: "人数",
|
459
|
|
- data: res.data.series
|
460
|
|
- }
|
461
|
|
- ]
|
462
|
|
- })
|
|
459
|
+
|
|
460
|
+ if (res.data.xAxis == undefined || res.data.series == undefined) {
|
|
461
|
+ myChart.showLoading({
|
|
462
|
+ text: "暂无数据",
|
|
463
|
+ color: "#ffffff",
|
|
464
|
+ textColor: "#8a8e91",
|
|
465
|
+ maskColor: "rgba(255, 255, 255, 0.8)"
|
|
466
|
+ })
|
|
467
|
+ } else {
|
|
468
|
+ myChart.hideLoading()
|
|
469
|
+ myChart.setOption({
|
|
470
|
+ xAxis: {
|
|
471
|
+ data: res.data.xAxis
|
|
472
|
+ },
|
|
473
|
+ series: [
|
|
474
|
+ {
|
|
475
|
+ // 根据名字对应到相应的系列
|
|
476
|
+ name: "人数",
|
|
477
|
+ data: res.data.series
|
|
478
|
+ }
|
|
479
|
+ ]
|
|
480
|
+ })
|
|
481
|
+ }
|
|
482
|
+
|
463
|
483
|
if (res.code == 200) {
|
464
|
484
|
this.tableData = res.data.pageResult.records
|
465
|
485
|
this.loading = false
|
|
@@ -536,7 +556,81 @@ export default {
|
536
|
556
|
} else {
|
537
|
557
|
|
538
|
558
|
} */
|
539
|
|
- myChart.setOption(this.option)
|
|
559
|
+ myChart.setOption({
|
|
560
|
+ /* noDataLoadingOption: {
|
|
561
|
+ text: "暂无数据",
|
|
562
|
+ effect: "bubble",
|
|
563
|
+ effectOption: {
|
|
564
|
+ effect: {
|
|
565
|
+ n: 0
|
|
566
|
+ }
|
|
567
|
+ }
|
|
568
|
+ }, */
|
|
569
|
+ title: {
|
|
570
|
+ text: "仓储、质检人员职业资格情况",
|
|
571
|
+ show: false,
|
|
572
|
+ textStyle: {
|
|
573
|
+ color: "#7d7d7d",
|
|
574
|
+ fontStyle: "normal",
|
|
575
|
+ fontWeight: "900",
|
|
576
|
+ fontSize: "14"
|
|
577
|
+ },
|
|
578
|
+ left: "center"
|
|
579
|
+ },
|
|
580
|
+ tooltip: {
|
|
581
|
+ trigger: "axis",
|
|
582
|
+ axisPointer: {
|
|
583
|
+ // 坐标轴指示器,坐标轴触发有效
|
|
584
|
+ type: "shadow" // 默认设置为直线,可选为 'line' | 'shadow'
|
|
585
|
+ }
|
|
586
|
+ },
|
|
587
|
+ grid: {
|
|
588
|
+ y2: 60
|
|
589
|
+ },
|
|
590
|
+ xAxis: {
|
|
591
|
+ type: "category",
|
|
592
|
+ data: this.xAxisdata,
|
|
593
|
+ // data: ["初级", "中级", "高级", "技师", "高级技师"],
|
|
594
|
+ // data: this.xAxisdata,
|
|
595
|
+ max: "10",
|
|
596
|
+ min: ["初级", "中级", "高级", "技师", "高级技师"],
|
|
597
|
+ axisTick: {
|
|
598
|
+ alignWithLabel: true
|
|
599
|
+ },
|
|
600
|
+ axisLabel: {
|
|
601
|
+ rotate: 60
|
|
602
|
+ }
|
|
603
|
+ },
|
|
604
|
+ yAxis: {
|
|
605
|
+ type: "value",
|
|
606
|
+
|
|
607
|
+ max: "10",
|
|
608
|
+ min: "2"
|
|
609
|
+ },
|
|
610
|
+ series: [
|
|
611
|
+ {
|
|
612
|
+ name: "人数",
|
|
613
|
+ barWidth: "40%",
|
|
614
|
+ data: this.seriesdata,
|
|
615
|
+ // data: [1, 2, 1, 1, 1, 1, null, null],
|
|
616
|
+ type: "bar",
|
|
617
|
+ //修改第一组柱子的颜色
|
|
618
|
+ itemStyle: {
|
|
619
|
+ // barBorderRadius:20,
|
|
620
|
+ color: function(p) {
|
|
621
|
+ var color = [
|
|
622
|
+ "#F1DE34",
|
|
623
|
+ "#58CEFF",
|
|
624
|
+ "#8CCF23",
|
|
625
|
+ "#FEBB46",
|
|
626
|
+ "#4FC5BB"
|
|
627
|
+ ]
|
|
628
|
+ return color[p.dataIndex]
|
|
629
|
+ }
|
|
630
|
+ }
|
|
631
|
+ }
|
|
632
|
+ ]
|
|
633
|
+ })
|
540
|
634
|
},
|
541
|
635
|
// 筛选科室
|
542
|
636
|
handleClick(tab, event) {
|