UNPKG

20.5 kBJavaScriptView Raw
1var BLACK_COLORS = {
2 100: '#000',
3 95: '#0D0D0D',
4 85: '#262626',
5 65: '#595959',
6 45: '#8C8C8C',
7 25: '#BFBFBF',
8 15: '#D9D9D9',
9 6: '#F0F0F0',
10};
11var WHITE_COLORS = {
12 100: '#FFFFFF',
13 95: '#F2F2F2',
14 85: '#D9D9D9',
15 65: '#A6A6A6',
16 45: '#737373',
17 25: '#404040',
18 15: '#262626',
19 6: '#0F0F0F',
20};
21var QUALITATIVE_10 = [
22 '#5B8FF9',
23 '#5AD8A6',
24 '#5D7092',
25 '#F6BD16',
26 '#6F5EF9',
27 '#6DC8EC',
28 '#945FB9',
29 '#FF9845',
30 '#1E9493',
31 '#FF99C3',
32];
33var QUALITATIVE_20 = [
34 '#5B8FF9',
35 '#CDDDFD',
36 '#5AD8A6',
37 '#CDF3E4',
38 '#5D7092',
39 '#CED4DE',
40 '#F6BD16',
41 '#FCEBB9',
42 '#6F5EF9',
43 '#D3CEFD',
44 '#6DC8EC',
45 '#D3EEF9',
46 '#945FB9',
47 '#DECFEA',
48 '#FF9845',
49 '#FFE0C7',
50 '#1E9493',
51 '#BBDEDE',
52 '#FF99C3',
53 '#FFE0ED',
54];
55/** 单色顺序色板 */
56var SINGLE_SEQUENCE = [
57 '#B8E1FF',
58 '#9AC5FF',
59 '#7DAAFF',
60 '#5B8FF9',
61 '#3D76DD',
62 '#085EC0',
63 '#0047A5',
64 '#00318A',
65 '#001D70',
66];
67export var createLightStyleSheet = function (cfg) {
68 if (cfg === void 0) { cfg = {}; }
69 var _a = cfg.backgroundColor, backgroundColor = _a === void 0 ? 'transparent' : _a, _b = cfg.subColor, subColor = _b === void 0 ? 'rgba(0,0,0,0.05)' : _b, _c = cfg.paletteQualitative10, paletteQualitative10 = _c === void 0 ? QUALITATIVE_10 : _c, _d = cfg.paletteQualitative20, paletteQualitative20 = _d === void 0 ? QUALITATIVE_20 : _d, _e = cfg.paletteSemanticRed, paletteSemanticRed = _e === void 0 ? '#F4664A' : _e, _f = cfg.paletteSemanticGreen, paletteSemanticGreen = _f === void 0 ? '#30BF78' : _f, _g = cfg.paletteSemanticYellow, paletteSemanticYellow = _g === void 0 ? '#FAAD14' : _g, _h = cfg.paletteSequence, paletteSequence = _h === void 0 ? SINGLE_SEQUENCE : _h, _j = cfg.fontFamily, fontFamily = _j === void 0 ? "\"Segoe UI\", Roboto, \"Helvetica Neue\", Arial,\n \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\",\n \"Noto Color Emoji\"" : _j;
70 var _k = cfg.brandColor, brandColor = _k === void 0 ? paletteQualitative10[0] : _k;
71 return {
72 /** 图表背景色 */
73 backgroundColor: backgroundColor,
74 /** 主题色 */
75 brandColor: brandColor,
76 /** 图表辅助色 */
77 subColor: subColor,
78 /** 分类色板 1,在数据量小于等于 10 时使用 */
79 paletteQualitative10: paletteQualitative10,
80 /** 分类色板 2,在数据量大于 10 时使用 */
81 paletteQualitative20: paletteQualitative20,
82 /** 语义色 */
83 paletteSemanticRed: paletteSemanticRed,
84 /** 语义色 */
85 paletteSemanticGreen: paletteSemanticGreen,
86 /** 语义色 */
87 paletteSemanticYellow: paletteSemanticYellow,
88 /** (单色)顺序色板 */
89 paletteSequence: paletteSequence,
90 /** 字体 */
91 fontFamily: fontFamily,
92 // -------------------- 坐标轴 --------------------
93 /** 坐标轴线颜色 */
94 axisLineBorderColor: BLACK_COLORS[25],
95 /** 坐标轴线粗细 */
96 axisLineBorder: 1,
97 /** 坐标轴线 lineDash 设置 */
98 axisLineDash: null,
99 /** 坐标轴标题颜色 */
100 axisTitleTextFillColor: BLACK_COLORS[65],
101 /** 坐标轴标题文本字体大小 */
102 axisTitleTextFontSize: 12,
103 /** 坐标轴标题文本行高 */
104 axisTitleTextLineHeight: 12,
105 /** 坐标轴标题文本字体粗细 */
106 axisTitleTextFontWeight: 'normal',
107 /** 坐标轴标题距离坐标轴文本的间距 */
108 axisTitleSpacing: 12,
109 /** 坐标轴刻度线颜色 */
110 axisTickLineBorderColor: BLACK_COLORS[25],
111 /** 坐标轴刻度线长度 */
112 axisTickLineLength: 4,
113 /** 坐标轴刻度线粗细 */
114 axisTickLineBorder: 1,
115 /** 坐标轴次刻度线颜色 */
116 axisSubTickLineBorderColor: BLACK_COLORS[15],
117 /** 坐标轴次刻度线长度 */
118 axisSubTickLineLength: 2,
119 /** 坐标轴次刻度线粗细 */
120 axisSubTickLineBorder: 1,
121 /** 坐标轴刻度文本颜色 */
122 axisLabelFillColor: BLACK_COLORS[45],
123 /** 坐标轴刻度文本字体大小 */
124 axisLabelFontSize: 12,
125 /** 坐标轴刻度文本行高 */
126 axisLabelLineHeight: 12,
127 /** 坐标轴刻度文本字体粗细 */
128 axisLabelFontWeight: 'normal',
129 /** 坐标轴刻度文本距离坐标轴线的间距 */
130 axisLabelOffset: 8,
131 /** 坐标轴网格线颜色 */
132 axisGridBorderColor: BLACK_COLORS[15],
133 /** 坐标轴网格线粗细 */
134 axisGridBorder: 1,
135 /** 坐标轴网格线虚线设置 */
136 axisGridLineDash: null,
137 // -------------------- 图例 --------------------
138 /** 图例标题颜色 */
139 legendTitleTextFillColor: BLACK_COLORS[45],
140 /** 图例标题文本字体大小 */
141 legendTitleTextFontSize: 12,
142 /** 图例标题文本行高 */
143 legendTitleTextLineHeight: 21,
144 /** 图例标题文本字体粗细 */
145 legendTitleTextFontWeight: 'normal',
146 /** 图例 marker 颜色 */
147 legendMarkerColor: brandColor,
148 /** 图例 marker 距离图例文本的间距 */
149 legendMarkerSpacing: 8,
150 /** 图例 marker 默认半径大小 */
151 legendMarkerSize: 4,
152 /** 图例 'circle' marker 半径 */
153 legendCircleMarkerSize: 4,
154 /** 图例 'square' marker 半径 */
155 legendSquareMarkerSize: 4,
156 /** 图例 'line' marker 半径 */
157 legendLineMarkerSize: 5,
158 /** 图例项文本颜色 */
159 legendItemNameFillColor: BLACK_COLORS[65],
160 /** 图例项文本字体大小 */
161 legendItemNameFontSize: 12,
162 /** 图例项文本行高 */
163 legendItemNameLineHeight: 12,
164 /** 图例项粗细 */
165 legendItemNameFontWeight: 'normal',
166 /** 图例项之间的水平间距 */
167 legendItemSpacing: 24,
168 /** 图例项垂直方向的间隔 */
169 legendItemMarginBottom: 12,
170 /** 图例与图表绘图区域的偏移距离 */
171 legendPadding: [8, 8, 8, 8],
172 /** 水平布局的图例与绘图区域偏移距离 */
173 legendHorizontalPadding: [8, 0, 8, 0],
174 /** 垂直布局的图例与绘图区域偏移距离 */
175 legendVerticalPadding: [0, 8, 0, 8],
176 // 图例分页器
177 /** 图例分页器 marker 大小 */
178 legendPageNavigatorMarkerSize: 12,
179 /** 图例分页器 marker 非激活状态填充色 */
180 legendPageNavigatorMarkerInactiveFillColor: BLACK_COLORS[100],
181 /** 图例分页器 marker 非激活状态填充色透明度 */
182 legendPageNavigatorMarkerInactiveFillOpacity: 0.45,
183 /** 图例分页器 marker 填充色 */
184 legendPageNavigatorMarkerFillColor: BLACK_COLORS[100],
185 /** 图例分页器 marker 填充色透明度 */
186 legendPageNavigatorMarkerFillOpacity: 1,
187 /** 图例分页器文本颜色 */
188 legendPageNavigatorTextFillColor: BLACK_COLORS[45],
189 /** 图例分页器文本字体大小 */
190 legendPageNavigatorTextFontSize: 12,
191 /** 连续图例滑块填充色 */
192 sliderRailFillColor: BLACK_COLORS[15],
193 /** 连续图例滑块边框粗细 */
194 sliderRailBorder: 0,
195 /** 连续图例滑块边框颜色 */
196 sliderRailBorderColor: null,
197 /** 连续图例滑块宽度 */
198 sliderRailWidth: 100,
199 /** 连续图例滑块高度 */
200 sliderRailHeight: 12,
201 /** 连续图例文本颜色 */
202 sliderLabelTextFillColor: BLACK_COLORS[45],
203 /** 连续图例文本字体大小 */
204 sliderLabelTextFontSize: 12,
205 /** 连续图例文本行高 */
206 sliderLabelTextLineHeight: 12,
207 /** 连续图例文本字体粗细 */
208 sliderLabelTextFontWeight: 'normal',
209 /** 连续图例滑块颜色 */
210 sliderHandlerFillColor: BLACK_COLORS[6],
211 /** 连续图例滑块宽度 */
212 sliderHandlerWidth: 10,
213 /** 连续图例滑块高度 */
214 sliderHandlerHeight: 14,
215 /** 连续图例滑块边框粗细 */
216 sliderHandlerBorder: 1,
217 /** 连续图例滑块边框颜色 */
218 sliderHandlerBorderColor: BLACK_COLORS[25],
219 // -------------------- Annotation,图形标注 --------------------
220 /** arc 图形标注描边颜色 */
221 annotationArcBorderColor: BLACK_COLORS[15],
222 /** arc 图形标注粗细 */
223 annotationArcBorder: 1,
224 /** line 图形标注颜色 */
225 annotationLineBorderColor: BLACK_COLORS[25],
226 /** line 图形标注粗细 */
227 annotationLineBorder: 1,
228 /** lube 图形标注的虚线间隔 */
229 annotationLineDash: null,
230 /** text 图形标注文本颜色 */
231 annotationTextFillColor: BLACK_COLORS[65],
232 /** text 图形标注文本字体大小 */
233 annotationTextFontSize: 12,
234 /** text 图形标注文本行高 */
235 annotationTextLineHeight: 12,
236 /** text 图形标注文本字体粗细 */
237 annotationTextFontWeight: 'normal',
238 /** text 图形标注文本边框颜色 */
239 annotationTextBorderColor: null,
240 /** text 图形标注文本边框粗细 */
241 annotationTextBorder: 0,
242 /** region 图形标注填充颜色 */
243 annotationRegionFillColor: BLACK_COLORS[100],
244 /** region 图形标注填充颜色透明色 */
245 annotationRegionFillOpacity: 0.06,
246 /** region 图形标注描边粗细 */
247 annotationRegionBorder: 0,
248 /** region 图形标注描边颜色 */
249 annotationRegionBorderColor: null,
250 /** dataMarker 图形标注线的长度 */
251 annotationDataMarkerLineLength: 16,
252 // -------------------- Tooltip --------------------
253 /** tooltip crosshairs 辅助线颜色 */
254 tooltipCrosshairsBorderColor: BLACK_COLORS[25],
255 /** tooltip crosshairs 辅助线粗细 */
256 tooltipCrosshairsBorder: 1,
257 /** tooltip crosshairs 辅助线虚线间隔 */
258 tooltipCrosshairsLineDash: null,
259 /** tooltip 内容框背景色 */
260 tooltipContainerFillColor: 'rgb(255, 255, 255)',
261 tooltipContainerFillOpacity: 0.95,
262 /** tooltip 内容框阴影 */
263 tooltipContainerShadow: '0px 0px 10px #aeaeae',
264 /** tooltip 内容框圆角 */
265 tooltipContainerBorderRadius: 3,
266 /** tooltip 文本颜色 */
267 tooltipTextFillColor: BLACK_COLORS[65],
268 /** tooltip 文本字体大小 */
269 tooltipTextFontSize: 12,
270 /** tooltip 文本行高 */
271 tooltipTextLineHeight: 12,
272 /** tooltip 文本字体粗细 */
273 tooltipTextFontWeight: 'bold',
274 // -------------------- Geometry labels --------------------
275 /** Geometry label 文本颜色 */
276 labelFillColor: BLACK_COLORS[65],
277 labelFillColorDark: '#2c3542',
278 labelFillColorLight: '#ffffff',
279 /** Geometry label 文本字体大小 */
280 labelFontSize: 12,
281 /** Geometry label 文本行高 */
282 labelLineHeight: 12,
283 /** Geometry label 文本字体粗细 */
284 labelFontWeight: 'normal',
285 /** Geometry label 文本描边颜色 */
286 labelBorderColor: null,
287 /** Geometry label 文本描边粗细 */
288 labelBorder: 0,
289 /** Geometry innerLabel 文本颜色 */
290 innerLabelFillColor: WHITE_COLORS[100],
291 /** Geometry innerLabel 文本字体大小 */
292 innerLabelFontSize: 12,
293 /** Geometry innerLabel 文本行高 */
294 innerLabelLineHeight: 12,
295 /** Geometry innerLabel 文本字体粗细 */
296 innerLabelFontWeight: 'normal',
297 /** Geometry innerLabel 文本描边颜色 */
298 innerLabelBorderColor: null,
299 /** Geometry innerLabel 文本描边粗细 */
300 innerLabelBorder: 0,
301 /** Geometry overflowLabel 文本颜色 */
302 overflowLabelFillColor: BLACK_COLORS[65],
303 /** Geometry overflowLabel 文本字体大小 */
304 overflowLabelFontSize: 12,
305 /** Geometry overflowLabel 文本行高 */
306 overflowLabelLineHeight: 12,
307 /** Geometry overflowLabel 文本字体粗细 */
308 overflowLabelFontWeight: 'normal',
309 /** Geometry overflowLabel 文本描边颜色 */
310 overflowLabelBorderColor: WHITE_COLORS[100],
311 /** Geometry overflowLabel 文本描边粗细 */
312 overflowLabelBorder: 1,
313 /** Geometry label 文本连接线粗细 */
314 labelLineBorder: 1,
315 /** Geometry label 文本连接线颜色 */
316 labelLineBorderColor: BLACK_COLORS[25],
317 // -------------------- Slider 组件样式--------------------
318 /** slider 滑道高度 */
319 cSliderRailHieght: 16,
320 /** slider 滑道背景色 */
321 cSliderBackgroundFillColor: '#416180',
322 /** slider 滑道背景色透明度 */
323 cSliderBackgroundFillOpacity: 0.05,
324 /** slider 滑道前景色 */
325 cSliderForegroundFillColor: '#5B8FF9',
326 /** slider 滑道前景色透明度 */
327 cSliderForegroundFillOpacity: 0.15,
328 // slider handlerStyle 手柄样式
329 /** slider 手柄高度 */
330 cSliderHandlerHeight: 24,
331 /** Slider 手柄宽度 */
332 cSliderHandlerWidth: 10,
333 /** Slider 手柄背景色 */
334 cSliderHandlerFillColor: '#F7F7F7',
335 /** Slider 手柄背景色透明度 */
336 cSliderHandlerFillOpacity: 1,
337 /** Slider 手柄高亮背景色 */
338 cSliderHandlerHighlightFillColor: '#FFF',
339 /** Slider 手柄边框色 */
340 cSliderHandlerBorderColor: '#BFBFBF',
341 /** Slider 手柄边框粗细 */
342 cSliderHandlerBorder: 1,
343 /** Slider 手柄边框圆角 */
344 cSliderHandlerBorderRadius: 2,
345 // slider textStyle 字体标签样式
346 /** Slider 字体标签颜色 */
347 cSliderTextFillColor: '#000',
348 /** Slider 字体标签透明度 */
349 cSliderTextFillOpacity: 0.45,
350 /** Slider 字体标签大小 */
351 cSliderTextFontSize: 12,
352 /** Slider 字体标签行高 */
353 cSliderTextLineHeight: 12,
354 /** Slider 字体标签字重 */
355 cSliderTextFontWeight: 'normal',
356 /** Slider 字体标签描边色 */
357 cSliderTextBorderColor: null,
358 /** Slider 字体标签描边粗细 */
359 cSliderTextBorder: 0,
360 // -------------------- Scrollbar 组件样式--------------------
361 /** 滚动条 滚道填充色 */
362 scrollbarTrackFillColor: 'rgba(0,0,0,0)',
363 /** 滚动条 滑块填充色 */
364 scrollbarThumbFillColor: 'rgba(0,0,0,0.15)',
365 /** 滚动条 滑块高亮填充色 */
366 scrollbarThumbHighlightFillColor: 'rgba(0,0,0,0.2)',
367 // -------------------- Geometry 图形样式--------------------
368 /** 点图填充颜色 */
369 pointFillColor: brandColor,
370 /** 点图填充颜色透明度 */
371 pointFillOpacity: 0.95,
372 /** 点图大小 */
373 pointSize: 4,
374 /** 点图描边粗细 */
375 pointBorder: 1,
376 /** 点图描边颜色 */
377 pointBorderColor: WHITE_COLORS[100],
378 /** 点图描边透明度 */
379 pointBorderOpacity: 1,
380 /** 点图 active 状态下描边颜色 */
381 pointActiveBorderColor: BLACK_COLORS[100],
382 /** 点图 selected 状态下描边粗细 */
383 pointSelectedBorder: 2,
384 /** 点图 selected 状态下描边颜色 */
385 pointSelectedBorderColor: BLACK_COLORS[100],
386 /** 点图 inactive 状态下填充颜色透明度 */
387 pointInactiveFillOpacity: 0.3,
388 /** 点图 inactive 状态下描边透明度 */
389 pointInactiveBorderOpacity: 0.3,
390 /** 空心点图大小 */
391 hollowPointSize: 4,
392 /** 空心点图描边粗细 */
393 hollowPointBorder: 1,
394 /** 空心点图描边颜色 */
395 hollowPointBorderColor: brandColor,
396 /** 空心点图描边透明度 */
397 hollowPointBorderOpacity: 0.95,
398 hollowPointFillColor: WHITE_COLORS[100],
399 /** 空心点图 active 状态下描边粗细 */
400 hollowPointActiveBorder: 1,
401 /** 空心点图 active 状态下描边颜色 */
402 hollowPointActiveBorderColor: BLACK_COLORS[100],
403 /** 空心点图 active 状态下描边透明度 */
404 hollowPointActiveBorderOpacity: 1,
405 /** 空心点图 selected 状态下描边粗细 */
406 hollowPointSelectedBorder: 2,
407 /** 空心点图 selected 状态下描边颜色 */
408 hollowPointSelectedBorderColor: BLACK_COLORS[100],
409 /** 空心点图 selected 状态下描边透明度 */
410 hollowPointSelectedBorderOpacity: 1,
411 /** 空心点图 inactive 状态下描边透明度 */
412 hollowPointInactiveBorderOpacity: 0.3,
413 /** 线图粗细 */
414 lineBorder: 2,
415 /** 线图颜色 */
416 lineBorderColor: brandColor,
417 /** 线图透明度 */
418 lineBorderOpacity: 1,
419 /** 线图 Active 状态下粗细 */
420 lineActiveBorder: 3,
421 /** 线图 selected 状态下粗细 */
422 lineSelectedBorder: 3,
423 /** 线图 inactive 状态下透明度 */
424 lineInactiveBorderOpacity: 0.3,
425 /** area 填充颜色 */
426 areaFillColor: brandColor,
427 /** area 填充透明度 */
428 areaFillOpacity: 0.25,
429 /** area 在 active 状态下的填充透明度 */
430 areaActiveFillColor: brandColor,
431 areaActiveFillOpacity: 0.5,
432 /** area 在 selected 状态下的填充透明度 */
433 areaSelectedFillColor: brandColor,
434 areaSelectedFillOpacity: 0.5,
435 /** area inactive 状态下填充透明度 */
436 areaInactiveFillOpacity: 0.3,
437 /** hollowArea 颜色 */
438 hollowAreaBorderColor: brandColor,
439 /** hollowArea 边框粗细 */
440 hollowAreaBorder: 2,
441 /** hollowArea 边框透明度 */
442 hollowAreaBorderOpacity: 1,
443 /** hollowArea active 状态下的边框粗细 */
444 hollowAreaActiveBorder: 3,
445 hollowAreaActiveBorderColor: BLACK_COLORS[100],
446 /** hollowArea selected 状态下的边框粗细 */
447 hollowAreaSelectedBorder: 3,
448 hollowAreaSelectedBorderColor: BLACK_COLORS[100],
449 /** hollowArea inactive 状态下的边框透明度 */
450 hollowAreaInactiveBorderOpacity: 0.3,
451 /** interval 填充颜色 */
452 intervalFillColor: brandColor,
453 /** interval 填充透明度 */
454 intervalFillOpacity: 0.95,
455 /** interval active 状态下边框粗细 */
456 intervalActiveBorder: 1,
457 /** interval active 状态下边框颜色 */
458 intervalActiveBorderColor: BLACK_COLORS[100],
459 intervalActiveBorderOpacity: 1,
460 /** interval selected 状态下边框粗细 */
461 intervalSelectedBorder: 2,
462 /** interval selected 状态下边框颜色 */
463 intervalSelectedBorderColor: BLACK_COLORS[100],
464 /** interval selected 状态下边框透明度 */
465 intervalSelectedBorderOpacity: 1,
466 /** interval inactive 状态下边框透明度 */
467 intervalInactiveBorderOpacity: 0.3,
468 /** interval inactive 状态下填充透明度 */
469 intervalInactiveFillOpacity: 0.3,
470 /** interval 边框粗细 */
471 hollowIntervalBorder: 2,
472 /** hollowInterval 边框颜色 */
473 hollowIntervalBorderColor: brandColor,
474 /** hollowInterval 边框透明度 */
475 hollowIntervalBorderOpacity: 1,
476 hollowIntervalFillColor: WHITE_COLORS[100],
477 /** hollowInterval active 状态下边框粗细 */
478 hollowIntervalActiveBorder: 2,
479 /** hollowInterval active 状态下边框颜色 */
480 hollowIntervalActiveBorderColor: BLACK_COLORS[100],
481 /** hollowInterval selected 状态下边框粗细 */
482 hollowIntervalSelectedBorder: 3,
483 /** hollowInterval selected 状态下边框颜色 */
484 hollowIntervalSelectedBorderColor: BLACK_COLORS[100],
485 /** hollowInterval selected 状态下边框透明度 */
486 hollowIntervalSelectedBorderOpacity: 1,
487 /** hollowInterval inactive 状态下边框透明度 */
488 hollowIntervalInactiveBorderOpacity: 0.3,
489 };
490};
491export var antvLight = createLightStyleSheet();
492//# sourceMappingURL=light.js.map
\No newline at end of file