UNPKG

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