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
| <template>
| <div>
| <div id="chart1" class="chart1"></div>
| </div>
| </template>
| <script>
| export default {
| props: {
| detail: {
| type: Object,
| default: (_) => {
| return {};
| },
| },
| },
| mounted() {
| this.chart();
| },
| methods: {
| chart() {
| var chartDom = document.getElementById("chart1");
| var myChart = echarts.init(chartDom);
| var option;
| option = {
| title: {
| text: "",
| subtext: "",
| left: "center",
| },
| tooltip: {
| trigger: "item",
| },
| legend: {
| orient: "vertical",
| left: "right",
| top: "middle",
| formatter:val=>{
| let text = '';
| switch(val){
| case '体育类':{
| text = `${val}：${this.detail.tyNum}人 占比${this.detail.tyNumPercent||0}%`;
| break
| }
| case '美术类':{
| text = `${val}：${this.detail.msNum}人 占比${this.detail.msNumPercent||0}%`;
| break
| }
| case '音乐类':{
| text = `${val}：${this.detail.yyNum}人 占比${this.detail.yyNumPercent||0}%`;
| break
| }
| case '舞蹈类':{
| text = `${val}：${this.detail.wdNum}人 占比${this.detail.wdNumPercent||0}%`;
| break
| }
| case '其他':{
| text = `${val}：${this.detail.qtNum}人 占比${this.detail.qtNumPercent||0}%`;
| break
| }
| case '无类型':{
| text = `${val}：${this.detail.wuNum}人 占比${this.detail.wuNumPercent||0}%`;
| break
| }
| }
| return text
| }
| },
| series: [
| {
| name: "党员特长",
| type: "pie",
| radius: "50%",
| center: ["25%", "50%"],
| data: [
| { value: this.detail.tyNum || 0, name: "体育类" },
| { value: this.detail.msNum || 0, name: "美术类" },
| { value: this.detail.yyNum || 0, name: "音乐类" },
| { value: this.detail.wdNum || 0, name: "舞蹈类" },
| { value: this.detail.qtNum || 0, name: "其他" },
| { value: this.detail.wuNum || 0, name: "无类型" },
| ],
| label: {
| show: false,
| },
| emphasis: {
| itemStyle: {
| shadowBlur: 10,
| shadowOffsetX: 0,
| shadowColor: "rgba(0, 0, 0, 0.5)",
| },
| },
| },
| ],
| };
| option && myChart.setOption(option);
| },
| },
| watch: {},
| computed: {},
| };
| </script>
| <style scoped>
| </style>
|
|
