xt-element-ui 1.1.9 → 1.1.91

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,1037 +0,0 @@
1
- ((typeof self !== 'undefined' ? self : this)["webpackJsonpxt_element_ui"] = (typeof self !== 'undefined' ? self : this)["webpackJsonpxt_element_ui"] || []).push([[5],{
2
-
3
- /***/ "22f5":
4
- /***/ (function(module, __webpack_exports__, __webpack_require__) {
5
-
6
- "use strict";
7
-
8
- // UNUSED EXPORTS: getEcharts
9
-
10
- // CONCATENATED MODULE: ./src/components/ex-chart/theme/white.js
11
- /* harmony default export */ var white = ({
12
- color: ["#1890ff", "#37c3a4", "#29c0ce", "#6480D7", "#8cce6f", "#3a5dca", "#ffb74d"],
13
- backgroundColor: "#ffffff",
14
- textStyle: {
15
- fontFamily: "Microsoft YaHei, sans-serif"
16
- },
17
- title: {
18
- textStyle: {
19
- color: "#333",
20
- fontSize: 16
21
- },
22
- subtextStyle: {
23
- color: "#666666",
24
- fontSize: 12
25
- }
26
- },
27
- line: {
28
- itemStyle: {
29
- },
30
- lineStyle: {
31
- width: 2
32
- }
33
- },
34
- bar: {
35
- itemStyle: {
36
- borderRadius: 4
37
- }
38
- },
39
- pie: {
40
- roseType: "radius",
41
- label: {
42
- color: "#333"
43
- }
44
- },
45
- radar: {
46
- indicator: {
47
- color: "#666666"
48
- }
49
- },
50
- map: {
51
- label: {
52
- color: "#333"
53
- },
54
- itemStyle: {
55
- borderColor: "#fff"
56
- }
57
- },
58
- gauge: {
59
- axisLine: {
60
- lineStyle: {
61
- color: [[1, "#5470c6"]]
62
- }
63
- }
64
- },
65
- toolbox: {
66
- iconStyle: {
67
- borderColor: "#666666"
68
- }
69
- },
70
- xAxis: {
71
- axisLine: {
72
- lineStyle: {
73
- color: "#DFE9EE"
74
- }
75
- },
76
- axisTick: {
77
- lineStyle: {
78
- color: "#DFE9EE"
79
- },
80
- show: false
81
- }
82
- },
83
- yAxis: {
84
- axisLine: {
85
- lineStyle: {
86
- color: "#DFE9EE"
87
- }
88
- },
89
- axisTick: {
90
- lineStyle: {
91
- color: "#DFE9EE"
92
- }
93
- },
94
- splitLine: {
95
- show: true,
96
- lineStyle: {
97
- type: "dashed",
98
- color: "#DFE9EE"
99
- }
100
- }
101
- },
102
- splitArea: {
103
- areaStyle: {
104
- color: ["#f7f8fa", "#ffffff"]
105
- }
106
- },
107
- legend: {
108
- textStyle: {
109
- color: "#333333"
110
- }
111
- },
112
- tooltip: {
113
- borderWidth: 1,
114
- backgroundColor: "#ffffff",
115
- textStyle: {
116
- color: "#333333"
117
- },
118
- trigger: "axis"
119
- }
120
- });
121
-
122
- // CONCATENATED MODULE: ./src/components/ex-chart/theme/dark.js
123
- /* harmony default export */ var dark = ({
124
- color: ["#0de7ff", "#a782ff", "#fcdd60", "#0de7ff", "#ffc5a1", "#6291ae", "#13ce66"],
125
- backgroundColor: "transparent",
126
- textStyle: {
127
- fontFamily: "Microsoft YaHei, sans-serif"
128
- },
129
- title: {
130
- textStyle: {
131
- color: "#333"
132
- },
133
- subtextStyle: {
134
- color: "#666666"
135
- }
136
- },
137
- line: {
138
- itemStyle: {
139
- },
140
- lineStyle: {
141
- width: 2
142
- }
143
- },
144
- bar: {
145
- itemStyle: {
146
- borderRadius: 4
147
- }
148
- },
149
- pie: {
150
- roseType: "radius",
151
- label: {
152
- color: "#333"
153
- }
154
- },
155
- radar: {
156
- indicator: {
157
- color: "#666666"
158
- }
159
- },
160
- map: {
161
- label: {
162
- color: "#333"
163
- },
164
- itemStyle: {
165
- borderColor: "#fff"
166
- }
167
- },
168
- gauge: {
169
- axisLine: {
170
- lineStyle: {
171
- color: [[1, "#5470c6"]]
172
- }
173
- }
174
- },
175
- toolbox: {
176
- iconStyle: {
177
- borderColor: "#666666"
178
- }
179
- },
180
- axisLine: {
181
- lineStyle: {
182
- color: "#DCDFE6"
183
- }
184
- },
185
- axisTick: {
186
- lineStyle: {
187
- color: "#DCDFE6"
188
- }
189
- },
190
- splitLine: {
191
- lineStyle: {
192
- color: "#ebeef5"
193
- }
194
- },
195
- splitArea: {
196
- areaStyle: {
197
- color: ["#f7f8fa", "#ffffff"]
198
- }
199
- },
200
- legend: {
201
- textStyle: {
202
- color: "#666"
203
- }
204
- },
205
- tooltip: {
206
- backgroundColor: "rgba(255, 255, 255, 0.95)",
207
- borderColor: "#DCDFE6",
208
- borderWidth: 1,
209
- textStyle: {
210
- color: "#333"
211
- }
212
- }
213
- });
214
-
215
- // CONCATENATED MODULE: ./src/components/ex-chart/theme/blue.js
216
- /* harmony default export */ var blue = ({
217
- color: ["#2CDEB3", "#A17EE6", "#E57E40", "#409EFF"],
218
- backgroundColor: "#ffffff",
219
- textStyle: {
220
- fontFamily: "Microsoft YaHei, sans-serif"
221
- },
222
- title: {
223
- textStyle: {
224
- color: "#333"
225
- },
226
- subtextStyle: {
227
- color: "#666666"
228
- }
229
- },
230
- line: {
231
- itemStyle: {
232
- },
233
- lineStyle: {
234
- width: 2
235
- }
236
- },
237
- bar: {
238
- itemStyle: {
239
- borderRadius: 4
240
- }
241
- },
242
- pie: {
243
- roseType: "radius",
244
- label: {
245
- color: "#333"
246
- }
247
- },
248
- radar: {
249
- indicator: {
250
- color: "#666666"
251
- }
252
- },
253
- map: {
254
- label: {
255
- color: "#333"
256
- },
257
- itemStyle: {
258
- borderColor: "#fff"
259
- }
260
- },
261
- gauge: {
262
- axisLine: {
263
- lineStyle: {
264
- color: [[1, "#5470c6"]]
265
- }
266
- }
267
- },
268
- toolbox: {
269
- iconStyle: {
270
- borderColor: "#666666"
271
- }
272
- },
273
- axisLine: {
274
- lineStyle: {
275
- color: "#DCDFE6"
276
- }
277
- },
278
- axisTick: {
279
- lineStyle: {
280
- color: "#DCDFE6"
281
- }
282
- },
283
- splitLine: {
284
- lineStyle: {
285
- color: "#ebeef5"
286
- }
287
- },
288
- splitArea: {
289
- areaStyle: {
290
- color: ["#f7f8fa", "#ffffff"]
291
- }
292
- },
293
- legend: {
294
- textStyle: {
295
- color: "#666"
296
- }
297
- },
298
- tooltip: {
299
- backgroundColor: "rgba(255, 255, 255, 0.95)",
300
- borderColor: "#DCDFE6",
301
- borderWidth: 1,
302
- textStyle: {
303
- color: "#333"
304
- }
305
- }
306
- });
307
-
308
- // CONCATENATED MODULE: ./src/components/ex-chart/theme/starry.js
309
- /* harmony default export */ var starry = ({
310
- color: [
311
- "#1685a9", // 石青
312
- "#21a675", // 松柏绿
313
- "#1bd1a5", // 飞燕草蓝
314
- "#8c4356", // 绛紫
315
- "#0dafc6", // 孔雀蓝
316
- "#4b5cc4", // 宝蓝
317
- "#758a99", // 墨灰
318
- "#cca4e3", // 丁香色
319
- "#205277", // 靛青色
320
- "#d9b611", // 秋香色
321
- "#ff8c31", // 杏红
322
- "#9d2933", // 胭脂
323
- "#0288c5", // 浅靛青蓝
324
- "#44cef6" // 天蓝色
325
- ],
326
- backgroundColor: "#ffffff",
327
- textStyle: {
328
- fontFamily: "Microsoft YaHei, sans-serif"
329
- },
330
- title: {
331
- textStyle: {
332
- color: "#333"
333
- },
334
- subtextStyle: {
335
- color: "#666666"
336
- }
337
- },
338
- line: {
339
- itemStyle: {
340
- },
341
- lineStyle: {
342
- width: 2
343
- }
344
- },
345
- bar: {
346
- itemStyle: {
347
- borderRadius: 4
348
- }
349
- },
350
- pie: {
351
- roseType: "radius",
352
- label: {
353
- color: "#333"
354
- }
355
- },
356
- radar: {
357
- indicator: {
358
- color: "#666666"
359
- }
360
- },
361
- map: {
362
- label: {
363
- color: "#333"
364
- },
365
- itemStyle: {
366
- borderColor: "#fff"
367
- }
368
- },
369
- gauge: {
370
- axisLine: {
371
- lineStyle: {
372
- color: [[1, "#5470c6"]]
373
- }
374
- }
375
- },
376
- toolbox: {
377
- iconStyle: {
378
- borderColor: "#666666"
379
- }
380
- },
381
- axisLine: {
382
- lineStyle: {
383
- color: "#DCDFE6"
384
- }
385
- },
386
- axisTick: {
387
- lineStyle: {
388
- color: "#DCDFE6"
389
- }
390
- },
391
- splitLine: {
392
- lineStyle: {
393
- color: "#ebeef5"
394
- }
395
- },
396
- splitArea: {
397
- areaStyle: {
398
- color: ["#f7f8fa", "#ffffff"]
399
- }
400
- },
401
- legend: {
402
- textStyle: {
403
- color: "#666"
404
- }
405
- },
406
- tooltip: {
407
- backgroundColor: "rgba(255, 255, 255, 0.95)",
408
- borderColor: "#DCDFE6",
409
- borderWidth: 1,
410
- textStyle: {
411
- color: "#333"
412
- }
413
- }
414
- });
415
-
416
- // CONCATENATED MODULE: ./src/components/ex-chart/theme/orange.js
417
- /* harmony default export */ var orange = ({
418
- color: ["#e69419", "#A5b4da", "#F8792C", "#97bfb4", "#de747b", "#d6bac0", "#e62737", "#f35969", "#f1ccb0", "#b7394e", "#fe9c1c2"],
419
- backgroundColor: "#ffffff",
420
- textStyle: {
421
- fontFamily: "Microsoft YaHei, sans-serif"
422
- },
423
- title: {
424
- textStyle: {
425
- color: "#333"
426
- },
427
- subtextStyle: {
428
- color: "#666666"
429
- }
430
- },
431
- line: {
432
- itemStyle: {
433
- color: "#e69419"
434
- },
435
- lineStyle: {
436
- width: 2
437
- }
438
- },
439
- bar: {
440
- itemStyle: {
441
- borderRadius: 4
442
- }
443
- },
444
- pie: {
445
- roseType: "radius",
446
- label: {
447
- color: "#333"
448
- }
449
- },
450
- radar: {
451
- indicator: {
452
- color: "#666666"
453
- }
454
- },
455
- map: {
456
- label: {
457
- color: "#333"
458
- },
459
- itemStyle: {
460
- borderColor: "#fff"
461
- }
462
- },
463
- gauge: {
464
- axisLine: {
465
- lineStyle: {
466
- color: [[1, "#5470c6"]]
467
- }
468
- }
469
- },
470
- toolbox: {
471
- iconStyle: {
472
- borderColor: "#666666"
473
- }
474
- },
475
- axisLine: {
476
- lineStyle: {
477
- color: "#DCDFE6"
478
- }
479
- },
480
- axisTick: {
481
- lineStyle: {
482
- color: "#DCDFE6"
483
- }
484
- },
485
- splitLine: {
486
- lineStyle: {
487
- color: "#ebeef5"
488
- }
489
- },
490
- splitArea: {
491
- areaStyle: {
492
- color: ["#f7f8fa", "#ffffff"]
493
- }
494
- },
495
- legend: {
496
- textStyle: {
497
- color: "#666"
498
- }
499
- },
500
- tooltip: {
501
- backgroundColor: "rgba(255, 255, 255, 0.95)",
502
- borderColor: "#DCDFE6",
503
- borderWidth: 1,
504
- textStyle: {
505
- color: "#333"
506
- }
507
- }
508
- });
509
-
510
- // CONCATENATED MODULE: ./src/components/ex-chart/utils.js
511
-
512
-
513
-
514
-
515
-
516
-
517
- const themeKeys = {
518
- "default": white,
519
- "white": white,
520
- "dark": dark,
521
- "blue": blue,
522
- "starry": starry,
523
- "orange": orange
524
- };
525
-
526
- // echarts 仅在客户端加载,避免 SSR 编译/渲染报错
527
- let echarts = null;
528
-
529
- function getEcharts() {
530
- if (!echarts && typeof window !== 'undefined') {
531
- try {
532
- echarts = __webpack_require__("313e");
533
- // 注册所有主题
534
- for (const key in themeKeys) {
535
- echarts.registerTheme(key, themeKeys[key]);
536
- }
537
- } catch (e) {
538
- console.warn('[ExChart] echarts 加载失败:', e.message);
539
- }
540
- }
541
- return echarts;
542
- }
543
-
544
- // 字体大小配置
545
- const fontSizeMap = {
546
- small: {
547
- title: 14,
548
- subtitle: 11,
549
- legend: 11,
550
- axisLabel: 10,
551
- tooltip: 11,
552
- label: 11
553
- },
554
- medium: {
555
- title: 16,
556
- subtitle: 12,
557
- legend: 12,
558
- axisLabel: 12,
559
- tooltip: 12,
560
- label: 12
561
- },
562
- large: {
563
- title: 18,
564
- subtitle: 14,
565
- legend: 14,
566
- axisLabel: 14,
567
- tooltip: 14,
568
- label: 14
569
- }
570
- };
571
-
572
- function EchartsUtil() {}
573
-
574
- EchartsUtil.currentTheme = "default";
575
- EchartsUtil.currentSize = "medium";
576
- EchartsUtil.inverse = false;
577
-
578
- EchartsUtil.baseOption = {
579
- backgroundColor: "transparent",
580
- tooltip: {
581
- trigger: "axis",
582
- borderWidth: 1
583
- },
584
- legend: {
585
- right: 20,
586
- top: 0,
587
- show: true,
588
- textStyle: {
589
- fontSize: 12
590
- }
591
- },
592
- grid: {
593
- top: "25%",
594
- left: "40",
595
- right: "15",
596
- bottom: "40"
597
- },
598
- xAxis: {
599
- type: "category",
600
- boundaryGap: false,
601
- axisTick: {
602
- show: true,
603
- length: 4
604
- },
605
- axisLabel: {
606
- fontSize: 12,
607
- interval: 0,
608
- formatter: function(value) {
609
- return !this.reverse && this.longLable ? value.replace(new RegExp(`(.{${this.longLableSplitNum}})`, "g"), `$1\n`) : value;
610
- }
611
- }
612
- },
613
- yAxis: {
614
- type: "value",
615
- axisTick: {
616
- show: false
617
- },
618
- min: null,
619
- max: null,
620
- axisLabel: {
621
- show: false
622
- },
623
- splitLine: {
624
- lineStyle: {
625
- type: "dashed",
626
- width: 1
627
- }
628
- }
629
- }
630
- };
631
-
632
- EchartsUtil.chartInstanceList = [];
633
-
634
- EchartsUtil.mergeOptions = function(themeOption, customOption) {
635
- return Object.assign({}, this.baseOption, themeOption, customOption);
636
- };
637
-
638
- // 根据字体大小调整主题配置
639
- EchartsUtil.applyFontSize = function(themeOption, size) {
640
- const fontSizeConfig = fontSizeMap[size] || fontSizeMap.medium;
641
-
642
- const result = JSON.parse(JSON.stringify(themeOption));
643
-
644
- // 调整标题字体大小
645
- if (result.title && result.title.textStyle) {
646
- result.title.textStyle.fontSize = fontSizeConfig.title;
647
- }
648
- if (result.title && result.title.subtextStyle) {
649
- result.title.subtextStyle.fontSize = fontSizeConfig.subtitle;
650
- }
651
-
652
- // 调整图例字体大小
653
- if (result.legend && result.legend.textStyle) {
654
- result.legend.textStyle.fontSize = fontSizeConfig.legend;
655
- }
656
-
657
- // 调整提示框字体大小
658
- if (result.tooltip && result.tooltip.textStyle) {
659
- result.tooltip.textStyle.fontSize = fontSizeConfig.tooltip;
660
- }
661
-
662
- // 调整饼图标签字体大小
663
- if (result.pie && result.pie.label) {
664
- if (typeof result.pie.label === 'object') {
665
- result.pie.label.fontSize = fontSizeConfig.label;
666
- }
667
- }
668
-
669
- // 调整雷达图指示器字体大小
670
- if (result.radar && result.radar.indicator) {
671
- if (typeof result.radar.indicator === 'object' && result.radar.indicator.textStyle) {
672
- result.radar.indicator.textStyle.fontSize = fontSizeConfig.label;
673
- }
674
- }
675
-
676
- // 调整地图标签字体大小
677
- if (result.map && result.map.label) {
678
- if (typeof result.map.label === 'object') {
679
- result.map.label.fontSize = fontSizeConfig.label;
680
- }
681
- }
682
-
683
- return result;
684
- };
685
-
686
- EchartsUtil.init = function(dom, theme, customOption, size) {
687
- const ec = getEcharts();
688
- // SSR 环境下忽略初始化
689
- if (!ec || !dom) return null;
690
-
691
- theme = theme || "default";
692
- size = size || "medium";
693
- customOption = customOption || {};
694
-
695
- const useTheme = this.currentTheme || theme;
696
- const useSize = this.currentSize || size;
697
-
698
- this.currentTheme = useTheme;
699
- this.currentSize = useSize;
700
-
701
- let themeOption = themeKeys[useTheme];
702
- // 应用字体大小配置
703
- themeOption = this.applyFontSize(themeOption, useSize);
704
-
705
- const option = this.mergeOptions(themeOption, customOption);
706
-
707
- const chart = ec.init(dom, useTheme);
708
- chart.setOption(option, true);
709
-
710
- this.chartInstanceList.push({
711
- dom,
712
- chart,
713
- customOption,
714
- size: useSize
715
- });
716
-
717
- this.bindResize(chart);
718
- return chart;
719
- };
720
-
721
- EchartsUtil.changeSingleTheme = function(dom, chartIns, customOption, newTheme) {
722
- const ec = getEcharts();
723
- if (!ec || !dom || !chartIns) return;
724
-
725
- customOption = customOption || {};
726
- newTheme = newTheme || "default";
727
-
728
- this.currentTheme = newTheme;
729
- chartIns.dispose();
730
-
731
- const newChart = ec.init(dom, newTheme, customOption);
732
-
733
- const item = this.chartInstanceList.find(function(v) {
734
- return v.dom === dom;
735
- });
736
-
737
- if (item) {
738
- item.chart = newChart;
739
- }
740
-
741
- return newChart;
742
- };
743
-
744
- EchartsUtil.changeAllTheme = function(newTheme, newSize) {
745
- const ec = getEcharts();
746
- if (!ec || !newTheme) return;
747
-
748
- this.currentTheme = newTheme;
749
- // 如果传入了新的 size,则更新全局 size
750
- if (newSize) {
751
- this.currentSize = newSize;
752
- }
753
-
754
- this.chartInstanceList.forEach(function(item) {
755
- const dom = item.dom;
756
- const chart = item.chart;
757
- const customOption = item.customOption;
758
- // 使用图表自己的 size,如果没有则使用全局 size
759
- const useSize = item.size || EchartsUtil.currentSize;
760
-
761
- if (chart) {
762
- chart.dispose();
763
- }
764
-
765
- const newChart = ec.init(dom, newTheme);
766
- let themeOption = themeKeys[newTheme];
767
- // 应用字体大小配置
768
- themeOption = EchartsUtil.applyFontSize(themeOption, useSize);
769
- const option = EchartsUtil.mergeOptions(themeOption, customOption);
770
-
771
- newChart.setOption(option, true);
772
- item.chart = newChart;
773
- // 更新图表的 size 记录
774
- item.size = useSize;
775
- EchartsUtil.bindResize(newChart);
776
- });
777
- };
778
-
779
- EchartsUtil.bindResize = function(chartIns) {
780
- if (!chartIns || chartIns.resizeLocked) return;
781
-
782
- window.addEventListener("resize", function() {
783
- chartIns.resize();
784
- });
785
-
786
- chartIns._resizeLocked = true;
787
- };
788
-
789
- EchartsUtil.destroy = function(chartIns) {
790
- if (chartIns) {
791
- chartIns.dispose();
792
- }
793
-
794
- this.chartInstanceList = this.chartInstanceList.filter(function(item) {
795
- return item.chart !== chartIns;
796
- });
797
- };
798
-
799
- EchartsUtil.destroyAll = function() {
800
- this.chartInstanceList.forEach(function(item) {
801
- if (item.chart) {
802
- item.chart.dispose();
803
- }
804
- });
805
-
806
- this.chartInstanceList = [];
807
- };
808
-
809
- /* harmony default export */ var utils = __webpack_exports__["a"] = (EchartsUtil);
810
-
811
-
812
-
813
-
814
- /***/ }),
815
-
816
- /***/ "8d72":
817
- /***/ (function(module, exports, __webpack_require__) {
818
-
819
- // extracted by mini-css-extract-plugin
820
-
821
- /***/ }),
822
-
823
- /***/ "ab1c":
824
- /***/ (function(module, __webpack_exports__, __webpack_require__) {
825
-
826
- "use strict";
827
- // ESM COMPAT FLAG
828
- __webpack_require__.r(__webpack_exports__);
829
-
830
- // CONCATENATED MODULE: ./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"3d759d14-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??ref--5!./node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/ex-chart/ExPie.vue?vue&type=template&id=5100b648&scoped=true
831
- var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',{ref:"piechart",staticClass:"pie-box"})
832
- }
833
- var staticRenderFns = []
834
-
835
-
836
- // CONCATENATED MODULE: ./src/components/ex-chart/ExPie.vue?vue&type=template&id=5100b648&scoped=true
837
-
838
- // EXTERNAL MODULE: ./src/components/ex-chart/utils.js + 5 modules
839
- var utils = __webpack_require__("22f5");
840
-
841
- // CONCATENATED MODULE: ./node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/ex-chart/ExPie.vue?vue&type=script&lang=js
842
-
843
-
844
- /* harmony default export */ var ExPievue_type_script_lang_js = ({
845
- name: "XtPie",
846
- props: {
847
- theme: {},
848
- size: {
849
- type: String,
850
- default: "medium"
851
- },
852
- chartData: {
853
- type: Array,
854
- default: () => {
855
- return [
856
- { value: 53, name: "张三" },
857
- { value: 10, name: "李四" },
858
- { value: 60, name: "宋五" }
859
- ];
860
- }
861
- },
862
- colors: {
863
- type: Array,
864
- default: () => { return []; }
865
- },
866
- unit: {
867
- type: String,
868
- default: ""
869
- },
870
- showLegend: {
871
- type: Boolean,
872
- default: true
873
- },
874
- chartMode: {
875
- type: String,
876
- default: "dark"
877
- },
878
- roseType: {
879
- type: String,
880
- default: ""
881
- },
882
- showLabel: {
883
- type: Boolean,
884
- default: true
885
- },
886
- totalLabel: {
887
- type: String,
888
- default: "总数"
889
- }
890
- },
891
- data() {
892
- return {
893
- myChart: null
894
- };
895
- },
896
- computed: {
897
- totalNum() {
898
- return this.chartData.map(it => parseFloat(it.value)).reduce((pre, aft) => { return pre + aft; }, 0);
899
- }
900
- },
901
- watch: {
902
- chartData: {
903
- deep: true,
904
- handler(newVal, oldVal) {
905
- const _self = this;
906
- _self.initChart();
907
- }
908
- },
909
- theme(newVal) {
910
- this.initChart();
911
- }
912
- },
913
- mounted() {
914
- this.$nextTick(() => {
915
- this.initChart();
916
- });
917
- /* setTimeout(() => {
918
- this.initChart();
919
- }, 1000); */
920
- },
921
- methods: {
922
- initChart() {
923
- const _self = this;
924
- console.log(this.chartMode);
925
- // 数据处理
926
- const option = {
927
- title: {
928
- text: `${_self.totalLabel}:${_self.totalNum}`,
929
- textStyle: {
930
- color: "#808080",
931
- fontSize: 20
932
- },
933
- // left: "40%",
934
- // top: "45%",
935
- top: "middle",
936
- left: "center"
937
- },
938
- tooltip: {
939
- trigger: "item"
940
- },
941
- legend: this.showLegend ? {
942
- top: "top",
943
- right: "20",
944
- type: "scroll",
945
- textStyle: {
946
- color: "#808080"
947
- }
948
- } : null,
949
- grid: {
950
- left: 30,
951
- right: 0,
952
- top: 20,
953
- bottom: 0,
954
- containLabel: true
955
- },
956
- series: [{
957
- name: _self.unit,
958
- type: "pie",
959
- center: ["50%", "50%"],
960
- roseType: this.roseType,
961
- radius: ["50%", "65%"],
962
- minAngle: 5,
963
- avoidLabelOverlap: true,
964
- data: _self.chartData.map((item, ind) => {
965
- const { name, value } = item;
966
- return {
967
- value,
968
- name,
969
- labelLine: {
970
- show: this.showLabel
971
- },
972
- emphasis: {
973
- labelLine: {
974
- show: this.showLabel
975
- }
976
- },
977
- label: {
978
- show: this.showLabel
979
- },
980
- tooltip: {
981
- formatter: "{b}:{c} ({d}%)",
982
- position: "inside",
983
- borderWidth: 1
984
- }
985
- };
986
- })
987
- }]
988
- };
989
- this.myChart = utils["a" /* default */].init(_self.$refs.piechart, this.theme, option, this.size);
990
- }
991
- }
992
- });
993
-
994
- // CONCATENATED MODULE: ./src/components/ex-chart/ExPie.vue?vue&type=script&lang=js
995
- /* harmony default export */ var ex_chart_ExPievue_type_script_lang_js = (ExPievue_type_script_lang_js);
996
- // EXTERNAL MODULE: ./src/components/ex-chart/ExPie.vue?vue&type=style&index=0&id=5100b648&prod&lang=scss&scoped=true
997
- var ExPievue_type_style_index_0_id_5100b648_prod_lang_scss_scoped_true = __webpack_require__("e3c3");
998
-
999
- // EXTERNAL MODULE: ./node_modules/vue-loader/lib/runtime/componentNormalizer.js
1000
- var componentNormalizer = __webpack_require__("2877");
1001
-
1002
- // CONCATENATED MODULE: ./src/components/ex-chart/ExPie.vue
1003
-
1004
-
1005
-
1006
-
1007
-
1008
-
1009
- /* normalize component */
1010
-
1011
- var component = Object(componentNormalizer["a" /* default */])(
1012
- ex_chart_ExPievue_type_script_lang_js,
1013
- render,
1014
- staticRenderFns,
1015
- false,
1016
- null,
1017
- "5100b648",
1018
- null
1019
-
1020
- )
1021
-
1022
- /* harmony default export */ var ExPie = __webpack_exports__["default"] = (component.exports);
1023
-
1024
- /***/ }),
1025
-
1026
- /***/ "e3c3":
1027
- /***/ (function(module, __webpack_exports__, __webpack_require__) {
1028
-
1029
- "use strict";
1030
- /* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_9_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_9_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_9_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_9_oneOf_1_3_node_modules_vue_cli_service_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_ExPie_vue_vue_type_style_index_0_id_5100b648_prod_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__("8d72");
1031
- /* harmony import */ var _node_modules_mini_css_extract_plugin_dist_loader_js_ref_9_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_9_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_9_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_9_oneOf_1_3_node_modules_vue_cli_service_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_ExPie_vue_vue_type_style_index_0_id_5100b648_prod_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_node_modules_mini_css_extract_plugin_dist_loader_js_ref_9_oneOf_1_0_node_modules_css_loader_dist_cjs_js_ref_9_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_src_index_js_ref_9_oneOf_1_2_node_modules_sass_loader_dist_cjs_js_ref_9_oneOf_1_3_node_modules_vue_cli_service_node_modules_cache_loader_dist_cjs_js_ref_1_0_node_modules_vue_loader_lib_index_js_vue_loader_options_ExPie_vue_vue_type_style_index_0_id_5100b648_prod_lang_scss_scoped_true__WEBPACK_IMPORTED_MODULE_0__);
1032
- /* unused harmony reexport * */
1033
-
1034
-
1035
- /***/ })
1036
-
1037
- }]);