@vis-pilot/themes 0.1.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.
package/dist/dark.js ADDED
@@ -0,0 +1,402 @@
1
+ export const darkTheme = {
2
+ color: [
3
+ '#dd6b66',
4
+ '#759aa0',
5
+ '#e69d87',
6
+ '#8dc1a9',
7
+ '#ea7e53',
8
+ '#eedd78',
9
+ '#73a373',
10
+ '#73b9bc',
11
+ '#7289ab',
12
+ '#91ca8c',
13
+ '#f49f42'
14
+ ],
15
+ backgroundColor: 'rgba(51,51,51,1)',
16
+ textStyle: {},
17
+ title: {
18
+ textStyle: {
19
+ color: '#eeeeee'
20
+ },
21
+ subtextStyle: {
22
+ color: '#aaa'
23
+ }
24
+ },
25
+ line: {
26
+ itemStyle: {
27
+ borderWidth: 1
28
+ },
29
+ lineStyle: {
30
+ width: 2
31
+ },
32
+ symbolSize: 4,
33
+ symbol: 'circle',
34
+ smooth: false
35
+ },
36
+ radar: {
37
+ itemStyle: {
38
+ borderWidth: 1
39
+ },
40
+ lineStyle: {
41
+ width: 2
42
+ },
43
+ symbolSize: 4,
44
+ symbol: 'circle',
45
+ smooth: false
46
+ },
47
+ bar: {
48
+ itemStyle: {
49
+ barBorderWidth: 0,
50
+ barBorderColor: '#ccc'
51
+ }
52
+ },
53
+ pie: {
54
+ itemStyle: {
55
+ borderWidth: 0,
56
+ borderColor: '#ccc'
57
+ }
58
+ },
59
+ scatter: {
60
+ itemStyle: {
61
+ borderWidth: 0,
62
+ borderColor: '#ccc'
63
+ }
64
+ },
65
+ boxplot: {
66
+ itemStyle: {
67
+ borderWidth: 0,
68
+ borderColor: '#ccc'
69
+ }
70
+ },
71
+ parallel: {
72
+ itemStyle: {
73
+ borderWidth: 0,
74
+ borderColor: '#ccc'
75
+ }
76
+ },
77
+ sankey: {
78
+ itemStyle: {
79
+ borderWidth: 0,
80
+ borderColor: '#ccc'
81
+ }
82
+ },
83
+ funnel: {
84
+ itemStyle: {
85
+ borderWidth: 0,
86
+ borderColor: '#ccc'
87
+ }
88
+ },
89
+ gauge: {
90
+ itemStyle: {
91
+ borderWidth: 0,
92
+ borderColor: '#ccc'
93
+ },
94
+ axisLabel: {
95
+ color: '#eee'
96
+ },
97
+ axisTick: {
98
+ lineStyle: {
99
+ color: '#eee'
100
+ }
101
+ },
102
+ splitLine: {
103
+ lineStyle: {
104
+ color: '#eee'
105
+ }
106
+ },
107
+ detail: {
108
+ color: '#eee'
109
+ },
110
+ title: {
111
+ color: '#eee'
112
+ }
113
+ },
114
+ candlestick: {
115
+ itemStyle: {
116
+ color: '#fd1050',
117
+ color0: '#0cf49b',
118
+ borderColor: '#fd1050',
119
+ borderColor0: '#0cf49b',
120
+ borderWidth: 1
121
+ }
122
+ },
123
+ graph: {
124
+ itemStyle: {
125
+ borderWidth: 0,
126
+ borderColor: '#ccc'
127
+ },
128
+ lineStyle: {
129
+ width: 1,
130
+ color: '#aaa'
131
+ },
132
+ symbolSize: 4,
133
+ symbol: 'circle',
134
+ smooth: false,
135
+ color: [
136
+ '#dd6b66',
137
+ '#759aa0',
138
+ '#e69d87',
139
+ '#8dc1a9',
140
+ '#ea7e53',
141
+ '#eedd78',
142
+ '#73a373',
143
+ '#73b9bc',
144
+ '#7289ab',
145
+ '#91ca8c',
146
+ '#f49f42'
147
+ ],
148
+ label: {
149
+ color: '#eee'
150
+ }
151
+ },
152
+ map: {
153
+ itemStyle: {
154
+ areaColor: '#eee',
155
+ borderColor: '#444',
156
+ borderWidth: 0.5
157
+ },
158
+ label: {
159
+ color: '#000'
160
+ },
161
+ emphasis: {
162
+ itemStyle: {
163
+ areaColor: 'rgba(255,215,0,0.8)',
164
+ borderColor: '#444',
165
+ borderWidth: 1
166
+ },
167
+ label: {
168
+ color: 'rgb(100,0,0)'
169
+ }
170
+ }
171
+ },
172
+ geo: {
173
+ itemStyle: {
174
+ areaColor: '#eee',
175
+ borderColor: '#444',
176
+ borderWidth: 0.5
177
+ },
178
+ label: {
179
+ color: '#000'
180
+ },
181
+ emphasis: {
182
+ itemStyle: {
183
+ areaColor: 'rgba(255,215,0,0.8)',
184
+ borderColor: '#444',
185
+ borderWidth: 1
186
+ },
187
+ label: {
188
+ color: 'rgb(100,0,0)'
189
+ }
190
+ }
191
+ },
192
+ categoryAxis: {
193
+ axisLine: {
194
+ show: true,
195
+ lineStyle: {
196
+ color: '#eeeeee'
197
+ }
198
+ },
199
+ axisTick: {
200
+ show: true,
201
+ lineStyle: {
202
+ color: '#eeeeee'
203
+ }
204
+ },
205
+ axisLabel: {
206
+ show: true,
207
+ color: '#eeeeee'
208
+ },
209
+ splitLine: {
210
+ show: true,
211
+ lineStyle: {
212
+ color: ['#aaaaaa']
213
+ }
214
+ },
215
+ splitArea: {
216
+ show: false,
217
+ areaStyle: {
218
+ color: ['#eeeeee']
219
+ }
220
+ }
221
+ },
222
+ valueAxis: {
223
+ axisLine: {
224
+ show: true,
225
+ lineStyle: {
226
+ color: '#eeeeee'
227
+ }
228
+ },
229
+ axisTick: {
230
+ show: true,
231
+ lineStyle: {
232
+ color: '#eeeeee'
233
+ }
234
+ },
235
+ axisLabel: {
236
+ show: true,
237
+ color: '#eeeeee'
238
+ },
239
+ splitLine: {
240
+ show: true,
241
+ lineStyle: {
242
+ color: ['#aaaaaa']
243
+ }
244
+ },
245
+ splitArea: {
246
+ show: false,
247
+ areaStyle: {
248
+ color: ['#eeeeee']
249
+ }
250
+ }
251
+ },
252
+ logAxis: {
253
+ axisLine: {
254
+ show: true,
255
+ lineStyle: {
256
+ color: '#eeeeee'
257
+ }
258
+ },
259
+ axisTick: {
260
+ show: true,
261
+ lineStyle: {
262
+ color: '#eeeeee'
263
+ }
264
+ },
265
+ axisLabel: {
266
+ show: true,
267
+ color: '#eeeeee'
268
+ },
269
+ splitLine: {
270
+ show: true,
271
+ lineStyle: {
272
+ color: ['#aaaaaa']
273
+ }
274
+ },
275
+ splitArea: {
276
+ show: false,
277
+ areaStyle: {
278
+ color: ['#eeeeee']
279
+ }
280
+ }
281
+ },
282
+ timeAxis: {
283
+ axisLine: {
284
+ show: true,
285
+ lineStyle: {
286
+ color: '#eeeeee'
287
+ }
288
+ },
289
+ axisTick: {
290
+ show: true,
291
+ lineStyle: {
292
+ color: '#eeeeee'
293
+ }
294
+ },
295
+ axisLabel: {
296
+ show: true,
297
+ color: '#eeeeee'
298
+ },
299
+ splitLine: {
300
+ show: true,
301
+ lineStyle: {
302
+ color: ['#aaaaaa']
303
+ }
304
+ },
305
+ splitArea: {
306
+ show: false,
307
+ areaStyle: {
308
+ color: ['#eeeeee']
309
+ }
310
+ }
311
+ },
312
+ toolbox: {
313
+ iconStyle: {
314
+ borderColor: '#999'
315
+ },
316
+ emphasis: {
317
+ iconStyle: {
318
+ borderColor: '#666'
319
+ }
320
+ }
321
+ },
322
+ legend: {
323
+ textStyle: {
324
+ color: '#eeeeee'
325
+ },
326
+ left: 'center',
327
+ right: 'auto',
328
+ top: 'auto',
329
+ bottom: 15
330
+ },
331
+ tooltip: {
332
+ backgroundColor: 'rgba(50,50,50,0.9)',
333
+ borderColor: '#555',
334
+ textStyle: {
335
+ color: '#eee'
336
+ },
337
+ axisPointer: {
338
+ lineStyle: {
339
+ color: '#eeeeee',
340
+ width: '1'
341
+ },
342
+ crossStyle: {
343
+ color: '#eeeeee',
344
+ width: '1'
345
+ }
346
+ }
347
+ },
348
+ timeline: {
349
+ lineStyle: {
350
+ color: '#eeeeee',
351
+ width: 1
352
+ },
353
+ itemStyle: {
354
+ color: '#dd6b66',
355
+ borderWidth: 1
356
+ },
357
+ controlStyle: {
358
+ color: '#eeeeee',
359
+ borderColor: '#eeeeee',
360
+ borderWidth: 0.5
361
+ },
362
+ checkpointStyle: {
363
+ color: '#e43c59',
364
+ borderColor: 'rgba(194,53,49, 0.5)'
365
+ },
366
+ label: {
367
+ color: '#eeeeee'
368
+ },
369
+ emphasis: {
370
+ itemStyle: {
371
+ color: '#a9334c'
372
+ },
373
+ controlStyle: {
374
+ color: '#eeeeee',
375
+ borderColor: '#eeeeee',
376
+ borderWidth: 0.5
377
+ },
378
+ label: {
379
+ color: '#eeeeee'
380
+ }
381
+ }
382
+ },
383
+ visualMap: {
384
+ color: ['#bf444c', '#d88273', '#f6efa6']
385
+ },
386
+ markPoint: {
387
+ label: {
388
+ color: '#eee'
389
+ },
390
+ emphasis: {
391
+ label: {
392
+ color: '#eee'
393
+ }
394
+ }
395
+ },
396
+ grid: {
397
+ left: '15%',
398
+ right: '10%',
399
+ top: 65,
400
+ bottom: 80
401
+ }
402
+ };
@@ -0,0 +1,4 @@
1
+ export { lightTheme } from './light.js';
2
+ export { darkTheme } from './dark.js';
3
+ export declare function registerTheme(name: string, themeObject: object): void;
4
+ export declare function registerBuiltinThemes(): void;
package/dist/index.js ADDED
@@ -0,0 +1,12 @@
1
+ import * as echarts from 'echarts';
2
+ import { lightTheme } from './light.js';
3
+ import { darkTheme } from './dark.js';
4
+ export { lightTheme } from './light.js';
5
+ export { darkTheme } from './dark.js';
6
+ export function registerTheme(name, themeObject) {
7
+ echarts.registerTheme(name, themeObject);
8
+ }
9
+ export function registerBuiltinThemes() {
10
+ registerTheme('light', lightTheme);
11
+ registerTheme('dark', darkTheme);
12
+ }