1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
| // G2Plot 深色主题通用配置片段
| // 供驾驶舱（views/home）复用，保证深色大屏下图表配色/坐标轴/图例一致
|
| export const PALETTE = [
| '#38a5f8',
| '#22d3ee',
| '#9078e5',
| '#34d399',
| '#fbbf24',
| '#fb7185',
| '#60a5fa',
| '#f472b6',
| '#a78bfa',
| '#2dd4bf'
| ];
|
| const AXIS_LABEL_COLOR = '#9aa7c7';
| const AXIS_LINE_COLOR = '#253455';
| const GRID_LINE_COLOR = 'rgba(120, 140, 190, 0.14)';
| const LEGEND_TEXT_COLOR = '#c3cde4';
|
| // 类目轴
| export function xAxis(extra = {}) {
| const { label, ...rest } = extra;
| return {
| label: { style: { fill: AXIS_LABEL_COLOR, fontSize: 12 }, ...(label || {}) },
| line: { style: { stroke: AXIS_LINE_COLOR } },
| tickLine: { style: { stroke: AXIS_LINE_COLOR } },
| ...rest
| };
| }
|
| // 数值轴
| export function yAxis(extra = {}) {
| const { label, ...rest } = extra;
| return {
| label: { style: { fill: AXIS_LABEL_COLOR, fontSize: 12 }, ...(label || {}) },
| grid: { line: { style: { stroke: GRID_LINE_COLOR, lineDash: [3, 3] } } },
| ...rest
| };
| }
|
| export function legend(extra = {}) {
| return {
| position: 'top',
| text: { style: { fill: LEGEND_TEXT_COLOR, fontSize: 12 } },
| marker: { symbol: 'circle', style: { r: 4 } },
| itemHeight: 14,
| ...extra
| };
| }
|
| export function tooltip(extra = {}) {
| return {
| domStyles: {
| 'g2-tooltip': {
| backgroundColor: 'rgba(13, 20, 43, 0.94)',
| color: '#e6edff',
| boxShadow: '0 8px 24px rgba(0, 0, 0, 0.45)',
| borderRadius: '8px',
| padding: '10px 14px'
| },
| 'g2-tooltip-title': { color: '#aeb9d8', marginBottom: '6px' },
| 'g2-tooltip-list-item': { color: '#e6edff' },
| 'g2-tooltip-marker': { borderRadius: '50%' }
| },
| ...extra
| };
| }
|
|
