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
| <template>
| <div class="chart-wrapper" ref="placePie"></div>
| </template>
|
| <script>
| import resize from '@/mixins/resize';
| const echarts = require('echarts');
| export default {
| name: 'placePie',
| props: {
| chartData: {
| type: Object
| }
| },
| mixins: [resize],
| data() {
| return {};
| },
| mounted() {
| this.initEchart();
| },
| methods: {
| initEchart() {
| let _this = this;
| const colorList = ['#8477e9', '#ffc637', '#fc7293', '#2599f0', '#31c3ea', '#17d8b9', '#e8bdf3'];
| this.myChart = echarts.init(this.$refs.placePie);
| this.myChart.setOption(
| {
| color: colorList,
| title: {
| text: '库位类型：' + this.chartData.titel,
| top: '0%',
| left: '10%',
| textAlign: 'left',
| textStyle: {
| fontSize: 14,
| fontWeight: '400'
| }
| },
| tooltip: {
| trigger: 'item',
| formatter: '{a} <br/>{b} : {c}<br/>',
| // + '占比：' + '{d}' + '%'
|
| position: function (pos, params, dom, rect, size) {
| var obj = { bottom: '10%' };
| obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;
| return obj;
| }
| },
|
| legend: {
| show: this.chartData.list.length > 0,
| bottom: '10%', //延Y轴居中
| right: '0',
| type: 'scroll',
| align: 'right',
| orient: 'vertival',
| itemHeight: 11,
| itemWidth: 11,
| pageTextStyle: {
| color: '#556677'
| },
| pageIconColor: '#556677',
|
| color: '#556677',
| fontSize: 14,
| data: this.chartData.list.map(item => item.name)
| },
| series: [
| {
| name: this.chartData.titel,
| type: 'pie',
| radius: ['65%', '80%'],
| center: ['50%', '50%'],
| data: this.chartData.list,
| // roseType: 'radius', //area
| label: {
| show: true,
| position: 'center',
|
| fontSize: 14,
| color: '#556677',
|
| formatter: function (params) {
| let sum = _this.chartData.list[0].value + _this.chartData.list[1].value;
| let val_1 = _this.chartData.list[0].value / sum;
| val_1 = JSON.stringify(val_1) != 'null' ? JSON.stringify(val_1 * 100).slice(0, 5) : 0;
| let val_2 = _this.chartData.list[1].value / sum;
| val_2 = JSON.stringify(val_2) != 'null' ? JSON.stringify(val_2 * 100).slice(0, 5) : 0;
| return (
| _this.chartData.list[0].name +
| ':' +
| _this.chartData.list[0].value +
| // val_1 +
| // '%' +
| '\n\n' +
| _this.chartData.list[1].name +
| ':' +
| _this.chartData.list[1].value +
| // val_2 +
| // '%' +
| '\n\n使用率:' +
| _this.chartData.placeRate
| );
| }
| },
| labelLine: {
| show: false,
| length: 10,
| length2: 5,
| smooth: false
| }
| }
| ]
| },
| true
| );
| }
| },
| watch: {
| chartData: {
| handler() {
| this.initEchart();
| },
| deep: true
| }
| }
| };
| </script>
|
|
