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
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
| <template>
| <!-- 饼状 圆环 echarts -->
| <div :id="id" style="height: 100%; width: 100%"></div>
| </template>
|
| <script>
| //echarts 饼状图组件2
| export default {
| props: {
| "id": {
| type: String,
| default: "pieLoopChart"
| },
| "color": {
| type: String,
| default: ""
| },
| "pieData": {
| type: Object,
| default: {}
| }
| },
| data() {
| return {
| pieLoopChart: undefined,
| colors: [ '#A4C400','#0050EF','#AA00FF','#FA6800','#A20025',
| '#825A2C','#647687','#6A00FF','#E51400','#60A917',
| '#6D8764','#00ABA9','#F472D0','#008A00','#F0A30A',
| '#FFFF00','#7CFC00','#32CD32','#00FF7F','#48D1CC',
| '#00FFFF','#00BFFF','#8A2BE2','#EE82EE','#FFC0CB'
| ],
| legendData: [],
| seriesData: [
| { value: 7283, value1: 1, name: '公共租赁房' },
| { value: 6283, value1: 1, name: '经济适用房' },
| { value: 5820, value1: 1, name: '廉租房' },
| { value: 2671, value1: 1, name: '定向安置房' },
| { value: 7283, value1: 1, name: '两限商品房' },
| { value: 271, value1: 1, name: '安居商品房' }
| ,
| { value: 7283, value1: 1, name: '公共租赁房2' },
| { value: 6283, value1: 1, name: '经济适用房2' },
| { value: 5820, value1: 1, name: '廉租房2' },
| { value: 2671, value1: 1, name: '定向安置房2' },
| { value: 7283, value1: 1, name: '两限商品房2' },
| { value: 271, value1: 1, name: '安居商品房2' }
| ,
| { value: 7283, value1: 1, name: '公共租赁房3' },
| { value: 6283, value1: 1, name: '经济适用房3' },
| { value: 5820, value1: 1, name: '廉租房3' },
| { value: 2671, value1: 1, name: '定向安置房3' },
| { value: 7283, value1: 1, name: '两限商品房3' },
| { value: 271, value1: 1, name: '安居商品房3' }
| ,
| { value: 7283, value1: 1, name: '公共租赁房5' },
| { value: 6283, value1: 1, name: '经济适用房5' },
| { value: 5820, value1: 1, name: '廉租房5' },
| { value: 2671, value1: 1, name: '定向安置房5' },
| { value: 7283, value1: 1, name: '两限商品房5' },
| { value: 271, value1: 1, name: '安居商品房5' }
| ]
| }
| },
| methods: {
| initChart() {
| var echarts = require("echarts");
| // 基于准备好的dom，初始化echarts实例
| this.pieLoopChart = echarts.init(document.getElementById(this.id));
|
| // 绘制图表
| if (this.pieData.seriesData && this.pieData.seriesData.length > 0) {
| var tmpData = [];
| for (var j = 0, m = this.pieData.seriesData.length; j < m; j++) {
| if (this.pieData.seriesData[j].value && this.pieData.seriesData[j].name) {
| tmpData.push(this.pieData.seriesData[j]);
| }
| }
| if (tmpData.length > 0) {
| this.seriesData = tmpData;
| }
| }
|
| // 填充legendData 数据
| for (var i = 0, n = this.seriesData.length; i < n; i++) {
| this.legendData.push(this.seriesData[i].name);
| // this.seriesData[i].value = this.seriesData[i].value1;
| }
|
| const seriesData = this.seriesData;
|
| this.pieLoopChart.setOption({
| color: this.colors,
| title: [
| {
| text: this.pieData.total,
| subtext: '重点防护目标',
| textStyle: {
| fontSize: 16,
| fontFamily: 'DIN Alternate',
| fontWeight: 'bold',
| color: '#7ED6FF'
| },
| subtextStyle: {
| fontSize: 12,
| fontFamily: 'Alimama ShuHeiTi',
| fontWeight: 'bold',
| color: '#F8FCFF',
| opacity: 0.6
| },
| textAlign: 'center',
| x: '62.5%',
| y: '35%'
| }
| ],
| tooltip: {
| trigger: 'item',
| formatter: "{a} <br/>{b} : {c} ({d}%)"
| },
| grid: {
| top: '30%',
| left: 10
| },
| legend: [
| {
| top: 15,
| left: '0',
| selectedMode: false, // 是否允许点击
| icon: `path://M881.387 297.813c38.08 65.387 57.28 136.747 57.28 214.187s-19.094 148.8-57.28 214.187c-38.187 65.28-89.92 117.12-155.2 155.2S589.44 938.667 512 938.667s-148.8-19.094-214.187-57.28c-65.28-38.08-117.013-89.814-155.306-155.307C104.427 660.8 85.333 589.44 85.333 512c0-77.333 19.094-148.693 57.28-214.187 38.08-65.28 89.814-117.013 155.307-155.306C363.2 104.533 434.56 85.333 512 85.333c77.333 0 148.693 19.094 214.187 57.28 65.28 38.187 117.013 89.92 155.2 155.2z m-217.707-47.36C617.387 223.467 566.827 209.92 512 209.92s-105.387 13.547-151.68 40.533-82.987 63.68-109.973 109.974c-26.987 46.293-40.534 96.853-40.534 151.68s13.547 105.386 40.534 151.68c26.986 46.293 63.68 82.986 109.973 109.973 46.293 26.987 96.853 40.533 151.68 40.533s105.387-13.546 151.68-40.533c46.293-26.987 82.987-63.68 109.973-109.973 26.987-46.294 40.534-96.854 40.534-151.68s-13.547-105.387-40.534-151.68c-27.093-46.294-63.786-82.987-109.973-109.974z`,
| orient: 'vertical',
| formatter: function(name) {
| var v;
| for (var i = 0, n = seriesData.length; i < n; i++) {
| if (name == seriesData[i].name) {
| v = seriesData[i].value;
| }
| }
| return `{name|${name}} | {val|${v}}`;
| },
| data: this.legendData.slice(0, 5), // 切割 legend.data 进行分列展示 第一列
| textStyle: {
| color: '#fff',
| lineHeight: 26,
| rich: {
| name: {
| color: 'rgba(255,255,255,0.6)',
| fontFamily: 'Alimama ShuHeiTi',
| fontWeight: 'bold',
| },
| val: {
| color: '#ffffff',
| fontFamily: 'DIN',
| fontWeight: 'bold'
| }
| }
| },
| },
| // {
| // top: 15,
| // left: '25%',
| // bottom: 0, // legend.data 分页展示
| // selectedMode: false, // 是否允许点击
| // icon: `path://M881.387 297.813c38.08 65.387 57.28 136.747 57.28 214.187s-19.094 148.8-57.28 214.187c-38.187 65.28-89.92 117.12-155.2 155.2S589.44 938.667 512 938.667s-148.8-19.094-214.187-57.28c-65.28-38.08-117.013-89.814-155.306-155.307C104.427 660.8 85.333 589.44 85.333 512c0-77.333 19.094-148.693 57.28-214.187 38.08-65.28 89.814-117.013 155.307-155.306C363.2 104.533 434.56 85.333 512 85.333c77.333 0 148.693 19.094 214.187 57.28 65.28 38.187 117.013 89.92 155.2 155.2z m-217.707-47.36C617.387 223.467 566.827 209.92 512 209.92s-105.387 13.547-151.68 40.533-82.987 63.68-109.973 109.974c-26.987 46.293-40.534 96.853-40.534 151.68s13.547 105.386 40.534 151.68c26.986 46.293 63.68 82.986 109.973 109.973 46.293 26.987 96.853 40.533 151.68 40.533s105.387-13.546 151.68-40.533c46.293-26.987 82.987-63.68 109.973-109.973 26.987-46.294 40.534-96.854 40.534-151.68s-13.547-105.387-40.534-151.68c-27.093-46.294-63.786-82.987-109.973-109.974z`,
| // orient: 'vertical',
| // data: this.legendData.slice(5, 10), // 切割 legend.data 进行分列展示 第二列
| // formatter: function(name) {
| // var v;
| // for (var i = 0, n = seriesData.length; i < n; i++) {
| // if (name == seriesData[i].name) {
| // v = seriesData[i].value;
| // }
| // }
| // return `{name|${name}} | {val|${v}}`;
| // },
| // textStyle: {
| // color: '#fff',
| // lineHeight: 26,
| // rich: {
| // name: {
| // color: 'rgba(255,255,255,0.6)',
| // fontFamily: 'Alimama ShuHeiTi',
| // fontWeight: 'bold',
| // },
| // val: {
| // color: '#ffffff',
| // fontFamily: 'DIN',
| // fontWeight: 'bold'
| // }
| // }
| // }
| // },
| // {
| // top: 15,
| // left: '30%',
| // bottom: 0,
| // type: 'scroll', // legend.data 分页展示
| // selectedMode: false, // 是否允许点击
| // icon: `path://M881.387 297.813c38.08 65.387 57.28 136.747 57.28 214.187s-19.094 148.8-57.28 214.187c-38.187 65.28-89.92 117.12-155.2 155.2S589.44 938.667 512 938.667s-148.8-19.094-214.187-57.28c-65.28-38.08-117.013-89.814-155.306-155.307C104.427 660.8 85.333 589.44 85.333 512c0-77.333 19.094-148.693 57.28-214.187 38.08-65.28 89.814-117.013 155.307-155.306C363.2 104.533 434.56 85.333 512 85.333c77.333 0 148.693 19.094 214.187 57.28 65.28 38.187 117.013 89.92 155.2 155.2z m-217.707-47.36C617.387 223.467 566.827 209.92 512 209.92s-105.387 13.547-151.68 40.533-82.987 63.68-109.973 109.974c-26.987 46.293-40.534 96.853-40.534 151.68s13.547 105.386 40.534 151.68c26.986 46.293 63.68 82.986 109.973 109.973 46.293 26.987 96.853 40.533 151.68 40.533s105.387-13.546 151.68-40.533c46.293-26.987 82.987-63.68 109.973-109.973 26.987-46.294 40.534-96.854 40.534-151.68s-13.547-105.387-40.534-151.68c-27.093-46.294-63.786-82.987-109.973-109.974z`,
| // orient: 'vertical',
| // data: this.legendData.slice(10), // 切割 legend.data 进行分列展示 第三列
| // formatter: function(name) {
| // var v;
| // for (var i = 0, n = seriesData.length; i < n; i++) {
| // if (name == seriesData[i].name) {
| // v = seriesData[i].value;
| // }
| // }
| // return `{name|${name}} | {val|${v}}`;
| // },
| // pageIconColor: '#5BC0DE', // 可以点击的翻页按钮颜色
| // pageIconInactiveColor: '#ABDDEE', // 禁用的按钮颜色
| // pageIconSize: 14, // 这当然就是按钮的大小
| // pageTextStyle: {
| // color: 'rgba(255,255,255,0.6)',
| // fontFamily: 'DIN',
| // fontWeight: 'bold'
| // },
| // textStyle: {
| // color: '#fff',
| // lineHeight: 26,
| // rich: {
| // name: {
| // color: 'rgba(255,255,255,0.6)',
| // fontFamily: 'Alimama ShuHeiTi',
| // fontWeight: 'bold'
| // },
| // val: {
| // color: '#ffffff',
| // fontFamily: 'DIN',
| // fontWeight: 'bold'
| // }
| // }
| // }
| // }
| ],
| series: [
| {
| type: 'pie',
| radius: ['80%', '83%'],
| center: ['64%', '50%'],
| zlevel: 1,
| silent: true,
| hoverAnimation: false,
| color: "#3A4757",
| label: {
| normal: {
| show: false
| }
| },
| labelLine: {
| normal: {
| show: false
| }
| },
| data: [1]
| },
| {
| name: this.pieData.name,
| type: 'pie',
| radius: ['64%', '76%'],
| center: ['64%', '50%'],
| roundCap: true,
| avoidLabelOverlap: false,
| label: {
| show: false,
| position: 'center',
| },
| labelLine: {
| show: false,
| },
| data: this.seriesData
| },
| {
| name: '统计',
| type: 'gauge',
| splitNumber: 30, //刻度数量
| min: 0,
| max: 100,
| radius: '68%', //图表尺寸
| center: ['64%', '50%'],
| startAngle: 90,
| endAngle: -269.9999,
| axisLine: {
| show: true,
| lineStyle: {
| width: 0,
| shadowBlur: 0,
| color: [
| [0, '#0dc2fe'],
| [1, '#0dc2fe']
| ]
| }
| },
| axisTick: {
| show: true,
| lineStyle: {
| color: '#3A4757',
| width: 1
| },
| length: 5,
| splitNumber: 4
| },
| splitLine: {
| show: true,
| length: 10,
| lineStyle: {
| color: 'rgba(255,255,255,0.8)',
| width: 1
| }
| },
| axisLabel: {
| show: false
| },
| pointer: { //仪表盘指针
| show: 0,
| },
| detail: {
| borderColor: '#fff',
| shadowColor: '#fff', //默认透明
| shadowBlur: 2,
| offsetCenter: [0, '0%'], // x, y，单位px
| textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
| color: '#fff',
| fontSize: 50,
| },
| formatter: '{value}'
| },
| data: []
| }
| ]
| })
| }
| },
| mounted() {
| this.initChart()
| },
| watch: {
| //动态监听数据是否变化
| pieData() {
| this.initChart()
| },
| },
| };
| </script>
|
|
