@gm-pc/vision 1.27.0 → 1.27.1-beta.0

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.
Files changed (30) hide show
  1. package/package.json +2 -2
  2. package/src/chart/bar/components/table_chart.tsx +106 -106
  3. package/src/chart/bar/core/config.ts +259 -257
  4. package/src/chart/bar/core/index.ts +9 -9
  5. package/src/chart/bar/core/utils.ts +8 -8
  6. package/src/chart/bar/index.less +132 -132
  7. package/src/chart/bar/index.tsx +18 -18
  8. package/src/chart/bar/stories.tsx +420 -420
  9. package/src/chart/base/index.ts +139 -135
  10. package/src/chart/line/core/config.ts +211 -209
  11. package/src/chart/line/core/index.ts +9 -9
  12. package/src/chart/line/core/utils.ts +49 -49
  13. package/src/chart/line/index.tsx +12 -12
  14. package/src/chart/line/stories.tsx +234 -234
  15. package/src/chart/pie/core/config.ts +199 -199
  16. package/src/chart/pie/core/index.ts +9 -9
  17. package/src/chart/pie/index.tsx +12 -12
  18. package/src/chart/pie/stories.tsx +39 -39
  19. package/src/common/hooks/useChart.ts +40 -40
  20. package/src/common/utils/dom.ts +22 -22
  21. package/src/index.ts +11 -11
  22. package/src/theme/index.ts +8 -8
  23. package/src/theme/ocean/chart.ts +40 -40
  24. package/src/theme/ocean/index.ts +495 -495
  25. package/src/theme/sunset/chart.ts +40 -40
  26. package/src/theme/sunset/index.ts +495 -495
  27. package/src/theme/utils/create-style-by-sheet.ts +1303 -1303
  28. package/src/types/common.ts +41 -41
  29. package/src/types/theme.ts +552 -552
  30. package/tsconfig.json +3 -3
