@pactor-app/chart 0.0.0-stage → 1.44.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/LICENSE +21 -0
- package/dist/index.cjs +1444 -0
- package/dist/index.d.cts +573 -0
- package/dist/index.d.ts +573 -0
- package/dist/index.js +1410 -0
- package/package.json +77 -3
- package/styles.css +255 -0
- package/README.md +0 -3
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,573 @@
|
|
|
1
|
+
import { ComponentRegistry } from '@pactor-app/runtime';
|
|
2
|
+
import * as react from 'react';
|
|
3
|
+
import { CSSProperties } from 'react';
|
|
4
|
+
import { EChartsCoreOption } from 'echarts/core';
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* MetricCard 适配器(chart/ 组件集):单指标卡——标题 + 大数值 +
|
|
8
|
+
* 趋势箭头(语义色令牌)。数据可视化看板的顶层概览单元。
|
|
9
|
+
*/
|
|
10
|
+
interface MetricCardProps {
|
|
11
|
+
/** 指标标题 */
|
|
12
|
+
title?: string;
|
|
13
|
+
/** 指标数值(通常为表达式解析后的数字) */
|
|
14
|
+
value?: number | string;
|
|
15
|
+
/** 前缀(如 ¥) */
|
|
16
|
+
prefix?: string;
|
|
17
|
+
/** 后缀(如单位) */
|
|
18
|
+
suffix?: string;
|
|
19
|
+
/** 趋势百分比:正数升(success),负数降(destructive),0 / 缺省不展示 */
|
|
20
|
+
trend?: number;
|
|
21
|
+
/** 趋势对比说明(如 "较上月") */
|
|
22
|
+
trendLabel?: string;
|
|
23
|
+
/** 通用:根节点 class(与内置样式合并) */
|
|
24
|
+
className?: string;
|
|
25
|
+
/** 通用:根节点内联样式 */
|
|
26
|
+
style?: CSSProperties;
|
|
27
|
+
}
|
|
28
|
+
declare function MetricCard({ title, value, prefix, suffix, trend, trendLabel, className, style, }: MetricCardProps): react.JSX.Element;
|
|
29
|
+
|
|
30
|
+
/** 图表点击事件的规范化载荷(DSL 事件 `${event}` 值) */
|
|
31
|
+
interface ChartSelectPayload {
|
|
32
|
+
name?: unknown;
|
|
33
|
+
value?: unknown;
|
|
34
|
+
seriesName?: string;
|
|
35
|
+
dataIndex?: number;
|
|
36
|
+
}
|
|
37
|
+
interface EChartBaseProps {
|
|
38
|
+
/** echarts option(由 option-builders 纯函数生成) */
|
|
39
|
+
option: EChartsCoreOption;
|
|
40
|
+
/** 容器高度:数字按 px,缺省 256 */
|
|
41
|
+
height?: number | string;
|
|
42
|
+
/** 点击图表元素(柱子 / 折线点 / 扇区等)触发,映射 echarts click */
|
|
43
|
+
onSelect?: (payload: ChartSelectPayload) => void;
|
|
44
|
+
/** 通用:根节点 class(与内置样式合并) */
|
|
45
|
+
className?: string;
|
|
46
|
+
/** 通用:根节点内联样式 */
|
|
47
|
+
style?: CSSProperties;
|
|
48
|
+
/** 根节点 data-slot 标识(组件名 kebab) */
|
|
49
|
+
slot: string;
|
|
50
|
+
}
|
|
51
|
+
/**
|
|
52
|
+
* 图表渲染基础件(chart/ 组件集共享,不注册为 DSL 组件):
|
|
53
|
+
* 懒初始化 echarts 实例、notMerge 全量更新 option、
|
|
54
|
+
* ResizeObserver 自适应、卸载销毁;初始化失败(如无 canvas 环境)
|
|
55
|
+
* 降级为占位提示。SSR 下仅渲染空容器,effect 不执行。
|
|
56
|
+
*/
|
|
57
|
+
declare function EChartBase({ option, height, onSelect, className, style, slot, }: EChartBaseProps): react.JSX.Element;
|
|
58
|
+
|
|
59
|
+
/**
|
|
60
|
+
* LineChart 适配器(chart/ 组件集,echarts):连续趋势折线,
|
|
61
|
+
* 支持多系列 / 平滑 / 面积填充 / 堆叠。
|
|
62
|
+
*/
|
|
63
|
+
interface LineChartProps {
|
|
64
|
+
/** 数据行数组(通常为 `${data.xxx}` 表达式解析结果) */
|
|
65
|
+
data?: Record<string, unknown>[];
|
|
66
|
+
/** 类目字段 */
|
|
67
|
+
xKey?: string;
|
|
68
|
+
/** 数值字段(多系列传多个) */
|
|
69
|
+
yKeys?: string[];
|
|
70
|
+
/** 平滑曲线 */
|
|
71
|
+
smooth?: boolean;
|
|
72
|
+
/** 折线下方面积填充 */
|
|
73
|
+
showArea?: boolean;
|
|
74
|
+
/** 堆叠面积/折线 */
|
|
75
|
+
stacked?: boolean;
|
|
76
|
+
/** 系列颜色覆盖(按序循环) */
|
|
77
|
+
colors?: string[];
|
|
78
|
+
/** 图表标题 */
|
|
79
|
+
title?: string;
|
|
80
|
+
/** 容器高度(px 或 CSS 长度),缺省 256 */
|
|
81
|
+
height?: number | string;
|
|
82
|
+
/** 点击数据点触发(DSL:events.onSelect → `${event}`) */
|
|
83
|
+
onSelect?: (payload: ChartSelectPayload) => void;
|
|
84
|
+
/** 通用:根节点 class(与内置样式合并) */
|
|
85
|
+
className?: string;
|
|
86
|
+
/** 通用:根节点内联样式 */
|
|
87
|
+
style?: CSSProperties;
|
|
88
|
+
}
|
|
89
|
+
declare function LineChart({ data, xKey, yKeys, smooth, showArea, stacked, colors, title, height, onSelect, className, style, }: LineChartProps): react.JSX.Element;
|
|
90
|
+
|
|
91
|
+
/**
|
|
92
|
+
* ColumnChart 适配器(chart/ 组件集,echarts):垂直柱状图,
|
|
93
|
+
* 支持多系列 / 堆叠,适用于离散类目比较。
|
|
94
|
+
*/
|
|
95
|
+
interface ColumnChartProps {
|
|
96
|
+
/** 数据行数组 */
|
|
97
|
+
data?: Record<string, unknown>[];
|
|
98
|
+
/** 类目字段 */
|
|
99
|
+
xKey?: string;
|
|
100
|
+
/** 数值字段(多系列传多个) */
|
|
101
|
+
yKeys?: string[];
|
|
102
|
+
/** 堆叠柱 */
|
|
103
|
+
stacked?: boolean;
|
|
104
|
+
/** 系列颜色覆盖(按序循环) */
|
|
105
|
+
colors?: string[];
|
|
106
|
+
/** 图表标题 */
|
|
107
|
+
title?: string;
|
|
108
|
+
/** 容器高度(px 或 CSS 长度),缺省 256 */
|
|
109
|
+
height?: number | string;
|
|
110
|
+
/** 点击柱子触发(DSL:events.onSelect → `${event}`) */
|
|
111
|
+
onSelect?: (payload: ChartSelectPayload) => void;
|
|
112
|
+
/** 通用:根节点 class(与内置样式合并) */
|
|
113
|
+
className?: string;
|
|
114
|
+
/** 通用:根节点内联样式 */
|
|
115
|
+
style?: CSSProperties;
|
|
116
|
+
}
|
|
117
|
+
declare function ColumnChart({ data, xKey, yKeys, stacked, colors, title, height, onSelect, className, style, }: ColumnChartProps): react.JSX.Element;
|
|
118
|
+
|
|
119
|
+
/**
|
|
120
|
+
* BarChart 适配器(chart/ 组件集,echarts):横向条形图,
|
|
121
|
+
* 适用于长分类名称的横向比较(yKey 类目 + xKeys 数值)。
|
|
122
|
+
*/
|
|
123
|
+
interface BarChartProps {
|
|
124
|
+
/** 数据行数组 */
|
|
125
|
+
data?: Record<string, unknown>[];
|
|
126
|
+
/** 类目字段(纵轴) */
|
|
127
|
+
yKey?: string;
|
|
128
|
+
/** 数值字段(横轴,多系列传多个) */
|
|
129
|
+
xKeys?: string[];
|
|
130
|
+
/** 堆叠条 */
|
|
131
|
+
stacked?: boolean;
|
|
132
|
+
/** 系列颜色覆盖(按序循环) */
|
|
133
|
+
colors?: string[];
|
|
134
|
+
/** 图表标题 */
|
|
135
|
+
title?: string;
|
|
136
|
+
/** 容器高度(px 或 CSS 长度),缺省 256 */
|
|
137
|
+
height?: number | string;
|
|
138
|
+
/** 点击条块触发(DSL:events.onSelect → `${event}`) */
|
|
139
|
+
onSelect?: (payload: ChartSelectPayload) => void;
|
|
140
|
+
/** 通用:根节点 class(与内置样式合并) */
|
|
141
|
+
className?: string;
|
|
142
|
+
/** 通用:根节点内联样式 */
|
|
143
|
+
style?: CSSProperties;
|
|
144
|
+
}
|
|
145
|
+
declare function BarChart({ data, yKey, xKeys, stacked, colors, title, height, onSelect, className, style, }: BarChartProps): react.JSX.Element;
|
|
146
|
+
|
|
147
|
+
/**
|
|
148
|
+
* AreaChart 适配器(chart/ 组件集,echarts):面积图,
|
|
149
|
+
* 强调趋势与累计规模,支持多系列 / 堆叠 / 填充不透明度。
|
|
150
|
+
*/
|
|
151
|
+
interface AreaChartProps {
|
|
152
|
+
/** 数据行数组 */
|
|
153
|
+
data?: Record<string, unknown>[];
|
|
154
|
+
/** 类目字段 */
|
|
155
|
+
xKey?: string;
|
|
156
|
+
/** 数值字段(多系列传多个) */
|
|
157
|
+
yKeys?: string[];
|
|
158
|
+
/** 堆叠面积 */
|
|
159
|
+
stacked?: boolean;
|
|
160
|
+
/** 填充不透明度(0-1),缺省 0.25 */
|
|
161
|
+
fillOpacity?: number;
|
|
162
|
+
/** 系列颜色覆盖(按序循环) */
|
|
163
|
+
colors?: string[];
|
|
164
|
+
/** 图表标题 */
|
|
165
|
+
title?: string;
|
|
166
|
+
/** 容器高度(px 或 CSS 长度),缺省 256 */
|
|
167
|
+
height?: number | string;
|
|
168
|
+
/** 点击数据点触发(DSL:events.onSelect → `${event}`) */
|
|
169
|
+
onSelect?: (payload: ChartSelectPayload) => void;
|
|
170
|
+
/** 通用:根节点 class(与内置样式合并) */
|
|
171
|
+
className?: string;
|
|
172
|
+
/** 通用:根节点内联样式 */
|
|
173
|
+
style?: CSSProperties;
|
|
174
|
+
}
|
|
175
|
+
declare function AreaChart({ data, xKey, yKeys, stacked, fillOpacity, colors, title, height, onSelect, className, style, }: AreaChartProps): react.JSX.Element;
|
|
176
|
+
|
|
177
|
+
/**
|
|
178
|
+
* PieChart 适配器(chart/ 组件集,echarts):饼图,
|
|
179
|
+
* 适用于少量类别的构成展示。
|
|
180
|
+
*/
|
|
181
|
+
interface PieChartProps {
|
|
182
|
+
/** 切片数据行数组 */
|
|
183
|
+
data?: Record<string, unknown>[];
|
|
184
|
+
/** 切片名称字段,默认 name */
|
|
185
|
+
nameKey?: string;
|
|
186
|
+
/** 切片数值字段,默认 value */
|
|
187
|
+
valueKey?: string;
|
|
188
|
+
/** 是否显示切片标签 */
|
|
189
|
+
showLabel?: boolean;
|
|
190
|
+
/** 系列颜色覆盖(按序循环) */
|
|
191
|
+
colors?: string[];
|
|
192
|
+
/** 图表标题 */
|
|
193
|
+
title?: string;
|
|
194
|
+
/** 容器高度(px 或 CSS 长度),缺省 256 */
|
|
195
|
+
height?: number | string;
|
|
196
|
+
/** 点击切片触发(DSL:events.onSelect → `${event}`) */
|
|
197
|
+
onSelect?: (payload: ChartSelectPayload) => void;
|
|
198
|
+
/** 通用:根节点 class(与内置样式合并) */
|
|
199
|
+
className?: string;
|
|
200
|
+
/** 通用:根节点内联样式 */
|
|
201
|
+
style?: CSSProperties;
|
|
202
|
+
}
|
|
203
|
+
declare function PieChart({ data, nameKey, valueKey, showLabel, colors, title, height, onSelect, className, style, }: PieChartProps): react.JSX.Element;
|
|
204
|
+
|
|
205
|
+
/**
|
|
206
|
+
* DonutChart 适配器(chart/ 组件集,echarts):环形图,
|
|
207
|
+
* 中心可展示关键指标(centerLabel / centerValue)。
|
|
208
|
+
*/
|
|
209
|
+
interface DonutChartProps {
|
|
210
|
+
/** 切片数据行数组 */
|
|
211
|
+
data?: Record<string, unknown>[];
|
|
212
|
+
/** 切片名称字段,默认 name */
|
|
213
|
+
nameKey?: string;
|
|
214
|
+
/** 切片数值字段,默认 value */
|
|
215
|
+
valueKey?: string;
|
|
216
|
+
/** 内半径(px 或百分比串),默认 '48%' */
|
|
217
|
+
innerRadius?: number | string;
|
|
218
|
+
/** 外半径,默认 '72%' */
|
|
219
|
+
outerRadius?: number | string;
|
|
220
|
+
/** 中心指标名(如 "总计") */
|
|
221
|
+
centerLabel?: string;
|
|
222
|
+
/** 中心指标值 */
|
|
223
|
+
centerValue?: number | string;
|
|
224
|
+
/** 是否显示切片标签 */
|
|
225
|
+
showLabel?: boolean;
|
|
226
|
+
/** 系列颜色覆盖(按序循环) */
|
|
227
|
+
colors?: string[];
|
|
228
|
+
/** 图表标题 */
|
|
229
|
+
title?: string;
|
|
230
|
+
/** 容器高度(px 或 CSS 长度),缺省 256 */
|
|
231
|
+
height?: number | string;
|
|
232
|
+
/** 点击切片触发(DSL:events.onSelect → `${event}`) */
|
|
233
|
+
onSelect?: (payload: ChartSelectPayload) => void;
|
|
234
|
+
/** 通用:根节点 class(与内置样式合并) */
|
|
235
|
+
className?: string;
|
|
236
|
+
/** 通用:根节点内联样式 */
|
|
237
|
+
style?: CSSProperties;
|
|
238
|
+
}
|
|
239
|
+
declare function DonutChart({ data, nameKey, valueKey, innerRadius, outerRadius, centerLabel, centerValue, showLabel, colors, title, height, onSelect, className, style, }: DonutChartProps): react.JSX.Element;
|
|
240
|
+
|
|
241
|
+
/**
|
|
242
|
+
* ScatterChart 适配器(chart/ 组件集,echarts):散点图,
|
|
243
|
+
* 展示两变量关系与分布,seriesKey 可按值拆分子系列。
|
|
244
|
+
*/
|
|
245
|
+
interface ScatterChartProps {
|
|
246
|
+
/** 数据行数组 */
|
|
247
|
+
data?: Record<string, unknown>[];
|
|
248
|
+
/** X 数值字段,默认 x */
|
|
249
|
+
xKey?: string;
|
|
250
|
+
/** Y 数值字段,默认 y */
|
|
251
|
+
yKey?: string;
|
|
252
|
+
/** 分组字段(按值拆系列,配图例) */
|
|
253
|
+
seriesKey?: string;
|
|
254
|
+
/** 系列颜色覆盖(按序循环) */
|
|
255
|
+
colors?: string[];
|
|
256
|
+
/** 图表标题 */
|
|
257
|
+
title?: string;
|
|
258
|
+
/** 容器高度(px 或 CSS 长度),缺省 256 */
|
|
259
|
+
height?: number | string;
|
|
260
|
+
/** 点击数据点触发(DSL:events.onSelect → `${event}`) */
|
|
261
|
+
onSelect?: (payload: ChartSelectPayload) => void;
|
|
262
|
+
/** 通用:根节点 class(与内置样式合并) */
|
|
263
|
+
className?: string;
|
|
264
|
+
/** 通用:根节点内联样式 */
|
|
265
|
+
style?: CSSProperties;
|
|
266
|
+
}
|
|
267
|
+
declare function ScatterChart({ data, xKey, yKey, seriesKey, colors, title, height, onSelect, className, style, }: ScatterChartProps): react.JSX.Element;
|
|
268
|
+
|
|
269
|
+
/**
|
|
270
|
+
* BubbleChart 适配器(chart/ 组件集,echarts):气泡图,
|
|
271
|
+
* 在两变量关系上叠加第三变量(sizeKey)映射气泡大小。
|
|
272
|
+
*/
|
|
273
|
+
interface BubbleChartProps {
|
|
274
|
+
/** 数据行数组 */
|
|
275
|
+
data?: Record<string, unknown>[];
|
|
276
|
+
/** X 数值字段,默认 x */
|
|
277
|
+
xKey?: string;
|
|
278
|
+
/** Y 数值字段,默认 y */
|
|
279
|
+
yKey?: string;
|
|
280
|
+
/** 气泡大小字段(第三变量),默认 size */
|
|
281
|
+
sizeKey?: string;
|
|
282
|
+
/** 分组字段(按值拆系列) */
|
|
283
|
+
seriesKey?: string;
|
|
284
|
+
/** 系列颜色覆盖(按序循环) */
|
|
285
|
+
colors?: string[];
|
|
286
|
+
/** 图表标题 */
|
|
287
|
+
title?: string;
|
|
288
|
+
/** 容器高度(px 或 CSS 长度),缺省 256 */
|
|
289
|
+
height?: number | string;
|
|
290
|
+
/** 点击气泡触发(DSL:events.onSelect → `${event}`) */
|
|
291
|
+
onSelect?: (payload: ChartSelectPayload) => void;
|
|
292
|
+
/** 通用:根节点 class(与内置样式合并) */
|
|
293
|
+
className?: string;
|
|
294
|
+
/** 通用:根节点内联样式 */
|
|
295
|
+
style?: CSSProperties;
|
|
296
|
+
}
|
|
297
|
+
declare function BubbleChart({ data, xKey, yKey, sizeKey, seriesKey, colors, title, height, onSelect, className, style, }: BubbleChartProps): react.JSX.Element;
|
|
298
|
+
|
|
299
|
+
/**
|
|
300
|
+
* RadarChart 适配器(chart/ 组件集,echarts):雷达图,
|
|
301
|
+
* 每行一个维度(indicatorKey),每列一个对比系列(yKeys)。
|
|
302
|
+
*/
|
|
303
|
+
interface RadarChartProps {
|
|
304
|
+
/** 数据行数组(每行一个雷达维度) */
|
|
305
|
+
data?: Record<string, unknown>[];
|
|
306
|
+
/** 维度名字段,默认 indicator */
|
|
307
|
+
indicatorKey?: string;
|
|
308
|
+
/** 系列字段(多列多维对比),默认 ['value'] */
|
|
309
|
+
yKeys?: string[];
|
|
310
|
+
/** 系列颜色覆盖(按序循环) */
|
|
311
|
+
colors?: string[];
|
|
312
|
+
/** 图表标题 */
|
|
313
|
+
title?: string;
|
|
314
|
+
/** 容器高度(px 或 CSS 长度),缺省 256 */
|
|
315
|
+
height?: number | string;
|
|
316
|
+
/** 点击触发(DSL:events.onSelect → `${event}`) */
|
|
317
|
+
onSelect?: (payload: ChartSelectPayload) => void;
|
|
318
|
+
/** 通用:根节点 class(与内置样式合并) */
|
|
319
|
+
className?: string;
|
|
320
|
+
/** 通用:根节点内联样式 */
|
|
321
|
+
style?: CSSProperties;
|
|
322
|
+
}
|
|
323
|
+
declare function RadarChart({ data, indicatorKey, yKeys, colors, title, height, onSelect, className, style, }: RadarChartProps): react.JSX.Element;
|
|
324
|
+
|
|
325
|
+
/**
|
|
326
|
+
* FunnelChart 适配器(chart/ 组件集,echarts):漏斗图,
|
|
327
|
+
* 展示流程阶段转化,支持降序 / 升序 / 输入顺序排列。
|
|
328
|
+
*/
|
|
329
|
+
interface FunnelChartProps {
|
|
330
|
+
/** 阶段数据行数组 */
|
|
331
|
+
data?: Record<string, unknown>[];
|
|
332
|
+
/** 阶段名字段,默认 name */
|
|
333
|
+
nameKey?: string;
|
|
334
|
+
/** 阶段数值字段,默认 value */
|
|
335
|
+
valueKey?: string;
|
|
336
|
+
/** 排序方式:降序(大在上,缺省)/ 升序 / 输入顺序 */
|
|
337
|
+
sort?: 'descending' | 'ascending' | 'none';
|
|
338
|
+
/** 系列颜色覆盖(按序循环) */
|
|
339
|
+
colors?: string[];
|
|
340
|
+
/** 图表标题 */
|
|
341
|
+
title?: string;
|
|
342
|
+
/** 容器高度(px 或 CSS 长度),缺省 256 */
|
|
343
|
+
height?: number | string;
|
|
344
|
+
/** 点击阶段触发(DSL:events.onSelect → `${event}`) */
|
|
345
|
+
onSelect?: (payload: ChartSelectPayload) => void;
|
|
346
|
+
/** 通用:根节点 class(与内置样式合并) */
|
|
347
|
+
className?: string;
|
|
348
|
+
/** 通用:根节点内联样式 */
|
|
349
|
+
style?: CSSProperties;
|
|
350
|
+
}
|
|
351
|
+
declare function FunnelChart({ data, nameKey, valueKey, sort, colors, title, height, onSelect, className, style, }: FunnelChartProps): react.JSX.Element;
|
|
352
|
+
|
|
353
|
+
/**
|
|
354
|
+
* GaugeChart 适配器(chart/ 组件集,echarts):仪表盘,
|
|
355
|
+
* 单指标区间状态展示,阈值分段配色(语义色令牌)。
|
|
356
|
+
*/
|
|
357
|
+
interface GaugeChartProps {
|
|
358
|
+
/** 当前值 */
|
|
359
|
+
value?: number;
|
|
360
|
+
/** 量程下限,默认 0 */
|
|
361
|
+
min?: number;
|
|
362
|
+
/** 量程上限,默认 100 */
|
|
363
|
+
max?: number;
|
|
364
|
+
/** 阈值区间:按 value 上限分段配色(颜色缺省取主题色板首色),末段兜底到 max */
|
|
365
|
+
thresholds?: {
|
|
366
|
+
value: number;
|
|
367
|
+
color?: string;
|
|
368
|
+
}[];
|
|
369
|
+
/** 数值单位后缀(如 %) */
|
|
370
|
+
unit?: string;
|
|
371
|
+
/** 图表标题 */
|
|
372
|
+
title?: string;
|
|
373
|
+
/** 容器高度(px 或 CSS 长度),缺省 256 */
|
|
374
|
+
height?: number | string;
|
|
375
|
+
/** 点击触发(DSL:events.onSelect → `${event}`) */
|
|
376
|
+
onSelect?: (payload: ChartSelectPayload) => void;
|
|
377
|
+
/** 通用:根节点 class(与内置样式合并) */
|
|
378
|
+
className?: string;
|
|
379
|
+
/** 通用:根节点内联样式 */
|
|
380
|
+
style?: CSSProperties;
|
|
381
|
+
}
|
|
382
|
+
declare function GaugeChart({ value, min, max, thresholds, unit, title, height, onSelect, className, style, }: GaugeChartProps): react.JSX.Element;
|
|
383
|
+
|
|
384
|
+
/**
|
|
385
|
+
* Heatmap 适配器(chart/ 组件集,echarts):热力图,
|
|
386
|
+
* x/y 二维类目密度展示,visualMap 色阶取主题令牌。
|
|
387
|
+
*/
|
|
388
|
+
interface HeatmapProps {
|
|
389
|
+
/** 数据行数组(每行 x / y / value) */
|
|
390
|
+
data?: Record<string, unknown>[];
|
|
391
|
+
/** 横轴类目字段,默认 x */
|
|
392
|
+
xKey?: string;
|
|
393
|
+
/** 纵轴类目字段,默认 y */
|
|
394
|
+
yKey?: string;
|
|
395
|
+
/** 数值字段,默认 value */
|
|
396
|
+
valueKey?: string;
|
|
397
|
+
/** 图表标题 */
|
|
398
|
+
title?: string;
|
|
399
|
+
/** 容器高度(px 或 CSS 长度),缺省 256 */
|
|
400
|
+
height?: number | string;
|
|
401
|
+
/** 点击单元格触发(DSL:events.onSelect → `${event}`) */
|
|
402
|
+
onSelect?: (payload: ChartSelectPayload) => void;
|
|
403
|
+
/** 通用:根节点 class(与内置样式合并) */
|
|
404
|
+
className?: string;
|
|
405
|
+
/** 通用:根节点内联样式 */
|
|
406
|
+
style?: CSSProperties;
|
|
407
|
+
}
|
|
408
|
+
declare function Heatmap({ data, xKey, yKey, valueKey, title, height, onSelect, className, style, }: HeatmapProps): react.JSX.Element;
|
|
409
|
+
|
|
410
|
+
/**
|
|
411
|
+
* TreeChart 适配器(chart/ 组件集,echarts):树图,
|
|
412
|
+
* 节点-连线层级树(对齐 echarts 2.2.4 tree 系列形态):
|
|
413
|
+
* 根节点定位布局,曲线/折线连边,叶子节点着色,支持展开方向与
|
|
414
|
+
* 初始展开深度配置。
|
|
415
|
+
*/
|
|
416
|
+
interface TreeChartProps {
|
|
417
|
+
/** 层级数据:通常为单根 [{ name, children: [...] }] */
|
|
418
|
+
data?: Record<string, unknown>[];
|
|
419
|
+
/** 图表标题 */
|
|
420
|
+
title?: string;
|
|
421
|
+
/** 展开方向:vertical 根在上向下(缺省)/ horizontal 根在左向右 */
|
|
422
|
+
orient?: 'vertical' | 'horizontal';
|
|
423
|
+
/** 连线形状:曲线(缺省)/ 折线 */
|
|
424
|
+
edgeShape?: 'curve' | 'polyline';
|
|
425
|
+
/** 初始展开的层级深度,缺省 2;-1 表示全部展开 */
|
|
426
|
+
initialTreeDepth?: number;
|
|
427
|
+
/** 容器高度(px 或 CSS 长度),缺省 256 */
|
|
428
|
+
height?: number | string;
|
|
429
|
+
/** 点击节点触发(DSL:events.onSelect → `${event}`) */
|
|
430
|
+
onSelect?: (payload: ChartSelectPayload) => void;
|
|
431
|
+
/** 通用:根节点 class(与内置样式合并) */
|
|
432
|
+
className?: string;
|
|
433
|
+
/** 通用:根节点内联样式 */
|
|
434
|
+
style?: CSSProperties;
|
|
435
|
+
}
|
|
436
|
+
declare function TreeChart({ data, title, orient, edgeShape, initialTreeDepth, height, onSelect, className, style, }: TreeChartProps): react.JSX.Element;
|
|
437
|
+
|
|
438
|
+
/**
|
|
439
|
+
* SankeyChart 适配器(chart/ 组件集,echarts):桑基图,
|
|
440
|
+
* 展示节点之间的流向与规模。
|
|
441
|
+
*/
|
|
442
|
+
interface SankeyChartProps {
|
|
443
|
+
/** 节点数组 */
|
|
444
|
+
nodes?: {
|
|
445
|
+
name: string;
|
|
446
|
+
}[];
|
|
447
|
+
/** 流向边:source → target 及数值 */
|
|
448
|
+
links?: {
|
|
449
|
+
source: string;
|
|
450
|
+
target: string;
|
|
451
|
+
value: number;
|
|
452
|
+
}[];
|
|
453
|
+
/** 图表标题 */
|
|
454
|
+
title?: string;
|
|
455
|
+
/** 容器高度(px 或 CSS 长度),缺省 256 */
|
|
456
|
+
height?: number | string;
|
|
457
|
+
/** 点击节点或边触发(DSL:events.onSelect → `${event}`) */
|
|
458
|
+
onSelect?: (payload: ChartSelectPayload) => void;
|
|
459
|
+
/** 通用:根节点 class(与内置样式合并) */
|
|
460
|
+
className?: string;
|
|
461
|
+
/** 通用:根节点内联样式 */
|
|
462
|
+
style?: CSSProperties;
|
|
463
|
+
}
|
|
464
|
+
declare function SankeyChart({ nodes, links, title, height, onSelect, className, style, }: SankeyChartProps): react.JSX.Element;
|
|
465
|
+
|
|
466
|
+
/**
|
|
467
|
+
* MapChart 适配器(chart/ 组件集,echarts):地图,
|
|
468
|
+
* 展示地理分布与区域比较(世界地图 / 国家地图 / 其他区域地图)。
|
|
469
|
+
* 地图数据三种供给方式(优先级从高到低):
|
|
470
|
+
* - `geoJson`:内联 GeoJSON 对象,渲染期同步注册(幂等,StrictMode 安全);
|
|
471
|
+
* - `geoJsonUrl`:GeoJSON 资源地址,组件 fetch 后注册(按 mapName 缓存,
|
|
472
|
+
* 同一地图多处复用只请求一次);
|
|
473
|
+
* - 两者都不传时要求 `mapName` 已注册(如应用启动时统一 registerMap)。
|
|
474
|
+
* 未注册渲染 Empty 占位并 console.warn,不抛错。
|
|
475
|
+
*/
|
|
476
|
+
interface MapChartProps {
|
|
477
|
+
/** echarts 地图名 */
|
|
478
|
+
mapName?: string;
|
|
479
|
+
/** 区域数据行数组(区域名 + 数值) */
|
|
480
|
+
data?: Record<string, unknown>[];
|
|
481
|
+
/** 区域名字段,默认 name */
|
|
482
|
+
nameKey?: string;
|
|
483
|
+
/** 区域数值字段,默认 value */
|
|
484
|
+
valueKey?: string;
|
|
485
|
+
/** GeoJSON 地图数据(传入即注册到 echarts,优先于 geoJsonUrl) */
|
|
486
|
+
geoJson?: Record<string, unknown>;
|
|
487
|
+
/** GeoJSON 资源地址(组件 fetch 后注册到 echarts) */
|
|
488
|
+
geoJsonUrl?: string;
|
|
489
|
+
/** 图表标题 */
|
|
490
|
+
title?: string;
|
|
491
|
+
/** 容器高度(px 或 CSS 长度),缺省 256 */
|
|
492
|
+
height?: number | string;
|
|
493
|
+
/** 点击区域触发(DSL:events.onSelect → `${event}`) */
|
|
494
|
+
onSelect?: (payload: ChartSelectPayload) => void;
|
|
495
|
+
/** 通用:根节点 class(与内置样式合并) */
|
|
496
|
+
className?: string;
|
|
497
|
+
/** 通用:根节点内联样式 */
|
|
498
|
+
style?: CSSProperties;
|
|
499
|
+
}
|
|
500
|
+
declare function MapChart({ mapName, data, nameKey, valueKey, geoJson, geoJsonUrl, title, height, onSelect, className, style, }: MapChartProps): react.JSX.Element;
|
|
501
|
+
|
|
502
|
+
/**
|
|
503
|
+
* echarts option 构建纯函数:每个图表组件把受限 props 翻译为 option,
|
|
504
|
+
* 纯函数便于单测(jsdom 无 canvas,不断言 echarts 实例行为)。
|
|
505
|
+
* 颜色一律来自 ChartTheme 令牌解析结果或用户显式覆盖。
|
|
506
|
+
*/
|
|
507
|
+
|
|
508
|
+
interface ComposedSeriesItem {
|
|
509
|
+
/** 图型:折线 / 柱 / 面积 */
|
|
510
|
+
type: 'line' | 'bar' | 'area';
|
|
511
|
+
/** 数据字段 */
|
|
512
|
+
dataKey: string;
|
|
513
|
+
/** 0 主数值轴 / 1 副数值轴(双轴) */
|
|
514
|
+
yAxisIndex?: 0 | 1;
|
|
515
|
+
/** 系列显示名,缺省取 dataKey */
|
|
516
|
+
name?: string;
|
|
517
|
+
}
|
|
518
|
+
|
|
519
|
+
/**
|
|
520
|
+
* ComposedChart 适配器(chart/ 组件集,echarts):组合图,
|
|
521
|
+
* 声明式 series 描述混合折线/柱/面积,支持双数值轴。
|
|
522
|
+
*/
|
|
523
|
+
interface ComposedChartProps {
|
|
524
|
+
/** 数据行数组 */
|
|
525
|
+
data?: Record<string, unknown>[];
|
|
526
|
+
/** 类目字段 */
|
|
527
|
+
xKey?: string;
|
|
528
|
+
/** 系列描述数组(图型 + 数据字段,可指定副轴) */
|
|
529
|
+
series?: ComposedSeriesItem[];
|
|
530
|
+
/** 系列颜色覆盖(按序循环) */
|
|
531
|
+
colors?: string[];
|
|
532
|
+
/** 图表标题 */
|
|
533
|
+
title?: string;
|
|
534
|
+
/** 容器高度(px 或 CSS 长度),缺省 256 */
|
|
535
|
+
height?: number | string;
|
|
536
|
+
/** 点击图元触发(DSL:events.onSelect → `${event}`) */
|
|
537
|
+
onSelect?: (payload: ChartSelectPayload) => void;
|
|
538
|
+
/** 通用:根节点 class(与内置样式合并) */
|
|
539
|
+
className?: string;
|
|
540
|
+
/** 通用:根节点内联样式 */
|
|
541
|
+
style?: CSSProperties;
|
|
542
|
+
}
|
|
543
|
+
declare function ComposedChart({ data, xKey, series, colors, title, height, onSelect, className, style, }: ComposedChartProps): react.JSX.Element;
|
|
544
|
+
|
|
545
|
+
/**
|
|
546
|
+
* DSL 类型名 → 组件映射。
|
|
547
|
+
* 交互事件经 echarts click → onSelect,DSL 用 events.onSelect + ${event}。
|
|
548
|
+
*/
|
|
549
|
+
declare const chartComponents: {
|
|
550
|
+
readonly MetricCard: typeof MetricCard;
|
|
551
|
+
readonly LineChart: typeof LineChart;
|
|
552
|
+
readonly ColumnChart: typeof ColumnChart;
|
|
553
|
+
readonly BarChart: typeof BarChart;
|
|
554
|
+
readonly AreaChart: typeof AreaChart;
|
|
555
|
+
readonly PieChart: typeof PieChart;
|
|
556
|
+
readonly DonutChart: typeof DonutChart;
|
|
557
|
+
readonly ScatterChart: typeof ScatterChart;
|
|
558
|
+
readonly BubbleChart: typeof BubbleChart;
|
|
559
|
+
readonly RadarChart: typeof RadarChart;
|
|
560
|
+
readonly FunnelChart: typeof FunnelChart;
|
|
561
|
+
readonly GaugeChart: typeof GaugeChart;
|
|
562
|
+
readonly Heatmap: typeof Heatmap;
|
|
563
|
+
readonly TreeChart: typeof TreeChart;
|
|
564
|
+
readonly SankeyChart: typeof SankeyChart;
|
|
565
|
+
readonly MapChart: typeof MapChart;
|
|
566
|
+
readonly ComposedChart: typeof ComposedChart;
|
|
567
|
+
};
|
|
568
|
+
/** 把图表组件集按 DSL 类型名注册到给定 ComponentRegistry(可与 ui 主注册表合并) */
|
|
569
|
+
declare function registerChartComponents(registry: ComponentRegistry): void;
|
|
570
|
+
/** 创建只注册了图表组件集的新 ComponentRegistry */
|
|
571
|
+
declare function createChartComponentRegistry(): ComponentRegistry;
|
|
572
|
+
|
|
573
|
+
export { AreaChart, type AreaChartProps, BarChart, type BarChartProps, BubbleChart, type BubbleChartProps, type ChartSelectPayload, ColumnChart, type ColumnChartProps, ComposedChart, type ComposedChartProps, type ComposedSeriesItem, DonutChart, type DonutChartProps, EChartBase, type EChartBaseProps, FunnelChart, type FunnelChartProps, GaugeChart, type GaugeChartProps, Heatmap, type HeatmapProps, LineChart, type LineChartProps, MapChart, type MapChartProps, MetricCard, type MetricCardProps, PieChart, type PieChartProps, RadarChart, type RadarChartProps, SankeyChart, type SankeyChartProps, ScatterChart, type ScatterChartProps, TreeChart, type TreeChartProps, chartComponents, createChartComponentRegistry, registerChartComponents };
|