@easyv/config 1.1.6 → 1.1.9

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