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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
| // 统计图表统一清爽简洁风格（echarts 4 兼容）
| // 供 statistics/*.vue 复用，保证视觉一致
|
| const toRgba = (hex, alpha) => {
| const n = parseInt(hex.slice(1), 16);
| const r = (n >> 16) & 255;
| const g = (n >> 8) & 255;
| const b = n & 255;
| return `rgba(${r}, ${g}, ${b}, ${alpha})`;
| };
|
| export const COLORS = {
| blue: '#5B8FF9',
| green: '#5AD8A6',
| amber: '#F6BD16',
| coral: '#E8684A',
| sky: '#6DC8EC',
| purple: '#9270CA',
| orange: '#FF9D4D',
| teal: '#269A99'
| };
|
| export const PALETTE = Object.values(COLORS);
|
| const tipBase = {
| backgroundColor: '#ffffff',
| borderColor: '#e8eaf0',
| borderWidth: 1,
| padding: [10, 14],
| textStyle: { color: '#333', fontSize: 13 },
| extraCssText: 'box-shadow:0 6px 18px rgba(31,45,61,.1);border-radius:10px;'
| };
|
| // 坐标轴类 tooltip（柱状/折线）
| export function axisTooltip() {
| return { trigger: 'axis', ...tipBase, axisPointer: { lineStyle: { color: '#c9d2e0' } } };
| }
|
| // 图形类 tooltip（饼图）
| export function itemTooltip() {
| return { trigger: 'item', ...tipBase, formatter: '{b}：{c} ({d}%)' };
| }
|
| export function grid() {
| return { left: 8, right: 16, top: 44, bottom: 8, containLabel: true };
| }
|
| // 类目轴
| export function xAxis(data) {
| return {
| type: 'category',
| data,
| axisLine: { show: false },
| axisTick: { show: false },
| axisLabel: { color: '#8a919f', fontSize: 12 }
| };
| }
|
| // 数值轴
| export function yAxis(name) {
| return {
| type: 'value',
| name,
| nameTextStyle: { color: '#b0b6c3', fontSize: 12 },
| axisLabel: { color: '#8a919f', fontSize: 12 },
| splitLine: { lineStyle: { type: 'dashed', color: '#f0f1f5' } }
| };
| }
|
| export function legend(data) {
| return {
| data,
| icon: 'roundRect',
| itemWidth: 10,
| itemHeight: 10,
| itemGap: 18,
| textStyle: { color: '#8a919f', fontSize: 12 }
| };
| }
|
| // 柱状系列
| export function barSeries(name, data, color, opts = {}) {
| return {
| name,
| type: 'bar',
| data,
| barMaxWidth: opts.maxWidth || 20,
| itemStyle: { color, borderRadius: opts.radius || [4, 4, 0, 0] },
| stack: opts.stack,
| yAxisIndex: opts.yAxisIndex
| };
| }
|
| // 折线系列
| export function lineSeries(name, data, color, opts = {}) {
| const s = {
| name,
| type: 'line',
| data,
| smooth: true,
| symbol: 'circle',
| symbolSize: opts.symbolSize || 6,
| lineStyle: { width: 3, color },
| itemStyle: { color },
| yAxisIndex: opts.yAxisIndex
| };
| if (opts.area) {
| s.areaStyle = {
| color: {
| type: 'linear',
| x: 0,
| y: 0,
| x2: 0,
| y2: 1,
| colorStops: [
| { offset: 0, color: toRgba(color, 0.24) },
| { offset: 1, color: toRgba(color, 0) }
| ]
| }
| };
| }
| return s;
| }
|
| // 环形图系列
| export function donutSeries(name, data) {
| return {
| name,
| type: 'pie',
| radius: ['52%', '72%'],
| center: ['50%', '50%'],
| avoidLabelOverlap: false,
| itemStyle: { borderColor: '#fff', borderWidth: 2 },
| label: { show: false },
| labelLine: { show: false },
| data,
| color: PALETTE
| };
| }
|
|