package/src/theme/utils/create-style-by-sheet.ts CHANGED
@@ -1,1303 +1,1303 @@
1
- import * as TOOLTIP_CSS_CONST from '@antv/component/lib/tooltip/css-const'
2
- import { deepMix } from '@antv/util'
3
- import { LooseObject, StyleSheet } from '../../types/theme'
4
-
5
- /**
6
- * 根据样式表创建 axis 组件主题样式
7
- * @param styleSheet
8
- */
9
- function createAxisStyles<T>(styleSheet: StyleSheet<T>): LooseObject {
10
- return {
11
- title: {
12
- autoRotate: true,
13
- position: 'center', // start, center, end
14
- spacing: styleSheet.axisTitleSpacing,
15
- style: {
16
- fill: styleSheet.axisTitleTextFillColor,
17
- fontSize: styleSheet.axisTitleTextFontSize,
18
- lineHeight: styleSheet.axisTitleTextLineHeight,
19
- textBaseline: 'middle',
20
- fontFamily: styleSheet.fontFamily,
21
- },
22
- },
23
- label: {
24
- autoRotate: true,
25
- autoEllipsis: true,
26
- autoHide: true,
27
- offset: styleSheet.axisLabelOffset,
28
- style: {
29
- fill: styleSheet.axisLabelFillColor,
30
- fontSize: styleSheet.axisLabelFontSize,
31
- lineHeight: styleSheet.axisLabelLineHeight,
32
- fontFamily: styleSheet.fontFamily,
33
- },
34
- },
35
- line: {
36
- style: {
37
- lineWidth: styleSheet.axisLineBorder,
38
- stroke: styleSheet.axisLineBorderColor,
39
- },
40
- },
41
- grid: {
42
- line: {
43
- type: 'line',
44
- style: {
45
- stroke: styleSheet.axisGridBorderColor,
46
- lineWidth: styleSheet.axisGridBorder,
47
- lineDash: styleSheet.axisGridLineDash,
48
- },
49
- },
50
- alignTick: true,
51
- animate: true,
52
- },
53
- tickLine: {
54
- style: {
55
- lineWidth: styleSheet.axisTickLineBorder,
56
- stroke: styleSheet.axisTickLineBorderColor,
57
- },
58
- alignTick: true, // 默认刻度线和文本对齐
59
- length: styleSheet.axisTickLineLength,
60
- },
61
- subTickLine: null,
62
- animate: true,
63
- }
64
- }
65
-
66
- /**
67
- *
68
- * @param styleSheet
69
- */
70
- // export function
71
-
72
- /**
73
- * 根据样式表创建 legend 组件主题样式
74
- * @param styleSheet
75
- */
76
- function createLegendStyles<T>(styleSheet: StyleSheet<T>): LooseObject {
77
- return {
78
- title: null,
79
- marker: {
80
- symbol: 'circle',
81
- spacing: styleSheet.legendMarkerSpacing,
82
- style: {
83
- r: styleSheet.legendCircleMarkerSize,
84
- fill: styleSheet.legendMarkerColor,
85
- },
86
- },
87
- itemName: {
88
- spacing: 5, // 如果右边有 value 使用这个间距
89
- style: {
90
- fill: styleSheet.legendItemNameFillColor,
91
- fontFamily: styleSheet.fontFamily,
92
- fontSize: styleSheet.legendItemNameFontSize,
93
- lineHeight: styleSheet.legendItemNameLineHeight,
94
- fontWeight: styleSheet.legendItemNameFontWeight,
95
- textAlign: 'start',
96
- textBaseline: 'middle',
97
- },
98
- },
99
- flipPage: true,
100
- animate: false,
101
- maxItemWidth: 200,
102
- itemSpacing: styleSheet.legendItemSpacing,
103
- itemMarginBottom: styleSheet.legendItemMarginBottom,
104
- padding: styleSheet.legendPadding, // 图例组件自己的外边距
105
- }
106
- }
107
-
108
- /**
109
- * 根据主题样式表生成主题结构
110
- * @param styleSheet 主题样式表
111
- */
112
- export function createThemeByStyleSheet<T>(styleSheet: StyleSheet<T>): LooseObject {
113
- const shapeStyles = {
114
- point: {
115
- default: {
116
- fill: styleSheet.pointFillColor,
117
- r: styleSheet.pointSize,
118
- stroke: styleSheet.pointBorderColor,
119
- lineWidth: styleSheet.pointBorder,
120
- fillOpacity: styleSheet.pointFillOpacity,
121
- },
122
- active: {
123
- stroke: styleSheet.pointActiveBorderColor,
124
- lineWidth: styleSheet.pointActiveBorder,
125
- },
126
- selected: {
127
- stroke: styleSheet.pointSelectedBorderColor,
128
- lineWidth: styleSheet.pointSelectedBorder,
129
- },
130
- inactive: {
131
- fillOpacity: styleSheet.pointInactiveFillOpacity,
132
- strokeOpacity: styleSheet.pointInactiveBorderOpacity,
133
- },
134
- },
135
- hollowPoint: {
136
- default: {
137
- fill: styleSheet.hollowPointFillColor,
138
- lineWidth: styleSheet.hollowPointBorder,
139
- stroke: styleSheet.hollowPointBorderColor,
140
- strokeOpacity: styleSheet.hollowPointBorderOpacity,
141
- r: styleSheet.hollowPointSize,
142
- },
143
- active: {
144
- stroke: styleSheet.hollowPointActiveBorderColor,
145
- strokeOpacity: styleSheet.hollowPointActiveBorderOpacity,
146
- },
147
- selected: {
148
- lineWidth: styleSheet.hollowPointSelectedBorder,
149
- stroke: styleSheet.hollowPointSelectedBorderColor,
150
- strokeOpacity: styleSheet.hollowPointSelectedBorderOpacity,
151
- },
152
- inactive: {
153
- strokeOpacity: styleSheet.hollowPointInactiveBorderOpacity,
154
- },
155
- },
156
- area: {
157
- default: {
158
- fill: styleSheet.areaFillColor,
159
- fillOpacity: styleSheet.areaFillOpacity,
160
- stroke: null,
161
- },
162
- active: {
163
- fillOpacity: styleSheet.areaActiveFillOpacity,
164
- },
165
- selected: {
166
- fillOpacity: styleSheet.areaSelectedFillOpacity,
167
- },
168
- inactive: {
169
- fillOpacity: styleSheet.areaInactiveFillOpacity,
170
- },
171
- },
172
- hollowArea: {
173
- default: {
174
- fill: null,
175
- stroke: styleSheet.hollowAreaBorderColor,
176
- lineWidth: styleSheet.hollowAreaBorder,
177
- strokeOpacity: styleSheet.hollowAreaBorderOpacity,
178
- },
179
- active: {
180
- fill: null,
181
- lineWidth: styleSheet.hollowAreaActiveBorder,
182
- },
183
- selected: {
184
- fill: null,
185
- lineWidth: styleSheet.hollowAreaSelectedBorder,
186
- },
187
- inactive: {
188
- strokeOpacity: styleSheet.hollowAreaInactiveBorderOpacity,
189
- },
190
- },
191
- interval: {
192
- default: {
193
- fill: styleSheet.intervalFillColor,
194
- fillOpacity: styleSheet.intervalFillOpacity,
195
- },
196
- active: {
197
- stroke: styleSheet.intervalActiveBorderColor,
198
- lineWidth: styleSheet.intervalActiveBorder,
199
- },
200
- selected: {
201
- stroke: styleSheet.intervalSelectedBorderColor,
202
- lineWidth: styleSheet.intervalSelectedBorder,
203
- },
204
- inactive: {
205
- fillOpacity: styleSheet.intervalInactiveFillOpacity,
206
- strokeOpacity: styleSheet.intervalInactiveBorderOpacity,
207
- },
208
- },
209
- hollowInterval: {
210
- default: {
211
- fill: styleSheet.hollowIntervalFillColor,
212
- stroke: styleSheet.hollowIntervalBorderColor,
213
- lineWidth: styleSheet.hollowIntervalBorder,
214
- strokeOpacity: styleSheet.hollowIntervalBorderOpacity,
215
- },
216
- active: {
217
- stroke: styleSheet.hollowIntervalActiveBorderColor,
218
- lineWidth: styleSheet.hollowIntervalActiveBorder,
219
- strokeOpacity: styleSheet.hollowIntervalActiveBorderOpacity,
220
- },
221
- selected: {
222
- stroke: styleSheet.hollowIntervalSelectedBorderColor,
223
- lineWidth: styleSheet.hollowIntervalSelectedBorder,
224
- strokeOpacity: styleSheet.hollowIntervalSelectedBorderOpacity,
225
- },
226
- inactive: {
227
- stroke: styleSheet.hollowIntervalInactiveBorderColor,
228
- lineWidth: styleSheet.hollowIntervalInactiveBorder,
229
- strokeOpacity: styleSheet.hollowIntervalInactiveBorderOpacity,
230
- },
231
- },
232
- line: {
233
- default: {
234
- stroke: styleSheet.lineBorderColor,
235
- lineWidth: styleSheet.lineBorder,
236
- strokeOpacity: styleSheet.lineBorderOpacity,
237
- fill: null,
238
- lineAppendWidth: 10,
239
- lineCap: 'round',
240
- lineJoin: 'round',
241
- },
242
- active: {
243
- lineWidth: styleSheet.lineActiveBorder,
244
- },
245
- selected: {
246
- lineWidth: styleSheet.lineSelectedBorder,
247
- },
248
- inactive: {
249
- strokeOpacity: styleSheet.lineInactiveBorderOpacity,
250
- },
251
- },
252
- }
253
- const axisStyles = createAxisStyles(styleSheet)
254
- const legendStyles = createLegendStyles(styleSheet)
255
-
256
- return {
257
- background: styleSheet.backgroundColor,
258
- defaultColor: styleSheet.brandColor,
259
- padding: 'auto',
260
- fontFamily: styleSheet.fontFamily,
261
- // 兼容Theme配置
262
- /** 一般柱状图宽度占比，geometry中已添加默认值，为了geometry配置生效默认值为null */
263
- columnWidthRatio: 1 / 2,
264
- /** 柱状图最大宽度 */
265
- maxColumnWidth: null,
266
- /** 柱状图最小宽度 */
267
- minColumnWidth: null,
268
- /** 玫瑰图占比 */
269
- roseWidthRatio: 0.9999999,
270
- /** 多层饼图/环图占比 */
271
- multiplePieWidthRatio: 1 / 1.3,
272
- colors10: styleSheet.paletteQualitative10,
273
- colors20: styleSheet.paletteQualitative20,
274
- shapes: {
275
- point: [
276
- 'hollow-circle',
277
- 'hollow-square',
278
- 'hollow-bowtie',
279
- 'hollow-diamond',
280
- 'hollow-hexagon',
281
- 'hollow-triangle',
282
- 'hollow-triangle-down',
283
- 'circle',
284
- 'square',
285
- 'bowtie',
286
- 'diamond',
287
- 'hexagon',
288
- 'triangle',
289
- 'triangle-down',
290
- 'cross',
291
- 'tick',
292
- 'plus',
293
- 'hyphen',
294
- 'line',
295
- ],
296
- line: ['line', 'dash', 'dot', 'smooth'],
297
- area: ['area', 'smooth', 'line', 'smooth-line'],
298
- interval: ['rect', 'hollow-rect', 'line', 'tick'],
299
- },
300
- sizes: [1, 10],
301
- geometries: {
302
- interval: {
303
- rect: {
304
- default: {
305
- style: shapeStyles.interval.default,
306
- },
307
- active: {
308
- style: shapeStyles.interval.active,
309
- },
310
- inactive: {
311
- style: shapeStyles.interval.inactive,
312
- },
313
- // selected: {
314
- // style: (element: Element) => {
315
- // const coordinate = element.geometry.coordinate
316
- // if (coordinate.isPolar && coordinate.isTransposed) {
317
- // const { startAngle, endAngle } = getAngle(element.getModel(), coordinate)
318
- // const middleAngle = (startAngle + endAngle) / 2
319
- // const r = 7.5
320
- // const x = r * Math.cos(middleAngle)
321
- // const y = r * Math.sin(middleAngle)
322
- // return {
323
- // matrix: ext.transform(null, [['t', x, y]]),
324
- // }
325
- // }
326
- // return shapeStyles.interval.selected
327
- // },
328
- // },
329
- },
330
- 'hollow-rect': {
331
- default: {
332
- style: shapeStyles.hollowInterval.default,
333
- },
334
- active: {
335
- style: shapeStyles.hollowInterval.active,
336
- },
337
- inactive: {
338
- style: shapeStyles.hollowInterval.inactive,
339
- },
340
- selected: {
341
- style: shapeStyles.hollowInterval.selected,
342
- },
343
- },
344
- line: {
345
- default: {
346
- style: shapeStyles.hollowInterval.default,
347
- },
348
- active: {
349
- style: shapeStyles.hollowInterval.active,
350
- },
351
- inactive: {
352
- style: shapeStyles.hollowInterval.inactive,
353
- },
354
- selected: {
355
- style: shapeStyles.hollowInterval.selected,
356
- },
357
- },
358
- tick: {
359
- default: {
360
- style: shapeStyles.hollowInterval.default,
361
- },
362
- active: {
363
- style: shapeStyles.hollowInterval.active,
364
- },
365
- inactive: {
366
- style: shapeStyles.hollowInterval.inactive,
367
- },
368
- selected: {
369
- style: shapeStyles.hollowInterval.selected,
370
- },
371
- },
372
- funnel: {
373
- default: {
374
- style: shapeStyles.interval.default,
375
- },
376
- active: {
377
- style: shapeStyles.interval.active,
378
- },
379
- inactive: {
380
- style: shapeStyles.interval.inactive,
381
- },
382
- selected: {
383
- style: shapeStyles.interval.selected,
384
- },
385
- },
386
- pyramid: {
387
- default: {
388
- style: shapeStyles.interval.default,
389
- },
390
- active: {
391
- style: shapeStyles.interval.active,
392
- },
393
- inactive: {
394
- style: shapeStyles.interval.inactive,
395
- },
396
- selected: {
397
- style: shapeStyles.interval.selected,
398
- },
399
- },
400
- },
401
- line: {
402
- line: {
403
- default: {
404
- style: shapeStyles.line.default,
405
- },
406
- active: {
407
- style: shapeStyles.line.active,
408
- },
409
- inactive: {
410
- style: shapeStyles.line.inactive,
411
- },
412
- selected: {
413
- style: shapeStyles.line.selected,
414
- },
415
- },
416
- dot: {
417
- default: {
418
- style: {
419
- ...shapeStyles.line.default,
420
- lineDash: [1, 1],
421
- },
422
- },
423
- active: {
424
- style: {
425
- ...shapeStyles.line.active,
426
- lineDash: [1, 1],
427
- },
428
- },
429
- inactive: {
430
- style: {
431
- ...shapeStyles.line.inactive,
432
- lineDash: [1, 1],
433
- },
434
- },
435
- selected: {
436
- style: {
437
- ...shapeStyles.line.selected,
438
- lineDash: [1, 1],
439
- },
440
- },
441
- },
442
- dash: {
443
- default: {
444
- style: {
445
- ...shapeStyles.line.default,
446
- lineDash: [5.5, 1],
447
- },
448
- },
449
- active: {
450
- style: {
451
- ...shapeStyles.line.active,
452
- lineDash: [5.5, 1],
453
- },
454
- },
455
- inactive: {
456
- style: {
457
- ...shapeStyles.line.inactive,
458
- lineDash: [5.5, 1],
459
- },
460
- },
461
- selected: {
462
- style: {
463
- ...shapeStyles.line.selected,
464
- lineDash: [5.5, 1],
465
- },
466
- },
467
- },
468
- smooth: {
469
- default: {
470
- style: shapeStyles.line.default,
471
- },
472
- active: {
473
- style: shapeStyles.line.active,
474
- },
475
- inactive: {
476
- style: shapeStyles.line.inactive,
477
- },
478
- selected: {
479
- style: shapeStyles.line.selected,
480
- },
481
- },
482
- hv: {
483
- default: {
484
- style: shapeStyles.line.default,
485
- },
486
- active: {
487
- style: shapeStyles.line.active,
488
- },
489
- inactive: {
490
- style: shapeStyles.line.inactive,
491
- },
492
- selected: {
493
- style: shapeStyles.line.selected,
494
- },
495
- },
496
- vh: {
497
- default: {
498
- style: shapeStyles.line.default,
499
- },
500
- active: {
501
- style: shapeStyles.line.active,
502
- },
503
- inactive: {
504
- style: shapeStyles.line.inactive,
505
- },
506
- selected: {
507
- style: shapeStyles.line.selected,
508
- },
509
- },
510
- hvh: {
511
- default: {
512
- style: shapeStyles.line.default,
513
- },
514
- active: {
515
- style: shapeStyles.line.active,
516
- },
517
- inactive: {
518
- style: shapeStyles.line.inactive,
519
- },
520
- selected: {
521
- style: shapeStyles.line.selected,
522
- },
523
- },
524
- vhv: {
525
- default: {
526
- style: shapeStyles.line.default,
527
- },
528
- active: {
529
- style: shapeStyles.line.active,
530
- },
531
- inactive: {
532
- style: shapeStyles.line.inactive,
533
- },
534
- selected: {
535
- style: shapeStyles.line.selected,
536
- },
537
- },
538
- },
539
- polygon: {
540
- polygon: {
541
- default: {
542
- style: shapeStyles.interval.default,
543
- },
544
- active: {
545
- style: shapeStyles.interval.active,
546
- },
547
- inactive: {
548
- style: shapeStyles.interval.inactive,
549
- },
550
- selected: {
551
- style: shapeStyles.interval.selected,
552
- },
553
- },
554
- },
555
- point: {
556
- circle: {
557
- default: {
558
- style: shapeStyles.point.default,
559
- },
560
- active: {
561
- style: shapeStyles.point.active,
562
- },
563
- inactive: {
564
- style: shapeStyles.point.inactive,
565
- },
566
- selected: {
567
- style: shapeStyles.point.selected,
568
- },
569
- },
570
- square: {
571
- default: {
572
- style: shapeStyles.point.default,
573
- },
574
- active: {
575
- style: shapeStyles.point.active,
576
- },
577
- inactive: {
578
- style: shapeStyles.point.inactive,
579
- },
580
- selected: {
581
- style: shapeStyles.point.selected,
582
- },
583
- },
584
- bowtie: {
585
- default: {
586
- style: shapeStyles.point.default,
587
- },
588
- active: {
589
- style: shapeStyles.point.active,
590
- },
591
- inactive: {
592
- style: shapeStyles.point.inactive,
593
- },
594
- selected: {
595
- style: shapeStyles.point.selected,
596
- },
597
- },
598
- diamond: {
599
- default: {
600
- style: shapeStyles.point.default,
601
- },
602
- active: {
603
- style: shapeStyles.point.active,
604
- },
605
- inactive: {
606
- style: shapeStyles.point.inactive,
607
- },
608
- selected: {
609
- style: shapeStyles.point.selected,
610
- },
611
- },
612
- hexagon: {
613
- default: {
614
- style: shapeStyles.point.default,
615
- },
616
- active: {
617
- style: shapeStyles.point.active,
618
- },
619
- inactive: {
620
- style: shapeStyles.point.inactive,
621
- },
622
- selected: {
623
- style: shapeStyles.point.selected,
624
- },
625
- },
626
- triangle: {
627
- default: {
628
- style: shapeStyles.point.default,
629
- },
630
- active: {
631
- style: shapeStyles.point.active,
632
- },
633
- inactive: {
634
- style: shapeStyles.point.inactive,
635
- },
636
- selected: {
637
- style: shapeStyles.point.selected,
638
- },
639
- },
640
- 'triangle-down': {
641
- default: {
642
- style: shapeStyles.point.default,
643
- },
644
- active: {
645
- style: shapeStyles.point.active,
646
- },
647
- inactive: {
648
- style: shapeStyles.point.inactive,
649
- },
650
- selected: {
651
- style: shapeStyles.point.selected,
652
- },
653
- },
654
- 'hollow-circle': {
655
- default: {
656
- style: shapeStyles.hollowPoint.default,
657
- },
658
- active: {
659
- style: shapeStyles.hollowPoint.active,
660
- },
661
- inactive: {
662
- style: shapeStyles.hollowPoint.inactive,
663
- },
664
- selected: {
665
- style: shapeStyles.hollowPoint.selected,
666
- },
667
- },
668
- 'hollow-square': {
669
- default: {
670
- style: shapeStyles.hollowPoint.default,
671
- },
672
- active: {
673
- style: shapeStyles.hollowPoint.active,
674
- },
675
- inactive: {
676
- style: shapeStyles.hollowPoint.inactive,
677
- },
678
- selected: {
679
- style: shapeStyles.hollowPoint.selected,
680
- },
681
- },
682
- 'hollow-bowtie': {
683
- default: {
684
- style: shapeStyles.hollowPoint.default,
685
- },
686
- active: {
687
- style: shapeStyles.hollowPoint.active,
688
- },
689
- inactive: {
690
- style: shapeStyles.hollowPoint.inactive,
691
- },
692
- selected: {
693
- style: shapeStyles.hollowPoint.selected,
694
- },
695
- },
696
- 'hollow-diamond': {
697
- default: {
698
- style: shapeStyles.hollowPoint.default,
699
- },
700
- active: {
701
- style: shapeStyles.hollowPoint.active,
702
- },
703
- inactive: {
704
- style: shapeStyles.hollowPoint.inactive,
705
- },
706
- selected: {
707
- style: shapeStyles.hollowPoint.selected,
708
- },
709
- },
710
- 'hollow-hexagon': {
711
- default: {
712
- style: shapeStyles.hollowPoint.default,
713
- },
714
- active: {
715
- style: shapeStyles.hollowPoint.active,
716
- },
717
- inactive: {
718
- style: shapeStyles.hollowPoint.inactive,
719
- },
720
- selected: {
721
- style: shapeStyles.hollowPoint.selected,
722
- },
723
- },
724
- 'hollow-triangle': {
725
- default: {
726
- style: shapeStyles.hollowPoint.default,
727
- },
728
- active: {
729
- style: shapeStyles.hollowPoint.active,
730
- },
731
- inactive: {
732
- style: shapeStyles.hollowPoint.inactive,
733
- },
734
- selected: {
735
- style: shapeStyles.hollowPoint.selected,
736
- },
737
- },
738
- 'hollow-triangle-down': {
739
- default: {
740
- style: shapeStyles.hollowPoint.default,
741
- },
742
- active: {
743
- style: shapeStyles.hollowPoint.active,
744
- },
745
- inactive: {
746
- style: shapeStyles.hollowPoint.inactive,
747
- },
748
- selected: {
749
- style: shapeStyles.hollowPoint.selected,
750
- },
751
- },
752
- cross: {
753
- default: {
754
- style: shapeStyles.hollowPoint.default,
755
- },
756
- active: {
757
- style: shapeStyles.hollowPoint.active,
758
- },
759
- inactive: {
760
- style: shapeStyles.hollowPoint.inactive,
761
- },
762
- selected: {
763
- style: shapeStyles.hollowPoint.selected,
764
- },
765
- },
766
- tick: {
767
- default: {
768
- style: shapeStyles.hollowPoint.default,
769
- },
770
- active: {
771
- style: shapeStyles.hollowPoint.active,
772
- },
773
- inactive: {
774
- style: shapeStyles.hollowPoint.inactive,
775
- },
776
- selected: {
777
- style: shapeStyles.hollowPoint.selected,
778
- },
779
- },
780
- plus: {
781
- default: {
782
- style: shapeStyles.hollowPoint.default,
783
- },
784
- active: {
785
- style: shapeStyles.hollowPoint.active,
786
- },
787
- inactive: {
788
- style: shapeStyles.hollowPoint.inactive,
789
- },
790
- selected: {
791
- style: shapeStyles.hollowPoint.selected,
792
- },
793
- },
794
- hyphen: {
795
- default: {
796
- style: shapeStyles.hollowPoint.default,
797
- },
798
- active: {
799
- style: shapeStyles.hollowPoint.active,
800
- },
801
- inactive: {
802
- style: shapeStyles.hollowPoint.inactive,
803
- },
804
- selected: {
805
- style: shapeStyles.hollowPoint.selected,
806
- },
807
- },
808
- line: {
809
- default: {
810
- style: shapeStyles.hollowPoint.default,
811
- },
812
- active: {
813
- style: shapeStyles.hollowPoint.active,
814
- },
815
- inactive: {
816
- style: shapeStyles.hollowPoint.inactive,
817
- },
818
- selected: {
819
- style: shapeStyles.hollowPoint.selected,
820
- },
821
- },
822
- },
823
- area: {
824
- area: {
825
- default: {
826
- style: shapeStyles.area.default,
827
- },
828
- active: {
829
- style: shapeStyles.area.active,
830
- },
831
- inactive: {
832
- style: shapeStyles.area.inactive,
833
- },
834
- selected: {
835
- style: shapeStyles.area.selected,
836
- },
837
- },
838
- smooth: {
839
- default: {
840
- style: shapeStyles.area.default,
841
- },
842
- active: {
843
- style: shapeStyles.area.active,
844
- },
845
- inactive: {
846
- style: shapeStyles.area.inactive,
847
- },
848
- selected: {
849
- style: shapeStyles.area.selected,
850
- },
851
- },
852
- line: {
853
- default: {
854
- style: shapeStyles.hollowArea.default,
855
- },
856
- active: {
857
- style: shapeStyles.hollowArea.active,
858
- },
859
- inactive: {
860
- style: shapeStyles.hollowArea.inactive,
861
- },
862
- selected: {
863
- style: shapeStyles.hollowArea.selected,
864
- },
865
- },
866
- 'smooth-line': {
867
- default: {
868
- style: shapeStyles.hollowArea.default,
869
- },
870
- active: {
871
- style: shapeStyles.hollowArea.active,
872
- },
873
- inactive: {
874
- style: shapeStyles.hollowArea.inactive,
875
- },
876
- selected: {
877
- style: shapeStyles.hollowArea.selected,
878
- },
879
- },
880
- },
881
- schema: {
882
- candle: {
883
- default: {
884
- style: shapeStyles.hollowInterval.default,
885
- },
886
- active: {
887
- style: shapeStyles.hollowInterval.active,
888
- },
889
- inactive: {
890
- style: shapeStyles.hollowInterval.inactive,
891
- },
892
- selected: {
893
- style: shapeStyles.hollowInterval.selected,
894
- },
895
- },
896
- box: {
897
- default: {
898
- style: shapeStyles.hollowInterval.default,
899
- },
900
- active: {
901
- style: shapeStyles.hollowInterval.active,
902
- },
903
- inactive: {
904
- style: shapeStyles.hollowInterval.inactive,
905
- },
906
- selected: {
907
- style: shapeStyles.hollowInterval.selected,
908
- },
909
- },
910
- },
911
- edge: {
912
- line: {
913
- default: {
914
- style: shapeStyles.line.default,
915
- },
916
- active: {
917
- style: shapeStyles.line.active,
918
- },
919
- inactive: {
920
- style: shapeStyles.line.inactive,
921
- },
922
- selected: {
923
- style: shapeStyles.line.selected,
924
- },
925
- },
926
- vhv: {
927
- default: {
928
- style: shapeStyles.line.default,
929
- },
930
- active: {
931
- style: shapeStyles.line.active,
932
- },
933
- inactive: {
934
- style: shapeStyles.line.inactive,
935
- },
936
- selected: {
937
- style: shapeStyles.line.selected,
938
- },
939
- },
940
- smooth: {
941
- default: {
942
- style: shapeStyles.line.default,
943
- },
944
- active: {
945
- style: shapeStyles.line.active,
946
- },
947
- inactive: {
948
- style: shapeStyles.line.inactive,
949
- },
950
- selected: {
951
- style: shapeStyles.line.selected,
952
- },
953
- },
954
- arc: {
955
- default: {
956
- style: shapeStyles.line.default,
957
- },
958
- active: {
959
- style: shapeStyles.line.active,
960
- },
961
- inactive: {
962
- style: shapeStyles.line.inactive,
963
- },
964
- selected: {
965
- style: shapeStyles.line.selected,
966
- },
967
- },
968
- },
969
- },
970
- components: {
971
- axis: {
972
- common: axisStyles,
973
- top: deepMix({}, axisStyles, {
974
- position: 'top',
975
- grid: null,
976
- title: null,
977
- verticalLimitLength: 1 / 2,
978
- }),
979
- bottom: deepMix({}, axisStyles, {
980
- position: 'bottom',
981
- grid: null,
982
- title: null,
983
- verticalLimitLength: 1 / 2,
984
- }),
985
- left: deepMix({}, axisStyles, {
986
- position: 'left',
987
- title: null,
988
- line: null,
989
- tickLine: null,
990
- verticalLimitLength: 1 / 3,
991
- }),
992
- right: deepMix({}, axisStyles, {
993
- position: 'right',
994
- title: null,
995
- line: null,
996
- tickLine: null,
997
- verticalLimitLength: 1 / 3,
998
- }),
999
- circle: deepMix({}, axisStyles, {
1000
- title: null,
1001
- grid: deepMix({}, axisStyles.grid, { line: { type: 'line' } }),
1002
- }),
1003
- radius: deepMix({}, axisStyles, {
1004
- title: null,
1005
- grid: deepMix({}, axisStyles.grid, { line: { type: 'circle' } }),
1006
- }),
1007
- },
1008
- legend: {
1009
- common: legendStyles,
1010
- right: deepMix({}, legendStyles, {
1011
- layout: 'vertical',
1012
- }),
1013
- left: deepMix({}, legendStyles, {
1014
- layout: 'vertical',
1015
- }),
1016
- top: deepMix({}, legendStyles, {
1017
- layout: 'horizontal',
1018
- }),
1019
- bottom: deepMix({}, legendStyles, {
1020
- layout: 'horizontal',
1021
- }),
1022
- continuous: {
1023
- title: null,
1024
- background: null,
1025
- track: {},
1026
- rail: {
1027
- type: 'color',
1028
- size: styleSheet.sliderRailHeight,
1029
- defaultLength: styleSheet.sliderRailWidth,
1030
- style: {
1031
- fill: styleSheet.sliderRailFillColor,
1032
- stroke: styleSheet.sliderRailBorderColor,
1033
- lineWidth: styleSheet.sliderRailBorder,
1034
- },
1035
- },
1036
- label: {
1037
- align: 'rail',
1038
- spacing: 4, // 文本和 rail 的间距
1039
- formatter: null,
1040
- style: {
1041
- fill: styleSheet.sliderLabelTextFillColor,
1042
- fontSize: styleSheet.sliderLabelTextFontSize,
1043
- lineHeight: styleSheet.sliderLabelTextLineHeight,
1044
- textBaseline: 'middle',
1045
- fontFamily: styleSheet.fontFamily,
1046
- },
1047
- },
1048
- handler: {
1049
- size: styleSheet.sliderHandlerWidth,
1050
- style: {
1051
- fill: styleSheet.sliderHandlerFillColor,
1052
- stroke: styleSheet.sliderHandlerBorderColor,
1053
- },
1054
- },
1055
- slidable: true,
1056
- padding: legendStyles.padding,
1057
- },
1058
- },
1059
- tooltip: {
1060
- showContent: true,
1061
- follow: true,
1062
- showCrosshairs: false,
1063
- showMarkers: true,
1064
- shared: false,
1065
- enterable: false,
1066
- position: 'auto',
1067
- marker: {
1068
- symbol: 'circle',
1069
- stroke: styleSheet.tooltipMarkerStroke,
1070
- fill: styleSheet.tooltipMarkerFill,
1071
- shadowBlur: 10,
1072
- shadowOffsetX: 0,
1073
- shadowOffSetY: 0,
1074
- shadowColor: 'rgba(0,0,0,0.09)',
1075
- lineWidth: 2,
1076
- r: 4,
1077
- },
1078
- crosshairs: {
1079
- line: {
1080
- style: {
1081
- stroke: styleSheet.tooltipCrosshairsBorderColor,
1082
- lineWidth: styleSheet.tooltipCrosshairsBorder,
1083
- },
1084
- },
1085
- text: null,
1086
- textBackground: {
1087
- padding: 2,
1088
- style: {
1089
- fill: 'rgba(0, 0, 0, 0.25)',
1090
- lineWidth: 0,
1091
- stroke: null,
1092
- },
1093
- },
1094
- follow: false,
1095
- },
1096
- // tooltip dom 样式
1097
- domStyles: {
1098
- [`${TOOLTIP_CSS_CONST.CONTAINER_CLASS}`]: {
1099
- position: 'absolute',
1100
- visibility: 'hidden',
1101
- zIndex: 8,
1102
- transition:
1103
- 'left 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s, top 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s',
1104
- background: styleSheet.tooltipContainerFillColor,
1105
- opacity: styleSheet.tooltipContainerFillOpacity,
1106
- boxShadow: styleSheet.tooltipContainerShadow,
1107
- borderRadius: `${styleSheet.tooltipContainerBorderRadius}px`,
1108
- color: styleSheet.tooltipTextFillColor,
1109
- fontSize: `${styleSheet.tooltipTextFontSize}px`,
1110
- fontFamily: styleSheet.fontFamily,
1111
- lineHeight: `${styleSheet.tooltipTextLineHeight}px`,
1112
- padding: '0 12px 0 12px',
1113
- },
1114
- [`${TOOLTIP_CSS_CONST.TITLE_CLASS}`]: {
1115
- marginBottom: '12px',
1116
- marginTop: '12px',
1117
- },
1118
- [`${TOOLTIP_CSS_CONST.LIST_CLASS}`]: {
1119
- margin: 0,
1120
- listStyleType: 'none',
1121
- padding: 0,
1122
- },
1123
- [`${TOOLTIP_CSS_CONST.LIST_ITEM_CLASS}`]: {
1124
- listStyleType: 'none',
1125
- padding: 0,
1126
- marginBottom: '12px',
1127
- marginTop: '12px',
1128
- marginLeft: 0,
1129
- marginRight: 0,
1130
- },
1131
- [`${TOOLTIP_CSS_CONST.MARKER_CLASS}`]: {
1132
- width: '8px',
1133
- height: '8px',
1134
- borderRadius: '50%',
1135
- display: 'inline-block',
1136
- marginRight: '8px',
1137
- },
1138
- [`${TOOLTIP_CSS_CONST.VALUE_CLASS}`]: {
1139
- display: 'inline-block',
1140
- float: 'right',
1141
- marginLeft: '30px',
1142
- },
1143
- },
1144
- },
1145
- annotation: {
1146
- arc: {
1147
- style: {
1148
- stroke: styleSheet.annotationArcBorderColor,
1149
- lineWidth: styleSheet.annotationArcBorder,
1150
- },
1151
- animate: true,
1152
- },
1153
- line: {
1154
- style: {
1155
- stroke: styleSheet.annotationLineBorderColor,
1156
- lineDash: styleSheet.annotationLineDash,
1157
- lineWidth: styleSheet.annotationLineBorder,
1158
- },
1159
- text: {
1160
- position: 'start',
1161
- autoRotate: true,
1162
- style: {
1163
- fill: styleSheet.annotationTextFillColor,
1164
- stroke: styleSheet.annotationTextBorderColor,
1165
- lineWidth: styleSheet.annotationTextBorder,
1166
- fontSize: styleSheet.annotationTextFontSize,
1167
- textAlign: 'start',
1168
- fontFamily: styleSheet.fontFamily,
1169
- textBaseline: 'bottom',
1170
- },
1171
- },
1172
- animate: true,
1173
- },
1174
- text: {
1175
- style: {
1176
- fill: styleSheet.annotationTextFillColor,
1177
- stroke: styleSheet.annotationTextBorderColor,
1178
- lineWidth: styleSheet.annotationTextBorder,
1179
- fontSize: styleSheet.annotationTextFontSize,
1180
- textBaseline: 'middle',
1181
- textAlign: 'start',
1182
- fontFamily: styleSheet.fontFamily,
1183
- },
1184
- animate: true,
1185
- },
1186
- region: {
1187
- top: false,
1188
- style: {
1189
- lineWidth: styleSheet.annotationRegionBorder,
1190
- stroke: styleSheet.annotationRegionBorderColor,
1191
- fill: styleSheet.annotationRegionFillColor,
1192
- fillOpacity: styleSheet.annotationRegionFillOpacity,
1193
- }, // 辅助框的图形样式属性
1194
- animate: true,
1195
- },
1196
- image: {
1197
- top: false,
1198
- animate: true,
1199
- },
1200
- dataMarker: {
1201
- top: true,
1202
- point: {
1203
- style: {
1204
- r: 3,
1205
- stroke: styleSheet.brandColor,
1206
- lineWidth: 2,
1207
- },
1208
- },
1209
- line: {
1210
- style: {
1211
- stroke: styleSheet.annotationLineBorderColor,
1212
- lineWidth: styleSheet.annotationLineBorder,
1213
- },
1214
- length: styleSheet.annotationDataMarkerLineLength,
1215
- },
1216
- text: {
1217
- style: {
1218
- textAlign: 'start',
1219
- fill: styleSheet.annotationTextFillColor,
1220
- stroke: styleSheet.annotationTextBorderColor,
1221
- lineWidth: styleSheet.annotationTextBorder,
1222
- fontSize: styleSheet.annotationTextFontSize,
1223
- fontFamily: styleSheet.fontFamily,
1224
- },
1225
- },
1226
- direction: 'upward',
1227
- autoAdjust: true,
1228
- animate: true,
1229
- },
1230
- dataRegion: {
1231
- style: {
1232
- region: {
1233
- fill: styleSheet.annotationRegionFillColor,
1234
- fillOpacity: styleSheet.annotationRegionFillOpacity,
1235
- },
1236
- text: {
1237
- textAlign: 'center',
1238
- textBaseline: 'bottom',
1239
- fill: styleSheet.annotationTextFillColor,
1240
- stroke: styleSheet.annotationTextBorderColor,
1241
- lineWidth: styleSheet.annotationTextBorder,
1242
- fontSize: styleSheet.annotationTextFontSize,
1243
- fontFamily: styleSheet.fontFamily,
1244
- },
1245
- },
1246
- animate: true,
1247
- },
1248
- },
1249
- slider: {
1250
- common: {
1251
- padding: [8, 8, 8, 8],
1252
- },
1253
- },
1254
- scrollbar: {
1255
- common: {
1256
- padding: [8, 8, 8, 8],
1257
- },
1258
- },
1259
- },
1260
- labels: {
1261
- offset: 12,
1262
- style: {
1263
- fill: styleSheet.labelFillColor,
1264
- fontSize: styleSheet.labelFontSize,
1265
- fontFamily: styleSheet.fontFamily,
1266
- stroke: styleSheet.labelBorderColor,
1267
- lineWidth: styleSheet.labelBorder,
1268
- },
1269
- fillColorDark: styleSheet.labelFillColorDark,
1270
- fillColorLight: styleSheet.labelFillColorLight,
1271
- autoRotate: true,
1272
- },
1273
- innerLabels: {
1274
- style: {
1275
- fill: styleSheet.innerLabelFillColor,
1276
- fontSize: styleSheet.innerLabelFontSize,
1277
- fontFamily: styleSheet.fontFamily,
1278
- stroke: styleSheet.innerLabelBorderColor,
1279
- lineWidth: styleSheet.innerLabelBorder,
1280
- },
1281
- autoRotate: true,
1282
- },
1283
- overflowLabels: {
1284
- style: {
1285
- fill: styleSheet.overflowLabelFillColor,
1286
- fontSize: styleSheet.overflowLabelFontSize,
1287
- fontFamily: styleSheet.fontFamily,
1288
- stroke: styleSheet.overflowLabelBorderColor,
1289
- lineWidth: styleSheet.overflowLabelBorder,
1290
- },
1291
- },
1292
- pieLabels: {
1293
- labelHeight: 14,
1294
- offset: 10,
1295
- labelLine: {
1296
- style: {
1297
- lineWidth: styleSheet.labelLineBorder,
1298
- },
1299
- },
1300
- autoRotate: true,
1301
- },
1302
- }
1303
- }
1
+ import * as TOOLTIP_CSS_CONST from '@antv/component/lib/tooltip/css-const'
2
+ import { deepMix } from '@antv/util'
3
+ import { LooseObject, StyleSheet } from '../../types/theme'
4
+
5
+ /**
6
+ * 根据样式表创建 axis 组件主题样式
7
+ * @param styleSheet
8
+ */
9
+ function createAxisStyles<T>(styleSheet: StyleSheet<T>): LooseObject {
10
+ return {
11
+ title: {
12
+ autoRotate: true,
13
+ position: 'center', // start, center, end
14
+ spacing: styleSheet.axisTitleSpacing,
15
+ style: {
16
+ fill: styleSheet.axisTitleTextFillColor,
17
+ fontSize: styleSheet.axisTitleTextFontSize,
18
+ lineHeight: styleSheet.axisTitleTextLineHeight,
19
+ textBaseline: 'middle',
20
+ fontFamily: styleSheet.fontFamily,
21
+ },
22
+ },
23
+ label: {
24
+ autoRotate: true,
25
+ autoEllipsis: true,
26
+ autoHide: true,
27
+ offset: styleSheet.axisLabelOffset,
28
+ style: {
29
+ fill: styleSheet.axisLabelFillColor,
30
+ fontSize: styleSheet.axisLabelFontSize,
31
+ lineHeight: styleSheet.axisLabelLineHeight,
32
+ fontFamily: styleSheet.fontFamily,
33
+ },
34
+ },
35
+ line: {
36
+ style: {
37
+ lineWidth: styleSheet.axisLineBorder,
38
+ stroke: styleSheet.axisLineBorderColor,
39
+ },
40
+ },
41
+ grid: {
42
+ line: {
43
+ type: 'line',
44
+ style: {
45
+ stroke: styleSheet.axisGridBorderColor,
46
+ lineWidth: styleSheet.axisGridBorder,
47
+ lineDash: styleSheet.axisGridLineDash,
48
+ },
49
+ },
50
+ alignTick: true,
51
+ animate: true,
52
+ },
53
+ tickLine: {
54
+ style: {
55
+ lineWidth: styleSheet.axisTickLineBorder,
56
+ stroke: styleSheet.axisTickLineBorderColor,
57
+ },
58
+ alignTick: true, // 默认刻度线和文本对齐
59
+ length: styleSheet.axisTickLineLength,
60
+ },
61
+ subTickLine: null,
62
+ animate: true,
63
+ }
64
+ }
65
+
66
+ /**
67
+ *
68
+ * @param styleSheet
69
+ */
70
+ // export function
71
+
72
+ /**
73
+ * 根据样式表创建 legend 组件主题样式
74
+ * @param styleSheet
75
+ */
76
+ function createLegendStyles<T>(styleSheet: StyleSheet<T>): LooseObject {
77
+ return {
78
+ title: null,
79
+ marker: {
80
+ symbol: 'circle',
81
+ spacing: styleSheet.legendMarkerSpacing,
82
+ style: {
83
+ r: styleSheet.legendCircleMarkerSize,
84
+ fill: styleSheet.legendMarkerColor,
85
+ },
86
+ },
87
+ itemName: {
88
+ spacing: 5, // 如果右边有 value 使用这个间距
89
+ style: {
90
+ fill: styleSheet.legendItemNameFillColor,
91
+ fontFamily: styleSheet.fontFamily,
92
+ fontSize: styleSheet.legendItemNameFontSize,
93
+ lineHeight: styleSheet.legendItemNameLineHeight,
94
+ fontWeight: styleSheet.legendItemNameFontWeight,
95
+ textAlign: 'start',
96
+ textBaseline: 'middle',
97
+ },
98
+ },
99
+ flipPage: true,
100
+ animate: false,
101
+ maxItemWidth: 200,
102
+ itemSpacing: styleSheet.legendItemSpacing,
103
+ itemMarginBottom: styleSheet.legendItemMarginBottom,
104
+ padding: styleSheet.legendPadding, // 图例组件自己的外边距
105
+ }
106
+ }
107
+
108
+ /**
109
+ * 根据主题样式表生成主题结构
110
+ * @param styleSheet 主题样式表
111
+ */
112
+ export function createThemeByStyleSheet<T>(styleSheet: StyleSheet<T>): LooseObject {
113
+ const shapeStyles = {
114
+ point: {
115
+ default: {
116
+ fill: styleSheet.pointFillColor,
117
+ r: styleSheet.pointSize,
118
+ stroke: styleSheet.pointBorderColor,
119
+ lineWidth: styleSheet.pointBorder,
120
+ fillOpacity: styleSheet.pointFillOpacity,
121
+ },
122
+ active: {
123
+ stroke: styleSheet.pointActiveBorderColor,
124
+ lineWidth: styleSheet.pointActiveBorder,
125
+ },
126
+ selected: {
127
+ stroke: styleSheet.pointSelectedBorderColor,
128
+ lineWidth: styleSheet.pointSelectedBorder,
129
+ },
130
+ inactive: {
131
+ fillOpacity: styleSheet.pointInactiveFillOpacity,
132
+ strokeOpacity: styleSheet.pointInactiveBorderOpacity,
133
+ },
134
+ },
135
+ hollowPoint: {
136
+ default: {
137
+ fill: styleSheet.hollowPointFillColor,
138
+ lineWidth: styleSheet.hollowPointBorder,
139
+ stroke: styleSheet.hollowPointBorderColor,
140
+ strokeOpacity: styleSheet.hollowPointBorderOpacity,
141
+ r: styleSheet.hollowPointSize,
142
+ },
143
+ active: {
144
+ stroke: styleSheet.hollowPointActiveBorderColor,
145
+ strokeOpacity: styleSheet.hollowPointActiveBorderOpacity,
146
+ },
147
+ selected: {
148
+ lineWidth: styleSheet.hollowPointSelectedBorder,
149
+ stroke: styleSheet.hollowPointSelectedBorderColor,
150
+ strokeOpacity: styleSheet.hollowPointSelectedBorderOpacity,
151
+ },
152
+ inactive: {
153
+ strokeOpacity: styleSheet.hollowPointInactiveBorderOpacity,
154
+ },
155
+ },
156
+ area: {
157
+ default: {
158
+ fill: styleSheet.areaFillColor,
159
+ fillOpacity: styleSheet.areaFillOpacity,
160
+ stroke: null,
161
+ },
162
+ active: {
163
+ fillOpacity: styleSheet.areaActiveFillOpacity,
164
+ },
165
+ selected: {
166
+ fillOpacity: styleSheet.areaSelectedFillOpacity,
167
+ },
168
+ inactive: {
169
+ fillOpacity: styleSheet.areaInactiveFillOpacity,
170
+ },
171
+ },
172
+ hollowArea: {
173
+ default: {
174
+ fill: null,
175
+ stroke: styleSheet.hollowAreaBorderColor,
176
+ lineWidth: styleSheet.hollowAreaBorder,
177
+ strokeOpacity: styleSheet.hollowAreaBorderOpacity,
178
+ },
179
+ active: {
180
+ fill: null,
181
+ lineWidth: styleSheet.hollowAreaActiveBorder,
182
+ },
183
+ selected: {
184
+ fill: null,
185
+ lineWidth: styleSheet.hollowAreaSelectedBorder,
186
+ },
187
+ inactive: {
188
+ strokeOpacity: styleSheet.hollowAreaInactiveBorderOpacity,
189
+ },
190
+ },
191
+ interval: {
192
+ default: {
193
+ fill: styleSheet.intervalFillColor,
194
+ fillOpacity: styleSheet.intervalFillOpacity,
195
+ },
196
+ active: {
197
+ stroke: styleSheet.intervalActiveBorderColor,
198
+ lineWidth: styleSheet.intervalActiveBorder,
199
+ },
200
+ selected: {
201
+ stroke: styleSheet.intervalSelectedBorderColor,
202
+ lineWidth: styleSheet.intervalSelectedBorder,
203
+ },
204
+ inactive: {
205
+ fillOpacity: styleSheet.intervalInactiveFillOpacity,
206
+ strokeOpacity: styleSheet.intervalInactiveBorderOpacity,
207
+ },
208
+ },
209
+ hollowInterval: {
210
+ default: {
211
+ fill: styleSheet.hollowIntervalFillColor,
212
+ stroke: styleSheet.hollowIntervalBorderColor,
213
+ lineWidth: styleSheet.hollowIntervalBorder,
214
+ strokeOpacity: styleSheet.hollowIntervalBorderOpacity,
215
+ },
216
+ active: {
217
+ stroke: styleSheet.hollowIntervalActiveBorderColor,
218
+ lineWidth: styleSheet.hollowIntervalActiveBorder,
219
+ strokeOpacity: styleSheet.hollowIntervalActiveBorderOpacity,
220
+ },
221
+ selected: {
222
+ stroke: styleSheet.hollowIntervalSelectedBorderColor,
223
+ lineWidth: styleSheet.hollowIntervalSelectedBorder,
224
+ strokeOpacity: styleSheet.hollowIntervalSelectedBorderOpacity,
225
+ },
226
+ inactive: {
227
+ stroke: styleSheet.hollowIntervalInactiveBorderColor,
228
+ lineWidth: styleSheet.hollowIntervalInactiveBorder,
229
+ strokeOpacity: styleSheet.hollowIntervalInactiveBorderOpacity,
230
+ },
231
+ },
232
+ line: {
233
+ default: {
234
+ stroke: styleSheet.lineBorderColor,
235
+ lineWidth: styleSheet.lineBorder,
236
+ strokeOpacity: styleSheet.lineBorderOpacity,
237
+ fill: null,
238
+ lineAppendWidth: 10,
239
+ lineCap: 'round',
240
+ lineJoin: 'round',
241
+ },
242
+ active: {
243
+ lineWidth: styleSheet.lineActiveBorder,
244
+ },
245
+ selected: {
246
+ lineWidth: styleSheet.lineSelectedBorder,
247
+ },
248
+ inactive: {
249
+ strokeOpacity: styleSheet.lineInactiveBorderOpacity,
250
+ },
251
+ },
252
+ }
253
+ const axisStyles = createAxisStyles(styleSheet)
254
+ const legendStyles = createLegendStyles(styleSheet)
255
+
256
+ return {
257
+ background: styleSheet.backgroundColor,
258
+ defaultColor: styleSheet.brandColor,
259
+ padding: 'auto',
260
+ fontFamily: styleSheet.fontFamily,
261
+ // 兼容Theme配置
262
+ /** 一般柱状图宽度占比，geometry中已添加默认值，为了geometry配置生效默认值为null */
263
+ columnWidthRatio: 1 / 2,
264
+ /** 柱状图最大宽度 */
265
+ maxColumnWidth: null,
266
+ /** 柱状图最小宽度 */
267
+ minColumnWidth: null,
268
+ /** 玫瑰图占比 */
269
+ roseWidthRatio: 0.9999999,
270
+ /** 多层饼图/环图占比 */
271
+ multiplePieWidthRatio: 1 / 1.3,
272
+ colors10: styleSheet.paletteQualitative10,
273
+ colors20: styleSheet.paletteQualitative20,
274
+ shapes: {
275
+ point: [
276
+ 'hollow-circle',
277
+ 'hollow-square',
278
+ 'hollow-bowtie',
279
+ 'hollow-diamond',
280
+ 'hollow-hexagon',
281
+ 'hollow-triangle',
282
+ 'hollow-triangle-down',
283
+ 'circle',
284
+ 'square',
285
+ 'bowtie',
286
+ 'diamond',
287
+ 'hexagon',
288
+ 'triangle',
289
+ 'triangle-down',
290
+ 'cross',
291
+ 'tick',
292
+ 'plus',
293
+ 'hyphen',
294
+ 'line',
295
+ ],
296
+ line: ['line', 'dash', 'dot', 'smooth'],
297
+ area: ['area', 'smooth', 'line', 'smooth-line'],
298
+ interval: ['rect', 'hollow-rect', 'line', 'tick'],
299
+ },
300
+ sizes: [1, 10],
301
+ geometries: {
302
+ interval: {
303
+ rect: {
304
+ default: {
305
+ style: shapeStyles.interval.default,
306
+ },
307
+ active: {
308
+ style: shapeStyles.interval.active,
309
+ },
310
+ inactive: {
311
+ style: shapeStyles.interval.inactive,
312
+ },
313
+ // selected: {
314
+ // style: (element: Element) => {
315
+ // const coordinate = element.geometry.coordinate
316
+ // if (coordinate.isPolar && coordinate.isTransposed) {
317
+ // const { startAngle, endAngle } = getAngle(element.getModel(), coordinate)
318
+ // const middleAngle = (startAngle + endAngle) / 2
319
+ // const r = 7.5
320
+ // const x = r * Math.cos(middleAngle)
321
+ // const y = r * Math.sin(middleAngle)
322
+ // return {
323
+ // matrix: ext.transform(null, [['t', x, y]]),
324
+ // }
325
+ // }
326
+ // return shapeStyles.interval.selected
327
+ // },
328
+ // },
329
+ },
330
+ 'hollow-rect': {
331
+ default: {
332
+ style: shapeStyles.hollowInterval.default,
333
+ },
334
+ active: {
335
+ style: shapeStyles.hollowInterval.active,
336
+ },
337
+ inactive: {
338
+ style: shapeStyles.hollowInterval.inactive,
339
+ },
340
+ selected: {
341
+ style: shapeStyles.hollowInterval.selected,
342
+ },
343
+ },
344
+ line: {
345
+ default: {
346
+ style: shapeStyles.hollowInterval.default,
347
+ },
348
+ active: {
349
+ style: shapeStyles.hollowInterval.active,
350
+ },
351
+ inactive: {
352
+ style: shapeStyles.hollowInterval.inactive,
353
+ },
354
+ selected: {
355
+ style: shapeStyles.hollowInterval.selected,
356
+ },
357
+ },
358
+ tick: {
359
+ default: {
360
+ style: shapeStyles.hollowInterval.default,
361
+ },
362
+ active: {
363
+ style: shapeStyles.hollowInterval.active,
364
+ },
365
+ inactive: {
366
+ style: shapeStyles.hollowInterval.inactive,
367
+ },
368
+ selected: {
369
+ style: shapeStyles.hollowInterval.selected,
370
+ },
371
+ },
372
+ funnel: {
373
+ default: {
374
+ style: shapeStyles.interval.default,
375
+ },
376
+ active: {
377
+ style: shapeStyles.interval.active,
378
+ },
379
+ inactive: {
380
+ style: shapeStyles.interval.inactive,
381
+ },
382
+ selected: {
383
+ style: shapeStyles.interval.selected,
384
+ },
385
+ },
386
+ pyramid: {
387
+ default: {
388
+ style: shapeStyles.interval.default,
389
+ },
390
+ active: {
391
+ style: shapeStyles.interval.active,
392
+ },
393
+ inactive: {
394
+ style: shapeStyles.interval.inactive,
395
+ },
396
+ selected: {
397
+ style: shapeStyles.interval.selected,
398
+ },
399
+ },
400
+ },
401
+ line: {
402
+ line: {
403
+ default: {
404
+ style: shapeStyles.line.default,
405
+ },
406
+ active: {
407
+ style: shapeStyles.line.active,
408
+ },
409
+ inactive: {
410
+ style: shapeStyles.line.inactive,
411
+ },
412
+ selected: {
413
+ style: shapeStyles.line.selected,
414
+ },
415
+ },
416
+ dot: {
417
+ default: {
418
+ style: {
419
+ ...shapeStyles.line.default,
420
+ lineDash: [1, 1],
421
+ },
422
+ },
423
+ active: {
424
+ style: {
425
+ ...shapeStyles.line.active,
426
+ lineDash: [1, 1],
427
+ },
428
+ },
429
+ inactive: {
430
+ style: {
431
+ ...shapeStyles.line.inactive,
432
+ lineDash: [1, 1],
433
+ },
434
+ },
435
+ selected: {
436
+ style: {
437
+ ...shapeStyles.line.selected,
438
+ lineDash: [1, 1],
439
+ },
440
+ },
441
+ },
442
+ dash: {
443
+ default: {
444
+ style: {
445
+ ...shapeStyles.line.default,
446
+ lineDash: [5.5, 1],
447
+ },
448
+ },
449
+ active: {
450
+ style: {
451
+ ...shapeStyles.line.active,
452
+ lineDash: [5.5, 1],
453
+ },
454
+ },
455
+ inactive: {
456
+ style: {
457
+ ...shapeStyles.line.inactive,
458
+ lineDash: [5.5, 1],
459
+ },
460
+ },
461
+ selected: {
462
+ style: {
463
+ ...shapeStyles.line.selected,
464
+ lineDash: [5.5, 1],
465
+ },
466
+ },
467
+ },
468
+ smooth: {
469
+ default: {
470
+ style: shapeStyles.line.default,
471
+ },
472
+ active: {
473
+ style: shapeStyles.line.active,
474
+ },
475
+ inactive: {
476
+ style: shapeStyles.line.inactive,
477
+ },
478
+ selected: {
479
+ style: shapeStyles.line.selected,
480
+ },
481
+ },
482
+ hv: {
483
+ default: {
484
+ style: shapeStyles.line.default,
485
+ },
486
+ active: {
487
+ style: shapeStyles.line.active,
488
+ },
489
+ inactive: {
490
+ style: shapeStyles.line.inactive,
491
+ },
492
+ selected: {
493
+ style: shapeStyles.line.selected,
494
+ },
495
+ },
496
+ vh: {
497
+ default: {
498
+ style: shapeStyles.line.default,
499
+ },
500
+ active: {
501
+ style: shapeStyles.line.active,
502
+ },
503
+ inactive: {
504
+ style: shapeStyles.line.inactive,
505
+ },
506
+ selected: {
507
+ style: shapeStyles.line.selected,
508
+ },
509
+ },
510
+ hvh: {
511
+ default: {
512
+ style: shapeStyles.line.default,
513
+ },
514
+ active: {
515
+ style: shapeStyles.line.active,
516
+ },
517
+ inactive: {
518
+ style: shapeStyles.line.inactive,
519
+ },
520
+ selected: {
521
+ style: shapeStyles.line.selected,
522
+ },
523
+ },
524
+ vhv: {
525
+ default: {
526
+ style: shapeStyles.line.default,
527
+ },
528
+ active: {
529
+ style: shapeStyles.line.active,
530
+ },
531
+ inactive: {
532
+ style: shapeStyles.line.inactive,
533
+ },
534
+ selected: {
535
+ style: shapeStyles.line.selected,
536
+ },
537
+ },
538
+ },
539
+ polygon: {
540
+ polygon: {
541
+ default: {
542
+ style: shapeStyles.interval.default,
543
+ },
544
+ active: {
545
+ style: shapeStyles.interval.active,
546
+ },
547
+ inactive: {
548
+ style: shapeStyles.interval.inactive,
549
+ },
550
+ selected: {
551
+ style: shapeStyles.interval.selected,
552
+ },
553
+ },
554
+ },
555
+ point: {
556
+ circle: {
557
+ default: {
558
+ style: shapeStyles.point.default,
559
+ },
560
+ active: {
561
+ style: shapeStyles.point.active,
562
+ },
563
+ inactive: {
564
+ style: shapeStyles.point.inactive,
565
+ },
566
+ selected: {
567
+ style: shapeStyles.point.selected,
568
+ },
569
+ },
570
+ square: {
571
+ default: {
572
+ style: shapeStyles.point.default,
573
+ },
574
+ active: {
575
+ style: shapeStyles.point.active,
576
+ },
577
+ inactive: {
578
+ style: shapeStyles.point.inactive,
579
+ },
580
+ selected: {
581
+ style: shapeStyles.point.selected,
582
+ },
583
+ },
584
+ bowtie: {
585
+ default: {
586
+ style: shapeStyles.point.default,
587
+ },
588
+ active: {
589
+ style: shapeStyles.point.active,
590
+ },
591
+ inactive: {
592
+ style: shapeStyles.point.inactive,
593
+ },
594
+ selected: {
595
+ style: shapeStyles.point.selected,
596
+ },
597
+ },
598
+ diamond: {
599
+ default: {
600
+ style: shapeStyles.point.default,
601
+ },
602
+ active: {
603
+ style: shapeStyles.point.active,
604
+ },
605
+ inactive: {
606
+ style: shapeStyles.point.inactive,
607
+ },
608
+ selected: {
609
+ style: shapeStyles.point.selected,
610
+ },
611
+ },
612
+ hexagon: {
613
+ default: {
614
+ style: shapeStyles.point.default,
615
+ },
616
+ active: {
617
+ style: shapeStyles.point.active,
618
+ },
619
+ inactive: {
620
+ style: shapeStyles.point.inactive,
621
+ },
622
+ selected: {
623
+ style: shapeStyles.point.selected,
624
+ },
625
+ },
626
+ triangle: {
627
+ default: {
628
+ style: shapeStyles.point.default,
629
+ },
630
+ active: {
631
+ style: shapeStyles.point.active,
632
+ },
633
+ inactive: {
634
+ style: shapeStyles.point.inactive,
635
+ },
636
+ selected: {
637
+ style: shapeStyles.point.selected,
638
+ },
639
+ },
640
+ 'triangle-down': {
641
+ default: {
642
+ style: shapeStyles.point.default,
643
+ },
644
+ active: {
645
+ style: shapeStyles.point.active,
646
+ },
647
+ inactive: {
648
+ style: shapeStyles.point.inactive,
649
+ },
650
+ selected: {
651
+ style: shapeStyles.point.selected,
652
+ },
653
+ },
654
+ 'hollow-circle': {
655
+ default: {
656
+ style: shapeStyles.hollowPoint.default,
657
+ },
658
+ active: {
659
+ style: shapeStyles.hollowPoint.active,
660
+ },
661
+ inactive: {
662
+ style: shapeStyles.hollowPoint.inactive,
663
+ },
664
+ selected: {
665
+ style: shapeStyles.hollowPoint.selected,
666
+ },
667
+ },
668
+ 'hollow-square': {
669
+ default: {
670
+ style: shapeStyles.hollowPoint.default,
671
+ },
672
+ active: {
673
+ style: shapeStyles.hollowPoint.active,
674
+ },
675
+ inactive: {
676
+ style: shapeStyles.hollowPoint.inactive,
677
+ },
678
+ selected: {
679
+ style: shapeStyles.hollowPoint.selected,
680
+ },
681
+ },
682
+ 'hollow-bowtie': {
683
+ default: {
684
+ style: shapeStyles.hollowPoint.default,
685
+ },
686
+ active: {
687
+ style: shapeStyles.hollowPoint.active,
688
+ },
689
+ inactive: {
690
+ style: shapeStyles.hollowPoint.inactive,
691
+ },
692
+ selected: {
693
+ style: shapeStyles.hollowPoint.selected,
694
+ },
695
+ },
696
+ 'hollow-diamond': {
697
+ default: {
698
+ style: shapeStyles.hollowPoint.default,
699
+ },
700
+ active: {
701
+ style: shapeStyles.hollowPoint.active,
702
+ },
703
+ inactive: {
704
+ style: shapeStyles.hollowPoint.inactive,
705
+ },
706
+ selected: {
707
+ style: shapeStyles.hollowPoint.selected,
708
+ },
709
+ },
710
+ 'hollow-hexagon': {
711
+ default: {
712
+ style: shapeStyles.hollowPoint.default,
713
+ },
714
+ active: {
715
+ style: shapeStyles.hollowPoint.active,
716
+ },
717
+ inactive: {
718
+ style: shapeStyles.hollowPoint.inactive,
719
+ },
720
+ selected: {
721
+ style: shapeStyles.hollowPoint.selected,
722
+ },
723
+ },
724
+ 'hollow-triangle': {
725
+ default: {
726
+ style: shapeStyles.hollowPoint.default,
727
+ },
728
+ active: {
729
+ style: shapeStyles.hollowPoint.active,
730
+ },
731
+ inactive: {
732
+ style: shapeStyles.hollowPoint.inactive,
733
+ },
734
+ selected: {
735
+ style: shapeStyles.hollowPoint.selected,
736
+ },
737
+ },
738
+ 'hollow-triangle-down': {
739
+ default: {
740
+ style: shapeStyles.hollowPoint.default,
741
+ },
742
+ active: {
743
+ style: shapeStyles.hollowPoint.active,
744
+ },
745
+ inactive: {
746
+ style: shapeStyles.hollowPoint.inactive,
747
+ },
748
+ selected: {
749
+ style: shapeStyles.hollowPoint.selected,
750
+ },
751
+ },
752
+ cross: {
753
+ default: {
754
+ style: shapeStyles.hollowPoint.default,
755
+ },
756
+ active: {
757
+ style: shapeStyles.hollowPoint.active,
758
+ },
759
+ inactive: {
760
+ style: shapeStyles.hollowPoint.inactive,
761
+ },
762
+ selected: {
763
+ style: shapeStyles.hollowPoint.selected,
764
+ },
765
+ },
766
+ tick: {
767
+ default: {
768
+ style: shapeStyles.hollowPoint.default,
769
+ },
770
+ active: {
771
+ style: shapeStyles.hollowPoint.active,
772
+ },
773
+ inactive: {
774
+ style: shapeStyles.hollowPoint.inactive,
775
+ },
776
+ selected: {
777
+ style: shapeStyles.hollowPoint.selected,
778
+ },
779
+ },
780
+ plus: {
781
+ default: {
782
+ style: shapeStyles.hollowPoint.default,
783
+ },
784
+ active: {
785
+ style: shapeStyles.hollowPoint.active,
786
+ },
787
+ inactive: {
788
+ style: shapeStyles.hollowPoint.inactive,
789
+ },
790
+ selected: {
791
+ style: shapeStyles.hollowPoint.selected,
792
+ },
793
+ },
794
+ hyphen: {
795
+ default: {
796
+ style: shapeStyles.hollowPoint.default,
797
+ },
798
+ active: {
799
+ style: shapeStyles.hollowPoint.active,
800
+ },
801
+ inactive: {
802
+ style: shapeStyles.hollowPoint.inactive,
803
+ },
804
+ selected: {
805
+ style: shapeStyles.hollowPoint.selected,
806
+ },
807
+ },
808
+ line: {
809
+ default: {
810
+ style: shapeStyles.hollowPoint.default,
811
+ },
812
+ active: {
813
+ style: shapeStyles.hollowPoint.active,
814
+ },
815
+ inactive: {
816
+ style: shapeStyles.hollowPoint.inactive,
817
+ },
818
+ selected: {
819
+ style: shapeStyles.hollowPoint.selected,
820
+ },
821
+ },
822
+ },
823
+ area: {
824
+ area: {
825
+ default: {
826
+ style: shapeStyles.area.default,
827
+ },
828
+ active: {
829
+ style: shapeStyles.area.active,
830
+ },
831
+ inactive: {
832
+ style: shapeStyles.area.inactive,
833
+ },
834
+ selected: {
835
+ style: shapeStyles.area.selected,
836
+ },
837
+ },
838
+ smooth: {
839
+ default: {
840
+ style: shapeStyles.area.default,
841
+ },
842
+ active: {
843
+ style: shapeStyles.area.active,
844
+ },
845
+ inactive: {
846
+ style: shapeStyles.area.inactive,
847
+ },
848
+ selected: {
849
+ style: shapeStyles.area.selected,
850
+ },
851
+ },
852
+ line: {
853
+ default: {
854
+ style: shapeStyles.hollowArea.default,
855
+ },
856
+ active: {
857
+ style: shapeStyles.hollowArea.active,
858
+ },
859
+ inactive: {
860
+ style: shapeStyles.hollowArea.inactive,
861
+ },
862
+ selected: {
863
+ style: shapeStyles.hollowArea.selected,
864
+ },
865
+ },
866
+ 'smooth-line': {
867
+ default: {
868
+ style: shapeStyles.hollowArea.default,
869
+ },
870
+ active: {
871
+ style: shapeStyles.hollowArea.active,
872
+ },
873
+ inactive: {
874
+ style: shapeStyles.hollowArea.inactive,
875
+ },
876
+ selected: {
877
+ style: shapeStyles.hollowArea.selected,
878
+ },
879
+ },
880
+ },
881
+ schema: {
882
+ candle: {
883
+ default: {
884
+ style: shapeStyles.hollowInterval.default,
885
+ },
886
+ active: {
887
+ style: shapeStyles.hollowInterval.active,
888
+ },
889
+ inactive: {
890
+ style: shapeStyles.hollowInterval.inactive,
891
+ },
892
+ selected: {
893
+ style: shapeStyles.hollowInterval.selected,
894
+ },
895
+ },
896
+ box: {
897
+ default: {
898
+ style: shapeStyles.hollowInterval.default,
899
+ },
900
+ active: {
901
+ style: shapeStyles.hollowInterval.active,
902
+ },
903
+ inactive: {
904
+ style: shapeStyles.hollowInterval.inactive,
905
+ },
906
+ selected: {
907
+ style: shapeStyles.hollowInterval.selected,
908
+ },
909
+ },
910
+ },
911
+ edge: {
912
+ line: {
913
+ default: {
914
+ style: shapeStyles.line.default,
915
+ },
916
+ active: {
917
+ style: shapeStyles.line.active,
918
+ },
919
+ inactive: {
920
+ style: shapeStyles.line.inactive,
921
+ },
922
+ selected: {
923
+ style: shapeStyles.line.selected,
924
+ },
925
+ },
926
+ vhv: {
927
+ default: {
928
+ style: shapeStyles.line.default,
929
+ },
930
+ active: {
931
+ style: shapeStyles.line.active,
932
+ },
933
+ inactive: {
934
+ style: shapeStyles.line.inactive,
935
+ },
936
+ selected: {
937
+ style: shapeStyles.line.selected,
938
+ },
939
+ },
940
+ smooth: {
941
+ default: {
942
+ style: shapeStyles.line.default,
943
+ },
944
+ active: {
945
+ style: shapeStyles.line.active,
946
+ },
947
+ inactive: {
948
+ style: shapeStyles.line.inactive,
949
+ },
950
+ selected: {
951
+ style: shapeStyles.line.selected,
952
+ },
953
+ },
954
+ arc: {
955
+ default: {
956
+ style: shapeStyles.line.default,
957
+ },
958
+ active: {
959
+ style: shapeStyles.line.active,
960
+ },
961
+ inactive: {
962
+ style: shapeStyles.line.inactive,
963
+ },
964
+ selected: {
965
+ style: shapeStyles.line.selected,
966
+ },
967
+ },
968
+ },
969
+ },
970
+ components: {
971
+ axis: {
972
+ common: axisStyles,
973
+ top: deepMix({}, axisStyles, {
974
+ position: 'top',
975
+ grid: null,
976
+ title: null,
977
+ verticalLimitLength: 1 / 2,
978
+ }),
979
+ bottom: deepMix({}, axisStyles, {
980
+ position: 'bottom',
981
+ grid: null,
982
+ title: null,
983
+ verticalLimitLength: 1 / 2,
984
+ }),
985
+ left: deepMix({}, axisStyles, {
986
+ position: 'left',
987
+ title: null,
988
+ line: null,
989
+ tickLine: null,
990
+ verticalLimitLength: 1 / 3,
991
+ }),
992
+ right: deepMix({}, axisStyles, {
993
+ position: 'right',
994
+ title: null,
995
+ line: null,
996
+ tickLine: null,
997
+ verticalLimitLength: 1 / 3,
998
+ }),
999
+ circle: deepMix({}, axisStyles, {
1000
+ title: null,
1001
+ grid: deepMix({}, axisStyles.grid, { line: { type: 'line' } }),
1002
+ }),
1003
+ radius: deepMix({}, axisStyles, {
1004
+ title: null,
1005
+ grid: deepMix({}, axisStyles.grid, { line: { type: 'circle' } }),
1006
+ }),
1007
+ },
1008
+ legend: {
1009
+ common: legendStyles,
1010
+ right: deepMix({}, legendStyles, {
1011
+ layout: 'vertical',
1012
+ }),
1013
+ left: deepMix({}, legendStyles, {
1014
+ layout: 'vertical',
1015
+ }),
1016
+ top: deepMix({}, legendStyles, {
1017
+ layout: 'horizontal',
1018
+ }),
1019
+ bottom: deepMix({}, legendStyles, {
1020
+ layout: 'horizontal',
1021
+ }),
1022
+ continuous: {
1023
+ title: null,
1024
+ background: null,
1025
+ track: {},
1026
+ rail: {
1027
+ type: 'color',
1028
+ size: styleSheet.sliderRailHeight,
1029
+ defaultLength: styleSheet.sliderRailWidth,
1030
+ style: {
1031
+ fill: styleSheet.sliderRailFillColor,
1032
+ stroke: styleSheet.sliderRailBorderColor,
1033
+ lineWidth: styleSheet.sliderRailBorder,
1034
+ },
1035
+ },
1036
+ label: {
1037
+ align: 'rail',
1038
+ spacing: 4, // 文本和 rail 的间距
1039
+ formatter: null,
1040
+ style: {
1041
+ fill: styleSheet.sliderLabelTextFillColor,
1042
+ fontSize: styleSheet.sliderLabelTextFontSize,
1043
+ lineHeight: styleSheet.sliderLabelTextLineHeight,
1044
+ textBaseline: 'middle',
1045
+ fontFamily: styleSheet.fontFamily,
1046
+ },
1047
+ },
1048
+ handler: {
1049
+ size: styleSheet.sliderHandlerWidth,
1050
+ style: {
1051
+ fill: styleSheet.sliderHandlerFillColor,
1052
+ stroke: styleSheet.sliderHandlerBorderColor,
1053
+ },
1054
+ },
1055
+ slidable: true,
1056
+ padding: legendStyles.padding,
1057
+ },
1058
+ },
1059
+ tooltip: {
1060
+ showContent: true,
1061
+ follow: true,
1062
+ showCrosshairs: false,
1063
+ showMarkers: true,
1064
+ shared: false,
1065
+ enterable: false,
1066
+ position: 'auto',
1067
+ marker: {
1068
+ symbol: 'circle',
1069
+ stroke: styleSheet.tooltipMarkerStroke,
1070
+ fill: styleSheet.tooltipMarkerFill,
1071
+ shadowBlur: 10,
1072
+ shadowOffsetX: 0,
1073
+ shadowOffSetY: 0,
1074
+ shadowColor: 'rgba(0,0,0,0.09)',
1075
+ lineWidth: 2,
1076
+ r: 4,
1077
+ },
1078
+ crosshairs: {
1079
+ line: {
1080
+ style: {
1081
+ stroke: styleSheet.tooltipCrosshairsBorderColor,
1082
+ lineWidth: styleSheet.tooltipCrosshairsBorder,
1083
+ },
1084
+ },
1085
+ text: null,
1086
+ textBackground: {
1087
+ padding: 2,
1088
+ style: {
1089
+ fill: 'rgba(0, 0, 0, 0.25)',
1090
+ lineWidth: 0,
1091
+ stroke: null,
1092
+ },
1093
+ },
1094
+ follow: false,
1095
+ },
1096
+ // tooltip dom 样式
1097
+ domStyles: {
1098
+ [`${TOOLTIP_CSS_CONST.CONTAINER_CLASS}`]: {
1099
+ position: 'absolute',
1100
+ visibility: 'hidden',
1101
+ zIndex: 8,
1102
+ transition:
1103
+ 'left 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s, top 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s',
1104
+ background: styleSheet.tooltipContainerFillColor,
1105
+ opacity: styleSheet.tooltipContainerFillOpacity,
1106
+ boxShadow: styleSheet.tooltipContainerShadow,
1107
+ borderRadius: `${styleSheet.tooltipContainerBorderRadius}px`,
1108
+ color: styleSheet.tooltipTextFillColor,
1109
+ fontSize: `${styleSheet.tooltipTextFontSize}px`,
1110
+ fontFamily: styleSheet.fontFamily,
1111
+ lineHeight: `${styleSheet.tooltipTextLineHeight}px`,
1112
+ padding: '0 12px 0 12px',
1113
+ },
1114
+ [`${TOOLTIP_CSS_CONST.TITLE_CLASS}`]: {
1115
+ marginBottom: '12px',
1116
+ marginTop: '12px',
1117
+ },
1118
+ [`${TOOLTIP_CSS_CONST.LIST_CLASS}`]: {
1119
+ margin: 0,
1120
+ listStyleType: 'none',
1121
+ padding: 0,
1122
+ },
1123
+ [`${TOOLTIP_CSS_CONST.LIST_ITEM_CLASS}`]: {
1124
+ listStyleType: 'none',
1125
+ padding: 0,
1126
+ marginBottom: '12px',
1127
+ marginTop: '12px',
1128
+ marginLeft: 0,
1129
+ marginRight: 0,
1130
+ },
1131
+ [`${TOOLTIP_CSS_CONST.MARKER_CLASS}`]: {
1132
+ width: '8px',
1133
+ height: '8px',
1134
+ borderRadius: '50%',
1135
+ display: 'inline-block',
1136
+ marginRight: '8px',
1137
+ },
1138
+ [`${TOOLTIP_CSS_CONST.VALUE_CLASS}`]: {
1139
+ display: 'inline-block',
1140
+ float: 'right',
1141
+ marginLeft: '30px',
1142
+ },
1143
+ },
1144
+ },
1145
+ annotation: {
1146
+ arc: {
1147
+ style: {
1148
+ stroke: styleSheet.annotationArcBorderColor,
1149
+ lineWidth: styleSheet.annotationArcBorder,
1150
+ },
1151
+ animate: true,
1152
+ },
1153
+ line: {
1154
+ style: {
1155
+ stroke: styleSheet.annotationLineBorderColor,
1156
+ lineDash: styleSheet.annotationLineDash,
1157
+ lineWidth: styleSheet.annotationLineBorder,
1158
+ },
1159
+ text: {
1160
+ position: 'start',
1161
+ autoRotate: true,
1162
+ style: {
1163
+ fill: styleSheet.annotationTextFillColor,
1164
+ stroke: styleSheet.annotationTextBorderColor,
1165
+ lineWidth: styleSheet.annotationTextBorder,
1166
+ fontSize: styleSheet.annotationTextFontSize,
1167
+ textAlign: 'start',
1168
+ fontFamily: styleSheet.fontFamily,
1169
+ textBaseline: 'bottom',
1170
+ },
1171
+ },
1172
+ animate: true,
1173
+ },
1174
+ text: {
1175
+ style: {
1176
+ fill: styleSheet.annotationTextFillColor,
1177
+ stroke: styleSheet.annotationTextBorderColor,
1178
+ lineWidth: styleSheet.annotationTextBorder,
1179
+ fontSize: styleSheet.annotationTextFontSize,
1180
+ textBaseline: 'middle',
1181
+ textAlign: 'start',
1182
+ fontFamily: styleSheet.fontFamily,
1183
+ },
1184
+ animate: true,
1185
+ },
1186
+ region: {
1187
+ top: false,
1188
+ style: {
1189
+ lineWidth: styleSheet.annotationRegionBorder,
1190
+ stroke: styleSheet.annotationRegionBorderColor,
1191
+ fill: styleSheet.annotationRegionFillColor,
1192
+ fillOpacity: styleSheet.annotationRegionFillOpacity,
1193
+ }, // 辅助框的图形样式属性
1194
+ animate: true,
1195
+ },
1196
+ image: {
1197
+ top: false,
1198
+ animate: true,
1199
+ },
1200
+ dataMarker: {
1201
+ top: true,
1202
+ point: {
1203
+ style: {
1204
+ r: 3,
1205
+ stroke: styleSheet.brandColor,
1206
+ lineWidth: 2,
1207
+ },
1208
+ },
1209
+ line: {
1210
+ style: {
1211
+ stroke: styleSheet.annotationLineBorderColor,
1212
+ lineWidth: styleSheet.annotationLineBorder,
1213
+ },
1214
+ length: styleSheet.annotationDataMarkerLineLength,
1215
+ },
1216
+ text: {
1217
+ style: {
1218
+ textAlign: 'start',
1219
+ fill: styleSheet.annotationTextFillColor,
1220
+ stroke: styleSheet.annotationTextBorderColor,
1221
+ lineWidth: styleSheet.annotationTextBorder,
1222
+ fontSize: styleSheet.annotationTextFontSize,
1223
+ fontFamily: styleSheet.fontFamily,
1224
+ },
1225
+ },
1226
+ direction: 'upward',
1227
+ autoAdjust: true,
1228
+ animate: true,
1229
+ },
1230
+ dataRegion: {
1231
+ style: {
1232
+ region: {
1233
+ fill: styleSheet.annotationRegionFillColor,
1234
+ fillOpacity: styleSheet.annotationRegionFillOpacity,
1235
+ },
1236
+ text: {
1237
+ textAlign: 'center',
1238
+ textBaseline: 'bottom',
1239
+ fill: styleSheet.annotationTextFillColor,
1240
+ stroke: styleSheet.annotationTextBorderColor,
1241
+ lineWidth: styleSheet.annotationTextBorder,
1242
+ fontSize: styleSheet.annotationTextFontSize,
1243
+ fontFamily: styleSheet.fontFamily,
1244
+ },
1245
+ },
1246
+ animate: true,
1247
+ },
1248
+ },
1249
+ slider: {
1250
+ common: {
1251
+ padding: [8, 8, 8, 8],
1252
+ },
1253
+ },
1254
+ scrollbar: {
1255
+ common: {
1256
+ padding: [8, 8, 8, 8],
1257
+ },
1258
+ },
1259
+ },
1260
+ labels: {
1261
+ offset: 12,
1262
+ style: {
1263
+ fill: styleSheet.labelFillColor,
1264
+ fontSize: styleSheet.labelFontSize,
1265
+ fontFamily: styleSheet.fontFamily,
1266
+ stroke: styleSheet.labelBorderColor,
1267
+ lineWidth: styleSheet.labelBorder,
1268
+ },
1269
+ fillColorDark: styleSheet.labelFillColorDark,
1270
+ fillColorLight: styleSheet.labelFillColorLight,
1271
+ autoRotate: true,
1272
+ },
1273
+ innerLabels: {
1274
+ style: {
1275
+ fill: styleSheet.innerLabelFillColor,
1276
+ fontSize: styleSheet.innerLabelFontSize,
1277
+ fontFamily: styleSheet.fontFamily,
1278
+ stroke: styleSheet.innerLabelBorderColor,
1279
+ lineWidth: styleSheet.innerLabelBorder,
1280
+ },
1281
+ autoRotate: true,
1282
+ },
1283
+ overflowLabels: {
1284
+ style: {
1285
+ fill: styleSheet.overflowLabelFillColor,
1286
+ fontSize: styleSheet.overflowLabelFontSize,
1287
+ fontFamily: styleSheet.fontFamily,
1288
+ stroke: styleSheet.overflowLabelBorderColor,
1289
+ lineWidth: styleSheet.overflowLabelBorder,
1290
+ },
1291
+ },
1292
+ pieLabels: {
1293
+ labelHeight: 14,
1294
+ offset: 10,
1295
+ labelLine: {
1296
+ style: {
1297
+ lineWidth: styleSheet.labelLineBorder,
1298
+ },
1299
+ },
1300
+ autoRotate: true,
1301
+ },
1302
+ }
1303
+ }