@easyv/config 1.1.7 → 1.1.10

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.
package/src/series.js CHANGED
@@ -1,824 +1,824 @@
1
- import { mapping, label, multiColor } from '.';
2
-
3
- const _mapping = { fieldName: '', displayName: '' };
4
-
5
- const defaultBandSeries = {
6
- mapping: _mapping,
7
- yOrZ: 'y',
8
- fillImage: 'components/static-image/superChart/pattern.png',
9
- fill: {
10
- type: 'linear',
11
- pure: '#fff',
12
- linear: {
13
- stops: [
14
- { offset: 0, color: '#fff' },
15
- { offset: 50, color: '#ff0' },
16
- { offset: 100, color: '#f0f' },
17
- ],
18
- angle: 30,
19
- opacity: 1,
20
- },
21
- },
22
- highlight: {
23
- show: false,
24
- extent: 'max',
25
- fill: {
26
- type: 'linear',
27
- pure: '#fff',
28
- linear: {
29
- stops: [
30
- { offset: 0, color: '#fff' },
31
- { offset: 50, color: '#ff0' },
32
- { offset: 100, color: '#f0f' },
33
- ],
34
- angle: 30,
35
- opacity: 1,
36
- },
37
- },
38
- },
39
- size: {
40
- width: 10,
41
- height: 10,
42
- },
43
- opacity: 0.65,
44
- };
45
-
46
- export const bandSeries = (
47
- name = Math.random() + '',
48
- {
49
- mapping: {
50
- fieldName = defaultBandSeries.mapping.fieldName,
51
- displayName = defaultBandSeries.mapping.displayName,
52
- } = defaultBandSeries.mapping,
53
- yOrZ = defaultBandSeries.yOrZ,
54
- stack,
55
- patternType,
56
- fillType,
57
- fillImage = defaultBandSeries.fillImage,
58
- patternWidth,
59
- patternHeight,
60
- patternImage,
61
- fill = defaultBandSeries.fill,
62
- size: {
63
- width: urlWidth = defaultBandSeries.size.width,
64
- height: urlHeight = defaultBandSeries.size.height,
65
- } = defaultBandSeries.size,
66
- opacity = defaultBandSeries.opacity,
67
- highlight: {
68
- show: showHighlight = defaultBandSeries.highlight.show,
69
- extent: highlightExtent = defaultBandSeries.highlight.extent,
70
- fill: highlightFill = defaultBandSeries.highlight.fill,
71
- } = defaultBandSeries.highlight,
72
- label: bandLabel,
73
- } = defaultBandSeries
74
- ) => {
75
- return {
76
- name,
77
- displayName: '系列',
78
- value: [
79
- mapping({ fieldName, displayName }),
80
- {
81
- name: 'yOrZ',
82
- displayName: '纵轴选择',
83
- value: yOrZ,
84
- type: 'select',
85
- config: {
86
- options: [
87
- { name: 'Y轴', value: 'y' },
88
- { name: 'Z轴', value: 'z' },
89
- ],
90
- },
91
- },
92
- stack !== undefined && {
93
- name: 'stack',
94
- displayName: '堆叠',
95
- value: stack,
96
- type: 'input',
97
- },
98
- fillType !== undefined && {
99
- name: 'fillType',
100
- displayName: '填充样式',
101
- value: fillType,
102
- type: 'radio',
103
- config: {
104
- options: [
105
- { name: '颜色', value: 'color' },
106
- { name: '纹理', value: 'pattern' },
107
- ],
108
- },
109
- },
110
- fillType !== undefined && {
111
- rule: [['fillType', '$eq', 'color']],
112
- name: 'fill',
113
- displayName: '颜色',
114
- type: 'multicolor',
115
- value: fill,
116
- markColorType: 'seriesGradient',
117
-
118
- },
119
- fillType !== undefined && {
120
- rule: [['fillType', '$eq', 'pattern']],
121
- name: 'url',
122
- displayName: '纹理图片',
123
- type: 'uploadImage',
124
- value: fillImage,
125
- },
126
- fillType !== undefined && {
127
- rule: [['fillType', '$eq', 'pattern']],
128
- name: 'size',
129
- displayName: '尺寸',
130
- value: [
131
- {
132
- name: 'width',
133
- displayName: '宽度',
134
- value: urlWidth,
135
- config: { span: 12, suffix: 'W' },
136
- },
137
- {
138
- name: 'height',
139
- displayName: '高度',
140
- value: urlHeight,
141
- config: { span: 12, suffix: 'H' },
142
- },
143
- ],
144
- type: 'group',
145
- },
146
- fillType !== undefined && {
147
- rule: [['fillType', '$eq', 'pattern']],
148
- type: 'range',
149
- name: 'opacity',
150
- displayName: '透明度',
151
- value: opacity,
152
- config: { max: 1, min: 0, step: 0.01 },
153
- },
154
- (patternType !== undefined || fillType === undefined) && {
155
- name: 'fill',
156
- displayName: '颜色',
157
- type: 'multicolor',
158
- value: fill,
159
- markColorType: 'seriesGradient',
160
- },
161
- patternType !== undefined && {
162
- name: 'patternType',
163
- displayName: '纹理类型',
164
- value: patternType,
165
- type: 'radio',
166
- config: {
167
- options: [
168
- { name: '默认', value: 'default' },
169
- { name: '自定义', value: 'custom' },
170
- ],
171
- },
172
- },
173
- patternImage !== undefined && {
174
- rule: [['patternType', '$eq', 'custom']],
175
- name: 'patternImage',
176
- displayName: '纹理',
177
- value: patternImage,
178
- type: 'uploadImage',
179
- },
180
- patternWidth !== undefined && {
181
- name: 'patternWidth',
182
- displayName: '纹理宽度',
183
- value: patternWidth,
184
- type: 'number',
185
- config: {
186
- suffix: 'px',
187
- },
188
- },
189
- patternHeight !== undefined && {
190
- name: 'patternHeight',
191
- displayName: '纹理高度',
192
- value: patternHeight,
193
- type: 'number',
194
- config: {
195
- suffix: 'px',
196
- },
197
- },
198
- {
199
- name: 'highlight',
200
- displayName: '极值高亮',
201
- value: [
202
- {
203
- name: 'show',
204
- displayName: '显示',
205
- type: 'boolean',
206
- value: showHighlight,
207
- },
208
- {
209
- rule: [['show', '$eq', true]],
210
- name: 'extent',
211
- displayName: '极值',
212
- value: highlightExtent,
213
- type: 'select',
214
- config: {
215
- options: [
216
- { name: '最大值', value: 'max' },
217
- { name: '最小值', value: 'min' },
218
- ],
219
- },
220
- },
221
- {
222
- rule: [['show', '$eq', true]],
223
- name: 'fill',
224
- displayName: '颜色',
225
- type: 'multicolor',
226
- value: highlightFill,
227
- },
228
- ],
229
- },
230
- label(bandLabel),
231
- ].filter((item) => !!item),
232
- type: 'object',
233
- };
234
- };
235
-
236
- const defaultLineSeries = {
237
- mapping: _mapping,
238
- yOrZ: 'y',
239
- line: {
240
- type: 'solid',
241
- color: '#FFFFFF',
242
- lineWidth: '1',
243
- curve: true,
244
- tension: 0,
245
- connectNulls: false,
246
- lighter: {
247
- show: false,
248
- fill: {
249
- type: 'linear',
250
- pure: '#fff',
251
- linear: {
252
- stops: [
253
- { offset: 0, color: '#fff' },
254
- { offset: 50, color: '#ff0' },
255
- { offset: 100, color: '#f0f' },
256
- ],
257
- angle: 30,
258
- opacity: 1,
259
- },
260
- },
261
- length: 200,
262
- width: 2,
263
- unitStep: 1,
264
- },
265
- },
266
- areaType: 'color',
267
- size: {
268
- width: 10,
269
- height: 10,
270
- },
271
- url: 'components/static-image/superChart/pattern.png',
272
- opacity: 0.65,
273
- areaColor: {
274
- type: 'linear',
275
- pure: '#fff',
276
- linear: {
277
- stops: [
278
- { offset: 0, color: '#fff' },
279
- { offset: 50, color: '#ff0' },
280
- { offset: 100, color: '#f0f' },
281
- ],
282
- angle: 30,
283
- opacity: 1,
284
- },
285
- },
286
- };
287
- const defaultIcon = {
288
- show: true,
289
- mode: 'single',
290
- inner: { color: '#83C4FF', radius: 3 },
291
- outer: { color: 'rgba(24,144,255,0.4)', radius: 6 },
292
- color: '#1283E3',
293
- radius: 4,
294
- image: 'components/static-image/superChart/fang.png',
295
- size: {
296
- width: 10,
297
- height: 10,
298
- },
299
- };
300
-
301
- const commonLine = (
302
- {
303
- type = defaultLineSeries.line.type,
304
- color = defaultLineSeries.line.color,
305
- lineWidth = defaultLineSeries.line.lineWidth,
306
- curve = defaultLineSeries.line.curve,
307
- tension = defaultLineSeries.line.tension,
308
- connectNulls = defaultLineSeries.line.connectNulls,
309
- } = defaultLineSeries.line
310
- ) => [
311
- {
312
- name: 'type',
313
- displayName: '类型',
314
- value: type,
315
- type: 'select',
316
- config: {
317
- options: [
318
- {
319
- name: '实线',
320
- value: 'solid',
321
- },
322
- {
323
- name: '虚线',
324
- value: 'dash',
325
- },
326
- ],
327
- },
328
- },
329
- {
330
- name: 'color',
331
- displayName: '颜色',
332
- value: color,
333
- type: 'color',
334
- markColorType: 'palette',
335
- },
336
- {
337
- name: 'lineWidth',
338
- displayName: '粗细',
339
- value: lineWidth,
340
- type: 'input',
341
- config: {
342
- suffix: 'px',
343
- },
344
- },
345
- {
346
- name: 'curve',
347
- displayName: '曲线',
348
- value: curve,
349
- type: 'boolean',
350
- },
351
- {
352
- rule: [['curve', '$eq', true]],
353
- name: 'tension',
354
- displayName: '曲线张力',
355
- value: tension,
356
- type: 'range',
357
- config: {
358
- min: 0,
359
- max: 1,
360
- step: 0.1,
361
- },
362
- },
363
- {
364
- name: 'connectNulls',
365
- displayName: 'null值连接',
366
- value: connectNulls,
367
- type: 'boolean',
368
- },
369
- ];
370
-
371
- const lighter = (
372
- {
373
- show = defaultLineSeries.line.lighter.show,
374
- fill = defaultLineSeries.line.lighter.fill,
375
- length = defaultLineSeries.line.lighter.length,
376
- width = defaultLineSeries.line.lighter.width,
377
- unitStep = defaultLineSeries.line.lighter.unitStep,
378
- } = defaultLineSeries.line.lighter
379
- ) => ({
380
- name: 'lighter',
381
- displayName: '光效',
382
- value: [
383
- {
384
- name: 'show',
385
- displayName: '显示',
386
- value: show,
387
- type: 'boolean',
388
- },
389
- {
390
- rule: [['show', '$eq', true]],
391
- name: 'fill',
392
- displayName: '颜色',
393
- type: 'multicolor',
394
- value: fill,
395
- markColorType: 'seriesGradient',
396
- },
397
- {
398
- rule: [['show', '$eq', true]],
399
- name: 'length',
400
- displayName: '长度',
401
- value: length,
402
- type: 'number',
403
- },
404
- {
405
- rule: [['show', '$eq', true]],
406
- name: 'width',
407
- displayName: '宽度',
408
- value: width,
409
- type: 'number',
410
- },
411
- {
412
- rule: [['show', '$eq', true]],
413
- name: 'unitStep',
414
- displayName: '速度',
415
- value: unitStep,
416
- type: 'number',
417
- },
418
- ],
419
- });
420
-
421
- const icon = ({
422
- show = defaultIcon.show,
423
- mode = defaultIcon.mode,
424
- inner: {
425
- color: innerColor = defaultIcon.inner.color,
426
- radius: innerRadius = defaultIcon.inner.innerRadius,
427
- } = defaultIcon.inner,
428
- outer: {
429
- color: outerColor = defaultIcon.outer.color,
430
- radius: outerRadius = defaultIcon.outer.radius,
431
- } = defaultIcon.outer,
432
- color = defaultIcon.color,
433
- radius = defaultIcon.radius,
434
- image = defaultIcon.image,
435
- size: {
436
- width: imageWidth = defaultIcon.size.width,
437
- height: imageHeight = defaultIcon.size.height,
438
- } = defaultIcon.size,
439
- } = defaultIcon) => ({
440
- name: 'icon',
441
- displayName: '数据标记',
442
- value: [
443
- {
444
- name: 'show',
445
- displayName: '显示',
446
- value: show,
447
- type: 'boolean',
448
- },
449
- {
450
- rule: [['show', '$eq', true]],
451
- name: 'mode',
452
- displayName: '模式',
453
- value: mode,
454
- type: 'select',
455
- config: {
456
- options: [
457
- {
458
- name: '单圆',
459
- value: 'single',
460
- },
461
- {
462
- name: '双圆',
463
- value: 'double',
464
- },
465
- {
466
- name: '自定义',
467
- value: 'custom',
468
- },
469
- ],
470
- },
471
- },
472
- {
473
- rule: [
474
- ['show', '$eq', true],
475
- ['mode', '$eq', 'custom'],
476
- ],
477
- name: 'image',
478
- displayName: '图片',
479
- value: image,
480
- type: 'uploadImage',
481
- },
482
- {
483
- rule: [
484
- ['show', '$eq', true],
485
- ['mode', '$eq', 'custom'],
486
- ],
487
- name: 'size',
488
- displayName: '尺寸',
489
- value: [
490
- {
491
- name: 'width',
492
- displayName: '宽度',
493
- value: imageWidth,
494
- config: {
495
- span: 12,
496
- suffix: 'W',
497
- },
498
- },
499
- {
500
- name: 'height',
501
- displayName: '高度',
502
- value: imageHeight,
503
- config: {
504
- span: 12,
505
- suffix: 'H',
506
- },
507
- },
508
- ],
509
- type: 'group',
510
- },
511
- {
512
- rule: [
513
- ['show', '$eq', true],
514
- ['mode', '$eq', 'double'],
515
- ],
516
- name: 'inner',
517
- displayName: '内圆',
518
- value: [
519
- {
520
- name: 'color',
521
- displayName: '颜色',
522
- value: innerColor,
523
- type: 'color',
524
- },
525
- {
526
- name: 'radius',
527
- displayName: '半径',
528
- value: innerRadius,
529
- type: 'number',
530
- config: {
531
- min: 0,
532
- suffix: 'px',
533
- },
534
- },
535
- ],
536
- },
537
- {
538
- rule: [
539
- ['show', '$eq', true],
540
- ['mode', '$eq', 'double'],
541
- ],
542
- name: 'outer',
543
- displayName: '外圆',
544
- value: [
545
- {
546
- name: 'color',
547
- displayName: '颜色',
548
- value: outerColor,
549
- type: 'color',
550
- },
551
- {
552
- name: 'radius',
553
- displayName: '半径',
554
- value: outerRadius,
555
- type: 'number',
556
- config: {
557
- min: 0,
558
- suffix: 'px',
559
- },
560
- },
561
- ],
562
- },
563
- {
564
- rule: [
565
- ['show', '$eq', true],
566
- ['mode', '$eq', 'single'],
567
- ],
568
- name: 'color',
569
- displayName: '颜色',
570
- value: color,
571
- type: 'color',
572
- markColorType: 'palette',
573
- },
574
- {
575
- rule: [
576
- ['show', '$eq', true],
577
- ['mode', '$eq', 'single'],
578
- ],
579
- name: 'radius',
580
- displayName: '半径',
581
- value: radius,
582
- type: 'number',
583
- config: {
584
- min: 0,
585
- suffix: 'px',
586
- },
587
- },
588
- ],
589
- });
590
- export const lineSeries = (
591
- name = Math.random() + '',
592
- {
593
- mapping: {
594
- fieldName = defaultLineSeries.mapping.fieldName,
595
- displayName = defaultLineSeries.mapping.displayName,
596
- } = defaultLineSeries.mapping,
597
- yOrZ = defaultLineSeries.yOrZ,
598
- line = defaultLineSeries.line,
599
- icon: lineIcon,
600
- label: lineLabel,
601
- } = defaultLineSeries
602
- ) => ({
603
- name,
604
- displayName: '系列',
605
- value: [
606
- mapping({ fieldName, displayName }),
607
- {
608
- name: 'yOrZ',
609
- displayName: '纵轴选择',
610
- value: yOrZ,
611
- type: 'select',
612
- config: {
613
- options: [
614
- { name: 'Y轴', value: 'y' },
615
- { name: 'Z轴', value: 'z' },
616
- ],
617
- },
618
- },
619
- {
620
- name: 'line',
621
- displayName: '折线',
622
- value: commonLine(line),
623
- },
624
- icon(lineIcon),
625
- label(lineLabel),
626
- ],
627
- type: 'object',
628
- });
629
-
630
- export const areaSeries = (
631
- name = Math.random() + '',
632
- {
633
- mapping: {
634
- fieldName = defaultLineSeries.mapping.fieldName,
635
- displayName = defaultLineSeries.mapping.displayName,
636
- } = defaultLineSeries.mapping,
637
- yOrZ = defaultLineSeries.yOrZ,
638
- line: {
639
- type = defaultLineSeries.line.type,
640
- color = defaultLineSeries.line.color,
641
- lineWidth = defaultLineSeries.line.lineWidth,
642
- curve = defaultLineSeries.line.curve,
643
- tension = defaultLineSeries.line.tension,
644
- connectNulls = defaultLineSeries.line.connectNulls,
645
- lighter: lineLighter,
646
- } = defaultLineSeries.line,
647
- label: areaLabel = defaultLineSeries.label,
648
- areaType = defaultLineSeries.areaType,
649
- areaColor = defaultLineSeries.areaColor,
650
- url = defaultLineSeries.url,
651
- size: {
652
- width: urlWidth = defaultLineSeries.size.width,
653
- height: urlHeight = defaultLineSeries.size.height,
654
- } = defaultLineSeries.size,
655
- opacity = defaultLineSeries.opacity,
656
- } = defaultLineSeries
657
- ) => ({
658
- name,
659
- displayName: '系列',
660
- value: [
661
- mapping({ fieldName, displayName }),
662
- {
663
- name: 'yOrZ',
664
- displayName: '纵轴选择',
665
- value: yOrZ,
666
- type: 'select',
667
- config: {
668
- options: [
669
- { name: 'Y轴', value: 'y' },
670
- { name: 'Z轴', value: 'z' },
671
- ],
672
- },
673
- },
674
- {
675
- name: 'areaType',
676
- displayName: '区域样式',
677
- value: areaType,
678
- type: 'radio',
679
- config: {
680
- options: [
681
- { name: '颜色', value: 'color' },
682
- { name: '纹理', value: 'pattern' },
683
- ],
684
- },
685
- },
686
- {
687
- rule: [['areaType', '$eq', 'color']],
688
- name: 'areaColor',
689
- displayName: '区域颜色',
690
- type: 'multicolor',
691
- value: areaColor,
692
- markColorType: 'seriesGradient',
693
- },
694
- {
695
- rule: [['areaType', '$eq', 'pattern']],
696
- name: 'url',
697
- displayName: '纹理图片',
698
- value: url,
699
- type: 'uploadImage',
700
- },
701
- {
702
- rule: [['areaType', '$eq', 'pattern']],
703
- name: 'size',
704
- displayName: '尺寸',
705
- value: [
706
- {
707
- name: 'width',
708
- displayName: '宽度',
709
- value: urlWidth,
710
- config: { span: 12, suffix: 'W' },
711
- },
712
- {
713
- name: 'height',
714
- displayName: '高度',
715
- value: urlHeight,
716
- config: { span: 12, suffix: 'H' },
717
- },
718
- ],
719
- type: 'group',
720
- },
721
- {
722
- rule: [['areaType', '$eq', 'pattern']],
723
- type: 'range',
724
- name: 'opacity',
725
- displayName: '透明度',
726
- value: opacity,
727
- config: { max: 1, min: 0, step: 0.01 },
728
- },
729
- {
730
- name: 'line',
731
- displayName: '折线',
732
- value: [
733
- ...commonLine({
734
- type,
735
- color,
736
- lineWidth,
737
- curve,
738
- tension,
739
- connectNulls,
740
- }),
741
- lineLighter && lighter(lineLighter),
742
- ].filter((item) => !!item),
743
- },
744
- label(areaLabel),
745
- ],
746
- type: 'object',
747
- });
748
-
749
- const defaultPieSeries = {
750
- mapping: _mapping,
751
- color: {
752
- type: 'linear',
753
- pure: '#fff',
754
- linear: {
755
- stops: [
756
- { offset: 0, color: '#fff' },
757
- { offset: 50, color: '#ff0' },
758
- { offset: 100, color: '#f0f' },
759
- ],
760
- angle: 30,
761
- opacity: 1,
762
- },
763
- },
764
- };
765
- export const pieSeries = (
766
- name = Math.random() + '',
767
- {
768
- mapping: {
769
- fieldName = defaultPieSeries.mapping.fieldName,
770
- displayName = defaultPieSeries.mapping.displayName,
771
- } = defaultPieSeries.mapping,
772
- color = defaultPieSeries.color,
773
- currentColor,
774
- } = defaultPieSeries
775
- ) => ({
776
- name: name,
777
- displayName: '系列',
778
- value: [
779
- mapping({ fieldName, displayName }),
780
- {
781
- name: 'color',
782
- displayName: currentColor != undefined ? '默认颜色' : '颜色',
783
- type: 'multicolor',
784
- value: multiColor(color),
785
- markColorType: 'seriesGradient',
786
- },
787
- currentColor != undefined && {
788
- name: 'currentColor',
789
- displayName: '当前颜色',
790
- type: 'multicolor',
791
- value: multiColor(currentColor),
792
- },
793
- ].filter((item) => !!item),
794
- type: 'object',
795
- });
796
-
797
- const defaultPurePieSeries = {
798
- mapping: _mapping,
799
- color: '#fff',
800
- };
801
- export const purePieSeries = (
802
- name = Math.random() + '',
803
- {
804
- mapping: {
805
- fieldName = defaultPurePieSeries.mapping.fieldName,
806
- displayName = defaultPurePieSeries.mapping.displayName,
807
- } = defaultPurePieSeries.mapping,
808
- color = defaultPurePieSeries.color,
809
- } = defaultPurePieSeries
810
- ) => ({
811
- name: name,
812
- displayName: '系列',
813
- value: [
814
- mapping({ fieldName, displayName }),
815
- {
816
- name: 'color',
817
- displayName: '填充',
818
- type: 'color',
819
- value: color,
820
- markColorType: 'palette',
821
- },
822
- ],
823
- type: 'object',
824
- });
1
+ import { mapping, label, multiColor } from '.';
2
+
3
+ const _mapping = { fieldName: '', displayName: '' };
4
+
5
+ const defaultBandSeries = {
6
+ mapping: _mapping,
7
+ yOrZ: 'y',
8
+ fillImage: 'components/static-image/superChart/pattern.png',
9
+ fill: {
10
+ type: 'linear',
11
+ pure: '#fff',
12
+ linear: {
13
+ stops: [
14
+ { offset: 0, color: '#fff' },
15
+ { offset: 50, color: '#ff0' },
16
+ { offset: 100, color: '#f0f' },
17
+ ],
18
+ angle: 30,
19
+ opacity: 1,
20
+ },
21
+ },
22
+ highlight: {
23
+ show: false,
24
+ extent: 'max',
25
+ fill: {
26
+ type: 'linear',
27
+ pure: '#fff',
28
+ linear: {
29
+ stops: [
30
+ { offset: 0, color: '#fff' },
31
+ { offset: 50, color: '#ff0' },
32
+ { offset: 100, color: '#f0f' },
33
+ ],
34
+ angle: 30,
35
+ opacity: 1,
36
+ },
37
+ },
38
+ },
39
+ size: {
40
+ width: 10,
41
+ height: 10,
42
+ },
43
+ opacity: 0.65,
44
+ };
45
+
46
+ export const bandSeries = (
47
+ name = Math.random() + '',
48
+ {
49
+ mapping: {
50
+ fieldName = defaultBandSeries.mapping.fieldName,
51
+ displayName = defaultBandSeries.mapping.displayName,
52
+ } = defaultBandSeries.mapping,
53
+ yOrZ = defaultBandSeries.yOrZ,
54
+ stack,
55
+ patternType,
56
+ fillType,
57
+ fillImage = defaultBandSeries.fillImage,
58
+ patternWidth,
59
+ patternHeight,
60
+ patternImage,
61
+ fill = defaultBandSeries.fill,
62
+ size: {
63
+ width: urlWidth = defaultBandSeries.size.width,
64
+ height: urlHeight = defaultBandSeries.size.height,
65
+ } = defaultBandSeries.size,
66
+ opacity = defaultBandSeries.opacity,
67
+ highlight: {
68
+ show: showHighlight = defaultBandSeries.highlight.show,
69
+ extent: highlightExtent = defaultBandSeries.highlight.extent,
70
+ fill: highlightFill = defaultBandSeries.highlight.fill,
71
+ } = defaultBandSeries.highlight,
72
+ label: bandLabel,
73
+ } = defaultBandSeries
74
+ ) => {
75
+ return {
76
+ name,
77
+ displayName: '系列',
78
+ value: [
79
+ mapping({ fieldName, displayName }),
80
+ {
81
+ name: 'yOrZ',
82
+ displayName: '纵轴选择',
83
+ value: yOrZ,
84
+ type: 'select',
85
+ config: {
86
+ options: [
87
+ { name: 'Y轴', value: 'y' },
88
+ { name: 'Z轴', value: 'z' },
89
+ ],
90
+ },
91
+ },
92
+ stack !== undefined && {
93
+ name: 'stack',
94
+ displayName: '堆叠',
95
+ value: stack,
96
+ type: 'input',
97
+ },
98
+ fillType !== undefined && {
99
+ name: 'fillType',
100
+ displayName: '填充样式',
101
+ value: fillType,
102
+ type: 'radio',
103
+ config: {
104
+ options: [
105
+ { name: '颜色', value: 'color' },
106
+ { name: '纹理', value: 'pattern' },
107
+ ],
108
+ },
109
+ },
110
+ fillType !== undefined && {
111
+ rule: [['fillType', '$eq', 'color']],
112
+ name: 'fill',
113
+ displayName: '颜色',
114
+ type: 'multicolor',
115
+ value: fill,
116
+ markColorType: 'seriesGradient',
117
+
118
+ },
119
+ fillType !== undefined && {
120
+ rule: [['fillType', '$eq', 'pattern']],
121
+ name: 'url',
122
+ displayName: '纹理图片',
123
+ type: 'uploadImage',
124
+ value: fillImage,
125
+ },
126
+ fillType !== undefined && {
127
+ rule: [['fillType', '$eq', 'pattern']],
128
+ name: 'size',
129
+ displayName: '尺寸',
130
+ value: [
131
+ {
132
+ name: 'width',
133
+ displayName: '宽度',
134
+ value: urlWidth,
135
+ config: { span: 12, suffix: 'W' },
136
+ },
137
+ {
138
+ name: 'height',
139
+ displayName: '高度',
140
+ value: urlHeight,
141
+ config: { span: 12, suffix: 'H' },
142
+ },
143
+ ],
144
+ type: 'group',
145
+ },
146
+ fillType !== undefined && {
147
+ rule: [['fillType', '$eq', 'pattern']],
148
+ type: 'range',
149
+ name: 'opacity',
150
+ displayName: '透明度',
151
+ value: opacity,
152
+ config: { max: 1, min: 0, step: 0.01 },
153
+ },
154
+ (patternType !== undefined || fillType === undefined) && {
155
+ name: 'fill',
156
+ displayName: '颜色',
157
+ type: 'multicolor',
158
+ value: fill,
159
+ markColorType: 'seriesGradient',
160
+ },
161
+ patternType !== undefined && {
162
+ name: 'patternType',
163
+ displayName: '纹理类型',
164
+ value: patternType,
165
+ type: 'radio',
166
+ config: {
167
+ options: [
168
+ { name: '默认', value: 'default' },
169
+ { name: '自定义', value: 'custom' },
170
+ ],
171
+ },
172
+ },
173
+ patternImage !== undefined && {
174
+ rule: [['patternType', '$eq', 'custom']],
175
+ name: 'patternImage',
176
+ displayName: '纹理',
177
+ value: patternImage,
178
+ type: 'uploadImage',
179
+ },
180
+ patternWidth !== undefined && {
181
+ name: 'patternWidth',
182
+ displayName: '纹理宽度',
183
+ value: patternWidth,
184
+ type: 'number',
185
+ config: {
186
+ suffix: 'px',
187
+ },
188
+ },
189
+ patternHeight !== undefined && {
190
+ name: 'patternHeight',
191
+ displayName: '纹理高度',
192
+ value: patternHeight,
193
+ type: 'number',
194
+ config: {
195
+ suffix: 'px',
196
+ },
197
+ },
198
+ {
199
+ name: 'highlight',
200
+ displayName: '极值高亮',
201
+ value: [
202
+ {
203
+ name: 'show',
204
+ displayName: '显示',
205
+ type: 'boolean',
206
+ value: showHighlight,
207
+ },
208
+ {
209
+ rule: [['show', '$eq', true]],
210
+ name: 'extent',
211
+ displayName: '极值',
212
+ value: highlightExtent,
213
+ type: 'select',
214
+ config: {
215
+ options: [
216
+ { name: '最大值', value: 'max' },
217
+ { name: '最小值', value: 'min' },
218
+ ],
219
+ },
220
+ },
221
+ {
222
+ rule: [['show', '$eq', true]],
223
+ name: 'fill',
224
+ displayName: '颜色',
225
+ type: 'multicolor',
226
+ value: highlightFill,
227
+ },
228
+ ],
229
+ },
230
+ label(bandLabel),
231
+ ].filter((item) => !!item),
232
+ type: 'object',
233
+ };
234
+ };
235
+
236
+ const defaultLineSeries = {
237
+ mapping: _mapping,
238
+ yOrZ: 'y',
239
+ line: {
240
+ type: 'solid',
241
+ color: '#FFFFFF',
242
+ lineWidth: '1',
243
+ curve: true,
244
+ tension: 0,
245
+ connectNulls: false,
246
+ lighter: {
247
+ show: false,
248
+ fill: {
249
+ type: 'linear',
250
+ pure: '#fff',
251
+ linear: {
252
+ stops: [
253
+ { offset: 0, color: '#fff' },
254
+ { offset: 50, color: '#ff0' },
255
+ { offset: 100, color: '#f0f' },
256
+ ],
257
+ angle: 30,
258
+ opacity: 1,
259
+ },
260
+ },
261
+ length: 200,
262
+ width: 2,
263
+ unitStep: 1,
264
+ },
265
+ },
266
+ areaType: 'color',
267
+ size: {
268
+ width: 10,
269
+ height: 10,
270
+ },
271
+ url: 'components/static-image/superChart/pattern.png',
272
+ opacity: 0.65,
273
+ areaColor: {
274
+ type: 'linear',
275
+ pure: '#fff',
276
+ linear: {
277
+ stops: [
278
+ { offset: 0, color: '#fff' },
279
+ { offset: 50, color: '#ff0' },
280
+ { offset: 100, color: '#f0f' },
281
+ ],
282
+ angle: 30,
283
+ opacity: 1,
284
+ },
285
+ },
286
+ };
287
+ const defaultIcon = {
288
+ show: true,
289
+ mode: 'single',
290
+ inner: { color: '#83C4FF', radius: 3 },
291
+ outer: { color: 'rgba(24,144,255,0.4)', radius: 6 },
292
+ color: '#1283E3',
293
+ radius: 4,
294
+ image: 'components/static-image/superChart/fang.png',
295
+ size: {
296
+ width: 10,
297
+ height: 10,
298
+ },
299
+ };
300
+
301
+ const commonLine = (
302
+ {
303
+ type = defaultLineSeries.line.type,
304
+ color = defaultLineSeries.line.color,
305
+ lineWidth = defaultLineSeries.line.lineWidth,
306
+ curve = defaultLineSeries.line.curve,
307
+ tension = defaultLineSeries.line.tension,
308
+ connectNulls = defaultLineSeries.line.connectNulls,
309
+ } = defaultLineSeries.line
310
+ ) => [
311
+ {
312
+ name: 'type',
313
+ displayName: '类型',
314
+ value: type,
315
+ type: 'select',
316
+ config: {
317
+ options: [
318
+ {
319
+ name: '实线',
320
+ value: 'solid',
321
+ },
322
+ {
323
+ name: '虚线',
324
+ value: 'dash',
325
+ },
326
+ ],
327
+ },
328
+ },
329
+ {
330
+ name: 'color',
331
+ displayName: '颜色',
332
+ value: color,
333
+ type: 'color',
334
+ markColorType: 'palette',
335
+ },
336
+ {
337
+ name: 'lineWidth',
338
+ displayName: '粗细',
339
+ value: lineWidth,
340
+ type: 'input',
341
+ config: {
342
+ suffix: 'px',
343
+ },
344
+ },
345
+ {
346
+ name: 'curve',
347
+ displayName: '曲线',
348
+ value: curve,
349
+ type: 'boolean',
350
+ },
351
+ {
352
+ rule: [['curve', '$eq', true]],
353
+ name: 'tension',
354
+ displayName: '曲线张力',
355
+ value: tension,
356
+ type: 'range',
357
+ config: {
358
+ min: 0,
359
+ max: 1,
360
+ step: 0.1,
361
+ },
362
+ },
363
+ {
364
+ name: 'connectNulls',
365
+ displayName: 'null值连接',
366
+ value: connectNulls,
367
+ type: 'boolean',
368
+ },
369
+ ];
370
+
371
+ const lighter = (
372
+ {
373
+ show = defaultLineSeries.line.lighter.show,
374
+ fill = defaultLineSeries.line.lighter.fill,
375
+ length = defaultLineSeries.line.lighter.length,
376
+ width = defaultLineSeries.line.lighter.width,
377
+ unitStep = defaultLineSeries.line.lighter.unitStep,
378
+ } = defaultLineSeries.line.lighter
379
+ ) => ({
380
+ name: 'lighter',
381
+ displayName: '光效',
382
+ value: [
383
+ {
384
+ name: 'show',
385
+ displayName: '显示',
386
+ value: show,
387
+ type: 'boolean',
388
+ },
389
+ {
390
+ rule: [['show', '$eq', true]],
391
+ name: 'fill',
392
+ displayName: '颜色',
393
+ type: 'multicolor',
394
+ value: fill,
395
+ markColorType: 'seriesGradient',
396
+ },
397
+ {
398
+ rule: [['show', '$eq', true]],
399
+ name: 'length',
400
+ displayName: '长度',
401
+ value: length,
402
+ type: 'number',
403
+ },
404
+ {
405
+ rule: [['show', '$eq', true]],
406
+ name: 'width',
407
+ displayName: '宽度',
408
+ value: width,
409
+ type: 'number',
410
+ },
411
+ {
412
+ rule: [['show', '$eq', true]],
413
+ name: 'unitStep',
414
+ displayName: '速度',
415
+ value: unitStep,
416
+ type: 'number',
417
+ },
418
+ ],
419
+ });
420
+
421
+ const icon = ({
422
+ show = defaultIcon.show,
423
+ mode = defaultIcon.mode,
424
+ inner: {
425
+ color: innerColor = defaultIcon.inner.color,
426
+ radius: innerRadius = defaultIcon.inner.innerRadius,
427
+ } = defaultIcon.inner,
428
+ outer: {
429
+ color: outerColor = defaultIcon.outer.color,
430
+ radius: outerRadius = defaultIcon.outer.radius,
431
+ } = defaultIcon.outer,
432
+ color = defaultIcon.color,
433
+ radius = defaultIcon.radius,
434
+ image = defaultIcon.image,
435
+ size: {
436
+ width: imageWidth = defaultIcon.size.width,
437
+ height: imageHeight = defaultIcon.size.height,
438
+ } = defaultIcon.size,
439
+ } = defaultIcon) => ({
440
+ name: 'icon',
441
+ displayName: '数据标记',
442
+ value: [
443
+ {
444
+ name: 'show',
445
+ displayName: '显示',
446
+ value: show,
447
+ type: 'boolean',
448
+ },
449
+ {
450
+ rule: [['show', '$eq', true]],
451
+ name: 'mode',
452
+ displayName: '模式',
453
+ value: mode,
454
+ type: 'select',
455
+ config: {
456
+ options: [
457
+ {
458
+ name: '单圆',
459
+ value: 'single',
460
+ },
461
+ {
462
+ name: '双圆',
463
+ value: 'double',
464
+ },
465
+ {
466
+ name: '自定义',
467
+ value: 'custom',
468
+ },
469
+ ],
470
+ },
471
+ },
472
+ {
473
+ rule: [
474
+ ['show', '$eq', true],
475
+ ['mode', '$eq', 'custom'],
476
+ ],
477
+ name: 'image',
478
+ displayName: '图片',
479
+ value: image,
480
+ type: 'uploadImage',
481
+ },
482
+ {
483
+ rule: [
484
+ ['show', '$eq', true],
485
+ ['mode', '$eq', 'custom'],
486
+ ],
487
+ name: 'size',
488
+ displayName: '尺寸',
489
+ value: [
490
+ {
491
+ name: 'width',
492
+ displayName: '宽度',
493
+ value: imageWidth,
494
+ config: {
495
+ span: 12,
496
+ suffix: 'W',
497
+ },
498
+ },
499
+ {
500
+ name: 'height',
501
+ displayName: '高度',
502
+ value: imageHeight,
503
+ config: {
504
+ span: 12,
505
+ suffix: 'H',
506
+ },
507
+ },
508
+ ],
509
+ type: 'group',
510
+ },
511
+ {
512
+ rule: [
513
+ ['show', '$eq', true],
514
+ ['mode', '$eq', 'double'],
515
+ ],
516
+ name: 'inner',
517
+ displayName: '内圆',
518
+ value: [
519
+ {
520
+ name: 'color',
521
+ displayName: '颜色',
522
+ value: innerColor,
523
+ type: 'color',
524
+ },
525
+ {
526
+ name: 'radius',
527
+ displayName: '半径',
528
+ value: innerRadius,
529
+ type: 'number',
530
+ config: {
531
+ min: 0,
532
+ suffix: 'px',
533
+ },
534
+ },
535
+ ],
536
+ },
537
+ {
538
+ rule: [
539
+ ['show', '$eq', true],
540
+ ['mode', '$eq', 'double'],
541
+ ],
542
+ name: 'outer',
543
+ displayName: '外圆',
544
+ value: [
545
+ {
546
+ name: 'color',
547
+ displayName: '颜色',
548
+ value: outerColor,
549
+ type: 'color',
550
+ },
551
+ {
552
+ name: 'radius',
553
+ displayName: '半径',
554
+ value: outerRadius,
555
+ type: 'number',
556
+ config: {
557
+ min: 0,
558
+ suffix: 'px',
559
+ },
560
+ },
561
+ ],
562
+ },
563
+ {
564
+ rule: [
565
+ ['show', '$eq', true],
566
+ ['mode', '$eq', 'single'],
567
+ ],
568
+ name: 'color',
569
+ displayName: '颜色',
570
+ value: color,
571
+ type: 'color',
572
+ markColorType: 'palette',
573
+ },
574
+ {
575
+ rule: [
576
+ ['show', '$eq', true],
577
+ ['mode', '$eq', 'single'],
578
+ ],
579
+ name: 'radius',
580
+ displayName: '半径',
581
+ value: radius,
582
+ type: 'number',
583
+ config: {
584
+ min: 0,
585
+ suffix: 'px',
586
+ },
587
+ },
588
+ ],
589
+ });
590
+ export const lineSeries = (
591
+ name = Math.random() + '',
592
+ {
593
+ mapping: {
594
+ fieldName = defaultLineSeries.mapping.fieldName,
595
+ displayName = defaultLineSeries.mapping.displayName,
596
+ } = defaultLineSeries.mapping,
597
+ yOrZ = defaultLineSeries.yOrZ,
598
+ line = defaultLineSeries.line,
599
+ icon: lineIcon,
600
+ label: lineLabel,
601
+ } = defaultLineSeries
602
+ ) => ({
603
+ name,
604
+ displayName: '系列',
605
+ value: [
606
+ mapping({ fieldName, displayName }),
607
+ {
608
+ name: 'yOrZ',
609
+ displayName: '纵轴选择',
610
+ value: yOrZ,
611
+ type: 'select',
612
+ config: {
613
+ options: [
614
+ { name: 'Y轴', value: 'y' },
615
+ { name: 'Z轴', value: 'z' },
616
+ ],
617
+ },
618
+ },
619
+ {
620
+ name: 'line',
621
+ displayName: '折线',
622
+ value: commonLine(line),
623
+ },
624
+ icon(lineIcon),
625
+ label(lineLabel),
626
+ ],
627
+ type: 'object',
628
+ });
629
+
630
+ export const areaSeries = (
631
+ name = Math.random() + '',
632
+ {
633
+ mapping: {
634
+ fieldName = defaultLineSeries.mapping.fieldName,
635
+ displayName = defaultLineSeries.mapping.displayName,
636
+ } = defaultLineSeries.mapping,
637
+ yOrZ = defaultLineSeries.yOrZ,
638
+ line: {
639
+ type = defaultLineSeries.line.type,
640
+ color = defaultLineSeries.line.color,
641
+ lineWidth = defaultLineSeries.line.lineWidth,
642
+ curve = defaultLineSeries.line.curve,
643
+ tension = defaultLineSeries.line.tension,
644
+ connectNulls = defaultLineSeries.line.connectNulls,
645
+ lighter: lineLighter,
646
+ } = defaultLineSeries.line,
647
+ label: areaLabel = defaultLineSeries.label,
648
+ areaType = defaultLineSeries.areaType,
649
+ areaColor = defaultLineSeries.areaColor,
650
+ url = defaultLineSeries.url,
651
+ size: {
652
+ width: urlWidth = defaultLineSeries.size.width,
653
+ height: urlHeight = defaultLineSeries.size.height,
654
+ } = defaultLineSeries.size,
655
+ opacity = defaultLineSeries.opacity,
656
+ } = defaultLineSeries
657
+ ) => ({
658
+ name,
659
+ displayName: '系列',
660
+ value: [
661
+ mapping({ fieldName, displayName }),
662
+ {
663
+ name: 'yOrZ',
664
+ displayName: '纵轴选择',
665
+ value: yOrZ,
666
+ type: 'select',
667
+ config: {
668
+ options: [
669
+ { name: 'Y轴', value: 'y' },
670
+ { name: 'Z轴', value: 'z' },
671
+ ],
672
+ },
673
+ },
674
+ {
675
+ name: 'areaType',
676
+ displayName: '区域样式',
677
+ value: areaType,
678
+ type: 'radio',
679
+ config: {
680
+ options: [
681
+ { name: '颜色', value: 'color' },
682
+ { name: '纹理', value: 'pattern' },
683
+ ],
684
+ },
685
+ },
686
+ {
687
+ rule: [['areaType', '$eq', 'color']],
688
+ name: 'areaColor',
689
+ displayName: '区域颜色',
690
+ type: 'multicolor',
691
+ value: areaColor,
692
+ markColorType: 'seriesGradient',
693
+ },
694
+ {
695
+ rule: [['areaType', '$eq', 'pattern']],
696
+ name: 'url',
697
+ displayName: '纹理图片',
698
+ value: url,
699
+ type: 'uploadImage',
700
+ },
701
+ {
702
+ rule: [['areaType', '$eq', 'pattern']],
703
+ name: 'size',
704
+ displayName: '尺寸',
705
+ value: [
706
+ {
707
+ name: 'width',
708
+ displayName: '宽度',
709
+ value: urlWidth,
710
+ config: { span: 12, suffix: 'W' },
711
+ },
712
+ {
713
+ name: 'height',
714
+ displayName: '高度',
715
+ value: urlHeight,
716
+ config: { span: 12, suffix: 'H' },
717
+ },
718
+ ],
719
+ type: 'group',
720
+ },
721
+ {
722
+ rule: [['areaType', '$eq', 'pattern']],
723
+ type: 'range',
724
+ name: 'opacity',
725
+ displayName: '透明度',
726
+ value: opacity,
727
+ config: { max: 1, min: 0, step: 0.01 },
728
+ },
729
+ {
730
+ name: 'line',
731
+ displayName: '折线',
732
+ value: [
733
+ ...commonLine({
734
+ type,
735
+ color,
736
+ lineWidth,
737
+ curve,
738
+ tension,
739
+ connectNulls,
740
+ }),
741
+ lineLighter && lighter(lineLighter),
742
+ ].filter((item) => !!item),
743
+ },
744
+ label(areaLabel),
745
+ ],
746
+ type: 'object',
747
+ });
748
+
749
+ const defaultPieSeries = {
750
+ mapping: _mapping,
751
+ color: {
752
+ type: 'linear',
753
+ pure: '#fff',
754
+ linear: {
755
+ stops: [
756
+ { offset: 0, color: '#fff' },
757
+ { offset: 50, color: '#ff0' },
758
+ { offset: 100, color: '#f0f' },
759
+ ],
760
+ angle: 30,
761
+ opacity: 1,
762
+ },
763
+ },
764
+ };
765
+ export const pieSeries = (
766
+ name = Math.random() + '',
767
+ {
768
+ mapping: {
769
+ fieldName = defaultPieSeries.mapping.fieldName,
770
+ displayName = defaultPieSeries.mapping.displayName,
771
+ } = defaultPieSeries.mapping,
772
+ color = defaultPieSeries.color,
773
+ currentColor,
774
+ } = defaultPieSeries
775
+ ) => ({
776
+ name: name,
777
+ displayName: '系列',
778
+ value: [
779
+ mapping({ fieldName, displayName }),
780
+ {
781
+ name: 'color',
782
+ displayName: currentColor != undefined ? '默认颜色' : '颜色',
783
+ type: 'multicolor',
784
+ value: multiColor(color),
785
+ markColorType: 'seriesGradient',
786
+ },
787
+ currentColor != undefined && {
788
+ name: 'currentColor',
789
+ displayName: '当前颜色',
790
+ type: 'multicolor',
791
+ value: multiColor(currentColor),
792
+ },
793
+ ].filter((item) => !!item),
794
+ type: 'object',
795
+ });
796
+
797
+ const defaultPurePieSeries = {
798
+ mapping: _mapping,
799
+ color: '#fff',
800
+ };
801
+ export const purePieSeries = (
802
+ name = Math.random() + '',
803
+ {
804
+ mapping: {
805
+ fieldName = defaultPurePieSeries.mapping.fieldName,
806
+ displayName = defaultPurePieSeries.mapping.displayName,
807
+ } = defaultPurePieSeries.mapping,
808
+ color = defaultPurePieSeries.color,
809
+ } = defaultPurePieSeries
810
+ ) => ({
811
+ name: name,
812
+ displayName: '系列',
813
+ value: [
814
+ mapping({ fieldName, displayName }),
815
+ {
816
+ name: 'color',
817
+ displayName: '填充',
818
+ type: 'color',
819
+ value: color,
820
+ markColorType: 'palette',
821
+ },
822
+ ],
823
+ type: 'object',
824
+ });