UNPKG

85.7 kBTypeScriptView Raw
1import { COMPONENT_TYPE, DIRECTION, LAYER } from './constant';
2import { AxisLabelCfg, AxisLineCfg, AxisSubTickLineCfg, AxisTickLineCfg, AxisTitleCfg, ContinueLegendHandlerCfg, ContinueLegendLabelCfg, ContinueLegendRailCfg, ContinueLegendTrackCfg, Coordinate, CrosshairLineCfg, CrosshairTextBackgroundCfg, CrosshairTextCfg, EnhancedTextCfg, GridLineCfg, GroupComponent, HtmlComponent, ICanvas, IGroup, IShape, CategoryLegendCfg, LegendBackgroundCfg, LegendItemNameCfg, LegendItemValueCfg, LegendMarkerCfg, LegendTitleCfg, LegendPageNavigatorCfg, PathCommand, Scale, ScaleConfig, ShapeAttrs, LineAnnotationTextCfg, TrendCfg } from './dependents';
3import { View } from './chart';
4import { Facet } from './facet';
5import Element from './geometry/element';
6import { PaddingCalCtor } from './chart/layout/padding-cal';
7import { LegendRadio } from '@antv/component';
8/** 通用对象 */
9export interface LooseObject {
10 [key: string]: any;
11}
12/** 一个点位置 */
13export interface Point {
14 readonly x: number;
15 readonly y: number;
16}
17/** 画布范围 */
18export interface Region {
19 readonly start: Point;
20 readonly end: Point;
21}
22/** 画布大小 */
23export interface Size {
24 readonly width: number;
25 readonly height: number;
26}
27/** 带范围的点结构 */
28export interface RangePoint {
29 readonly x?: number | number[];
30 readonly y?: number | number[];
31}
32/**
33 * WAI-ARIA 无障碍标签配置
34 */
35export declare type AriaOption = false | {
36 readonly label: string;
37};
38/** 用户数据经过图形映射处理后的数据结构 */
39export interface MappingDatum {
40 /** 原始数据 */
41 _origin: Datum;
42 /** shape 的关键点信息 */
43 points?: ShapeVertices;
44 /** 相对于当前 shape 的下一个 shape 的关键点信息 */
45 nextPoints?: ShapeVertices;
46 /** x 轴的坐标 */
47 x?: number[] | number;
48 /** y 轴的坐标 */
49 y?: number[] | number;
50 /** 颜色 */
51 color?: string;
52 /** 渲染的 shape 类型 */
53 shape?: string | string[];
54 /** 大小 */
55 size?: number;
56}
57/** 绘制 Shape 需要的图形、样式、关键点等信息 */
58export interface ShapeInfo {
59 /** x 坐标 */
60 x: number | number[];
61 /** y 坐标 */
62 y: number | number[];
63 /** 映射的 shape 类型 */
64 shape?: string | string[];
65 /** size 映射值 */
66 size?: number;
67 /** 映射的颜色值 */
68 color?: string;
69 /** 用户设置的图形样式 */
70 style?: LooseObject;
71 /** 是否在极坐标下 */
72 isInCircle?: boolean;
73 /** 对应的原始数据记录 */
74 data?: Datum | Data;
75 /** 存储进行图形映射后的数据 */
76 mappingData?: MappingDatum | MappingDatum[];
77 /** 构成 shape 的关键点 */
78 points?: ShapeVertices;
79 /** 下一个数据集对应的关键点 */
80 nextPoints?: ShapeVertices;
81 /** Geometry.Text 需要 */
82 text?: string;
83 /** 数据是否发生层叠 */
84 isStack?: boolean;
85 /** 是否连接空值,只对 Path Line Area 这三种 Geometry 生效。 */
86 connectNulls?: boolean;
87 /** shape 背景,只对 Interval Geometry 生效,目前只对 interval-rect shape 生效。 */
88 background?: {
89 style?: ShapeAttrs;
90 };
91 /** 是否展示单个孤立的数据点,只对 Path Line Area 这三种 Geometry 生效。 */
92 showSinglePoint?: boolean;
93 /** 默认的 shape 样式 */
94 defaultStyle?: LooseObject;
95 /** 自定义的数据,传入到 shapeInfo 中 */
96 customInfo?: CustomOption;
97}
98/** 用户配置的动画,属性均可选 */
99export interface AnimateCfg {
100 /** 动画缓动函数 */
101 readonly easing?: string | AnimateEasingCallback;
102 /** 动画执行函数 */
103 readonly animation?: string;
104 /** 动画执行时间 */
105 readonly duration?: number | AnimateDurationCallback;
106 /** 动画延迟时间 */
107 readonly delay?: number | AnimateDelayCallback;
108 /** 动画执行结束后的回调函数 */
109 readonly callback?: () => any;
110 /** 动画是否重复 */
111 readonly repeat?: boolean;
112}
113/** 传递给 G 的动画配置,duration 必须提供 */
114export interface GAnimateCfg {
115 /** 动画执行时间 */
116 readonly duration: number;
117 /** 动画缓动函数 */
118 readonly easing?: string;
119 /** 动画执行函数 */
120 readonly animation?: string;
121 /** 动画延迟时间 */
122 readonly delay?: number;
123 /** 动画执行结束后的回调函数 */
124 readonly callback?: () => any;
125 /** 动画是否重复 */
126 readonly repeat?: boolean;
127}
128/** 图形属性配置项定义,如 geometry.position({}) */
129export interface AttributeOption {
130 /** 映射的属性字段。 */
131 fields?: string[];
132 /** 回调函数。 */
133 callback?: (...args: any[]) => any;
134 /** 指定常量映射规则。 */
135 values?: any[];
136}
137/** 数据调整配置项定义,`geometry.adjust({})` */
138export interface AdjustOption {
139 /** 数据调整类型。 */
140 readonly type: AdjustType;
141 /**
142 * 该属性只对 'dodge' 类型生效,取 0 到 1 范围的值(相对于每个柱子宽度),用于控制一个分组中柱子之间的间距。
143 *
144 * ![image](https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*ps3pToOg2nwAAAAAAAAAAABkARQnAQ)
145 */
146 readonly marginRatio?: number;
147 /**
148 * 该属性只对 'dodge' 类型生效,声明以哪个数据字段为分组依据。
149 */
150 readonly dodgeBy?: string;
151 /**
152 * 该属性只对 'stack' 类型生效,用于控制是否对数据进行反序操作。
153 */
154 readonly reverseOrder?: boolean;
155}
156/** `geometry.style({})` 样式配置定义 */
157export interface StyleOption {
158 /** 映射的字段。 */
159 readonly fields?: string[];
160 /** 回调函数。 */
161 readonly callback?: (...args: any[]) => LooseObject;
162 /** 图形样式配置。 */
163 readonly cfg?: LooseObject;
164}
165/** geometry.custom() custom 自定义的配置,可以传入任何数据 */
166export declare type CustomOption = any;
167/** `geometry.tooltip({})` Tooltip 配置定义 */
168export interface GeometryTooltipOption {
169 /** 参与映射的字段。 */
170 readonly fields: string[];
171 /** 回调函数。 */
172 readonly callback?: (...args: any[]) => LooseObject;
173}
174export interface GeometryLabelLayoutCfg {
175 /** label 布局类型。 */
176 type: string;
177 /** 各个布局函数开放给用户的配置。 */
178 cfg?: LooseObject;
179}
180/** geometry.label({}) 配置属性 */
181export interface GeometryLabelCfg {
182 /**
183 * 用于声明渲染的 label 类型。
184 * 当用户使用了自定义的 label 类型,需要声明具体的 type 类型,否则会使用默认的 label 类型渲染。
185 */
186 type?: string;
187 /** 相对数据点的偏移距离, polar 和 theta 坐标系下可使用百分比字符串。 */
188 offset?: number | string;
189 /** label 相对于数据点在 X 方向的偏移距离。 */
190 offsetX?: number;
191 /** label 相对于数据点在 Y 方向的偏移距离。 */
192 offsetY?: number;
193 /**
194 * 展示的文本内容,如果不声明则按照参与映射的第一字段的值进行显示。
195 * 当 content 为 IGroup 或者 IShape 类型时,请使用相对定位,即 x 和 y 坐标都设为 0,G2 内部会整体做最后的 label 进行定位的。
196 * 示例: https://g2.antv.vision/zh/examples/pie/basic#pie-custome-label
197 */
198 content?: string | IGroup | IShape | GeometryLabelContentCallback;
199 /** label 文本图形属性样式。 */
200 style?: LooseObject;
201 /** label 是否自动旋转,默认为 true。 */
202 autoRotate?: boolean;
203 /**
204 * 当且仅当 `autoRotate` 为 false 时生效,用于设置文本的旋转角度,**弧度制**。
205 */
206 rotate?: number;
207 /** 标签高度设置,仅当标签类型 type 为 pie 时生效;也可在主题中设置 pieLabels.labelHeight */
208 labelHeight?: number;
209 /**
210 * 用于设置文本连接线的样式属性,null 表示不展示。
211 */
212 labelLine?: null | boolean | {
213 style?: object;
214 };
215 /** 只对极坐标下的文本生效,表示文本是否按照角度进行放射状显示,true 表示开启,false 表示关闭。 */
216 labelEmit?: boolean;
217 /**
218 * 文本布局类型,支持多种布局函数组合使用。
219 *
220 * 目前提供了三种:'overlap','fixedOverlap','limitInShape':
221 * 1. overlap: label 防遮挡,为了防止 label 之间相互覆盖,通过尝试向**四周偏移**来剔除放不下的 label。
222 * 2. fixed-overlap: 不改变 label 位置的情况下对相互重叠的 label 进行调整。
223 * 3. limit-in-shape: 剔除 shape 容纳不了的 label。
224 *
225 * @example
226 * ```ts
227 * layout: {
228 * type: 'overlap',
229 * },
230 * ```
231 */
232 layout?: GeometryLabelLayoutCfg | GeometryLabelLayoutCfg[];
233 /**
234 * 用于绘制 label 背景
235 */
236 background?: {
237 /**
238 * 背景框 图形属性配置
239 * - fill?: string; 背景框 填充色
240 * - stroke?: string; 背景框 描边色
241 * - lineWidth?: string; 背景框 描边宽度
242 * - radius?: number | number[]; 背景框圆角,支持整数或数组形式
243 */
244 style?: ShapeAttrs;
245 /** 背景框 内边距 */
246 padding?: number | number[];
247 };
248 /**
249 * 仅当 geometry 为 interval 时生效,指定当前 label 与当前图形的相对位置。
250 */
251 position?: ((data: Datum, mappingData: MappingDatum, index: number) => IntervalGeometryLabelPosition) | IntervalGeometryLabelPosition;
252 /** 动画配置。 */
253 animate?: AnimateOption | false | null;
254}
255/** `geometry().label({})` 配置定义 */
256export interface LabelOption {
257 /** 映射的字段。 */
258 fields?: string[];
259 /** 回调函数。 */
260 callback?: LabelCallback;
261 cfg?: GeometryLabelCfg;
262}
263/** Geometry 下每个 state 的配置结构 */
264export interface StateCfg {
265 /** 状态样式配置。 */
266 style?: object | StateStyleCallback;
267}
268/** geometry.state({}) 配置定义 */
269export interface StateOption {
270 /** 默认状态样式。 */
271 default?: StateCfg;
272 /** active 状态配置。 */
273 active?: StateCfg;
274 /** inactive 状态配置。 */
275 inactive?: StateCfg;
276 /** selected 状态配置。 */
277 selected?: StateCfg;
278}
279/** interval label 的位置 */
280export declare type IntervalGeometryLabelPosition = 'top' | 'bottom' | 'middle' | 'left' | 'right';
281/** G2 提供的 adjust 类型 */
282export declare type AdjustType = 'stack' | 'jitter' | 'dodge' | 'symmetric';
283/** geometry.color() 图形属性回调函数定义 */
284export declare type ColorAttrCallback = (...args: any[]) => string;
285/** geometry.shape() 图形属性回调函数定义 */
286export declare type ShapeAttrCallback = (...args: any[]) => string | any[];
287/** geometry.size() 图形属性回调函数定义 */
288export declare type SizeAttrCallback = (...args: any[]) => number;
289/** geometry.tooltip() 接口回调函数定义 */
290export declare type TooltipCallback = (...args: any[]) => LooseObject;
291/** geometry.style() 接口回调函数定义 */
292export declare type StyleCallback = (...args: any[]) => LooseObject;
293/** geometry.label() 接口回调函数定义 */
294export declare type LabelCallback = (...args: any[]) => GeometryLabelCfg | null | undefined;
295/** geometry label 中 content 属性的回调函数类型定义 */
296export declare type GeometryLabelContentCallback = (data: Datum, mappingData: MappingDatum, index: number) => string | IShape | IGroup;
297/** state 下 style 回调函数定义 */
298export declare type StateStyleCallback = (element: Element) => LooseObject;
299/** 获取 shape marker 时需要的信息 */
300export interface ShapeMarkerCfg {
301 /** 颜色。 */
302 color: string;
303 /** 是否是极坐标。 */
304 isInPolar: boolean;
305}
306/** 图形 marker 的配置信息。 */
307export interface ShapeMarkerAttrs {
308 /** marker 的形状。 */
309 symbol: string | ShapeMarkerSymbol;
310 /**
311 * marker 的样式,`ShapeAttrs` 属性结构如下:
312 *
313 * ```ts
314 * {
315 * // x 坐标
316 * x?: number;
317 * // y 坐标
318 * y?: number;
319 * // 圆半径
320 * r?: number;
321 * // 描边颜色
322 * stroke?: string | null;
323 * // 描边透明度
324 * strokeOpacity?: number;
325 * // 填充颜色
326 * fill?: string | null;
327 * // 填充透明度
328 * fillOpacity?: number;
329 * // 整体透明度
330 * opacity?: number;
331 * // 线宽
332 * lineWidth?: number;
333 * // 指定如何绘制每一条线段末端
334 * lineCap?: 'butt' | 'round' | 'square';
335 * // 用来设置2个长度不为0的相连部分(线段,圆弧,曲线)如何连接在一起的属性(长度为0的变形部分,其指定的末端和控制点在同一位置,会被忽略)
336 * lineJoin?: 'bevel' | 'round' | 'miter';
337 * // 设置线的虚线样式,可以指定一个数组。一组描述交替绘制线段和间距(坐标空间单位)长度的数字。 如果数组元素的数量是奇数,数组的元素会被复制并重复。例如, [5, 15, 25] 会变成 [5, 15, 25, 5, 15, 25]。这个属性取决于浏览器是否支持 setLineDash() 函数。
338 * lineDash?: number[] | null;
339 * // Path 路径
340 * path?: string | object[];
341 * // 图形坐标点
342 * points?: object[];
343 * // 宽度
344 * width?: number;
345 * // 高度
346 * height?: number;
347 * // 阴影模糊效果程度
348 * shadowBlur?: number;
349 * // 阴影颜色
350 * shadowColor?: string | null;
351 * // 阴影 x 方向偏移量
352 * shadowOffsetX?: number;
353 * // 阴影 y 方向偏移量
354 * shadowOffsetY?: number;
355 * // 设置文本内容的当前对齐方式
356 * textAlign?: 'start' | 'center' | 'end' | 'left' | 'right';
357 * // 设置在绘制文本时使用的当前文本基线
358 * textBaseline?: 'top' | 'hanging' | 'middle' | 'alphabetic' | 'ideographic' | 'bottom';
359 * // 字体样式
360 * fontStyle?: 'normal' | 'italic' | 'oblique';
361 * // 文本字体大小
362 * fontSize?: number;
363 * // 文本字体
364 * fontFamily?: string;
365 * // 文本粗细
366 * fontWeight?: 'normal' | 'bold' | 'bolder' | 'lighter' | number;
367 * // 字体变体
368 * fontVariant?: 'normal' | 'small-caps' | string;
369 * // 文本行高
370 * lineHeight?: number;
371 * [key: string]: any;
372 * }
373 * ```
374 *
375 * 详见 {@link https://github.com/antvis/g/blob/28e3178b616573e0fa6d59694f1aaca2baaa9766/packages/g-base/src/types.ts#L37|ShapeAttrs}
376 */
377 style: ShapeAttrs;
378}
379/** shape 关键点信息 */
380export interface ShapePoint {
381 /** 数据点映射后对应 x 的值。 */
382 readonly x: number | number[];
383 /** 数据点映射后对应 y 的值。 */
384 readonly y?: number | number[];
385 /** 数据在 y 方向的最小值。 */
386 readonly y0?: number;
387 size?: number;
388}
389/** 小提琴图 shape 关键点信息 */
390export declare type ViolinShapePoint = ShapePoint & {
391 _size?: number[];
392};
393/** 注册 ShapeFactory 需要实现的接口。 */
394export interface RegisterShapeFactory {
395 /** 默认的 shape 类型。 */
396 readonly defaultShapeType: string;
397 /** 返回绘制 shape 所有的关键点集合。 */
398 readonly getDefaultPoints?: (pointInfo: ShapePoint) => Point[];
399 /** 获取 shape 的默认绘制样式 */
400 readonly getDefaultStyle?: (geometryTheme: LooseObject) => LooseObject;
401 /** 获取 shape 对应的缩略图配置。 */
402 readonly getMarker?: (shapeType: string, markerCfg: ShapeMarkerCfg) => ShapeMarkerAttrs;
403 /** 创建具体的 G.Shape 实例。 */
404 readonly drawShape?: (shapeType: string, cfg: ShapeInfo, container: IGroup) => IShape | IGroup;
405}
406/** 注册具体 shape 需要实现的接口。 */
407export interface RegisterShape {
408 /** 计算绘制需要的关键点,在注册具体的 shape 时由开发者自己定义。 */
409 readonly getPoints?: (pointInfo: ShapePoint) => Point[];
410 /** 获取 shape 对应的缩略图样式配置,在注册具体的 shape 时由开发者自己定义。 */
411 readonly getMarker?: (markerCfg: ShapeMarkerCfg) => ShapeMarkerAttrs;
412 /** 绘制函数。 */
413 readonly draw: (cfg: ShapeInfo, container: IGroup) => IShape | IGroup | void;
414}
415/** Shape 接口定义。 */
416export interface Shape extends RegisterShape {
417 /** 坐标系对象。 */
418 coordinate: Coordinate;
419 /** 工具函数,将 0~1 path 转化成实际画布 path。 */
420 parsePath: (path: any) => PathCommand[];
421 /** 工具函数,0~1 的坐标点转换成实际画布坐标点。 */
422 parsePoint: (point: Point) => Point;
423 /** 工具函数,0~1 的坐标点集合转换成实际画布坐标点集合。 */
424 parsePoints: (points: Point[]) => Point[];
425}
426/** ShapeFactory 接口定义。 */
427export interface ShapeFactory extends RegisterShapeFactory {
428 /** 工厂名。 */
429 geometryType: string;
430 /** 坐标系对象。 */
431 coordinate: Coordinate;
432 /** ShapeFactory 下所有的主题样式。 */
433 theme: LooseObject;
434 /** 根据名称获取具体的 shape 对象。 */
435 getShape: (shapeType: string | string[]) => Shape;
436 /** 获取构成 shape 的关键点。 */
437 getShapePoints: (shapeType: string | string[], pointInfo: ShapePoint) => Point[];
438}
439/** 自定义 Shape marker 的函数 */
440export declare type ShapeMarkerSymbol = (x: number, y: number, r: number) => PathCommand[];
441/** Annotation position 回调函数 */
442export declare type AnnotationPositionCallback = (xScales: Scale[] | Record<string, Scale>, yScales: Scale[] | Record<string, Scale>) => [number | string, number | string];
443/** Annotation 位置相关属性的类型定义 */
444export declare type AnnotationPosition = [number | string, number | string] | Record<string, number | string> | AnnotationPositionCallback;
445/** Annotation 定义的通用属性,chart.annotation().line({}) */
446export interface AnnotationBaseOption {
447 readonly type?: string;
448 /** 指定 annotation 是否绘制在 canvas 最上层,默认为 false, 即绘制在最下层 */
449 readonly top?: boolean;
450 /** 是否进行动画 */
451 readonly animate?: boolean;
452 /** 动画参数配置,当且仅当 `animate` 属性为 true,即动画开启时生效。 */
453 readonly animateOption?: ComponentAnimateOption;
454 /** x 方向的偏移量 */
455 readonly offsetX?: number;
456 /** y 方向的偏移量 */
457 readonly offsetY?: number;
458}
459/** 使用 RegionPosition 定位的组件配置 */
460export interface RegionPositionBaseOption extends AnnotationBaseOption {
461 /** 起始位置 */
462 readonly start: AnnotationPosition;
463 /** 结束位置 */
464 readonly end: AnnotationPosition;
465 /** 图形样式属性 */
466 readonly style?: ShapeAttrs;
467}
468/** 使用 PointPosition 定位的组件配置 */
469export interface PointPositionBaseOption extends AnnotationBaseOption {
470 /** Point 定位位置 */
471 readonly position: AnnotationPosition;
472}
473/** 使用 Image Annotation 组件的配置定义 */
474export interface ImageOption extends RegionPositionBaseOption {
475 /** 图片路径 */
476 readonly src: string;
477}
478/** 使用 Line Annotation 组件的配置定义 */
479export interface LineOption extends RegionPositionBaseOption {
480 /** 文本配置定义 */
481 readonly text?: LineAnnotationTextCfg;
482}
483/** 使用 Arc Annotation 组件的配置定义 */
484export declare type ArcOption = RegionPositionBaseOption;
485/** 使用 Region Annotation 组件的配置定义 */
486export declare type RegionOption = RegionPositionBaseOption;
487/** 使用 Text Annotation 组件的配置定义 */
488export interface TextOption extends PointPositionBaseOption, Omit<EnhancedTextCfg, 'content'> {
489 content?: string | number | ((filteredData: object[]) => string | number);
490}
491/** 使用 DataMarker Annotation 组件的配置定义 */
492export interface DataMarkerOption extends PointPositionBaseOption {
493 /** point 设置 */
494 readonly point?: null | {
495 style?: ShapeAttrs;
496 };
497 /** line 设置 */
498 readonly line?: null | {
499 style?: ShapeAttrs;
500 length?: number;
501 };
502 /** text 设置 */
503 readonly text: null | EnhancedTextCfg;
504 /** 文本超出绘制区域时,是否自动调节文本方向,默认为 true */
505 readonly autoAdjust?: boolean;
506 /** 朝向,默认为 upward,可选值为 'upward' 或者 'downward' */
507 readonly direction?: 'upward' | 'downward';
508}
509/** 使用 DataRegion Annotation 组件的配置定义 */
510export interface DataRegionOption extends RegionPositionBaseOption {
511 /** line长度,default为 0 */
512 readonly lineLength?: number;
513 /** 标注区间的配置 */
514 readonly region?: null | {
515 style?: ShapeAttrs;
516 };
517 /** 文本的配置 */
518 readonly text?: null | EnhancedTextCfg;
519}
520/** 使用 RegionFilter Annotation 组件的配置定义 */
521export interface RegionFilterOption extends RegionPositionBaseOption {
522 /** 染色色值 */
523 readonly color: string;
524 readonly apply?: string[];
525}
526/** Shape Annotation 的配置 */
527export interface ShapeAnnotationOption extends AnnotationBaseOption {
528 /** 自定义 Annotation 绘制函数 */
529 render: (container: IGroup, view: View, helpers: {
530 parsePosition: (position: [string | number, string | number] | Datum) => Point;
531 }) => void;
532}
533/**
534 * Html Annotation 配置
535 */
536export interface HtmlAnnotationOption extends PointPositionBaseOption {
537 /** 容器元素 */
538 container?: string | HTMLElement;
539 /** 自定义 HTML DOM 元素 */
540 html: string | HTMLElement | ((container: HTMLElement, view: View) => void | string | HTMLElement);
541 /** X 方向对齐 */
542 alignX?: 'left' | 'middle' | 'right';
543 /** Y 方向对齐 */
544 alignY?: 'top' | 'middle' | 'bottom';
545 /** X 方向偏移 */
546 offsetX?: number;
547 /** Y 方向偏移 */
548 offsetY?: number;
549}
550/** Tooltip 内容框的 css 样式定义 */
551export interface TooltipDomStyles {
552 'g2-tooltip'?: LooseObject;
553 'g2-tooltip-title'?: LooseObject;
554 'g2-tooltip-list'?: LooseObject;
555 'g2-tooltip-list-item'?: LooseObject;
556 'g2-tooltip-marker'?: LooseObject;
557 'g2-tooltip-value'?: LooseObject;
558 'g2-tooltip-name'?: LooseObject;
559}
560/** 目前组件动画允许的参数配置 */
561export interface ComponentAnimateCfg {
562 /** 动画执行时间 */
563 readonly duration?: number;
564 /** 动画缓动函数 */
565 readonly easing?: string;
566 /** 动画延迟时间 */
567 readonly delay?: number;
568}
569/** 组件各个动画类型配置 */
570export interface ComponentAnimateOption {
571 /** 初入场动画配置 */
572 appear?: ComponentAnimateCfg;
573 /** 更新动画配置 */
574 update?: ComponentAnimateCfg;
575 /** 更新后新入场的动画配置 */
576 enter?: ComponentAnimateCfg;
577 /** 离场动画配置 */
578 leave?: ComponentAnimateCfg;
579}
580/** 列定义配置项 */
581export interface ScaleOption extends ScaleConfig {
582 /** 声明度量类型。 */
583 type?: ScaleType;
584 /**
585 * 同步 scale
586 *
587 * @example
588 * ```ts
589 * chart.scale({
590 * x: { sync: true },
591 * y: { sync: true },
592 * x1: { sync: 'x1' },
593 * x2: { sync: 'x1' },
594 * });
595 * ```
596 *
597 * 通过以上配置,我们会分别对 xy 两个字段,x1x2 两个字段进行同步度量操作。
598 */
599 sync?: boolean | string;
600 /**
601 * 只对 type: 'time' 的 scale 生效,强制显示最后的日期 tick
602 */
603 showLast?: boolean;
604 /**
605 * 用于声明使用数据记录中的哪些字段来组成一条数据的唯一 id(如有多个字段,则使用 '-' 连接)。
606 * 数据 id 用于标识 Element 图形元素,应用于 Geometry 中的图形元素 Element 更新。
607 * 默认 G2 内部会有一套 ID 生成规则,如果不能满足用户需求,用户既可以使用该属性配置 id
608 * @example
609 *
610 * 下面的例子中,声明了将 'x' 和 'y' 字段的数值来作为每条数据记录的 id,即下面数据两条数据的 id 分别为:'1-23' 和 '2-2'。
611 * ```ts
612 * const data = [
613 * { x: 1, y: 23, z: 'a' },
614 * { x: 2, y: 2, z: 'b' },
615 * ];
616 *
617 * chart.scale({
618 * x: { key: true },
619 * y: { key: true },
620 * });
621 * ```
622 */
623 key?: boolean;
624}
625/** Geometry 动画参数配置。geometry.animate() */
626export interface AnimateOption {
627 /** chart 初始化渲染时的入场动画,false/null 表示关闭入场动画。 */
628 appear?: AnimateCfg | false | null;
629 /** chart 发生更新时,新增元素的入场动画,false/null 表示关闭入场动画。 */
630 enter?: AnimateCfg | false | null;
631 /** 更新动画配置,false/null 表示关闭更新动画。 */
632 update?: AnimateCfg | false | null;
633 /** 销毁动画配置,false/null 表示关闭销毁动画。 */
634 leave?: AnimateCfg | false | null;
635}
636/** 用于配置项式声明交互行为 */
637export interface InteractionOption {
638 /** 交互名称 */
639 type: string;
640 /** 交互配置 */
641 cfg?: LooseObject;
642}
643/** 用于配置项式的 Geometry 创建方式 */
644export interface GeometryOption {
645 /** Geometry 的类型。 */
646 type?: 'interval' | 'line' | 'path' | 'point' | 'area' | 'polygon' | 'schema' | 'edge' | 'heatmap' | string;
647 /** position 通道映射规则,对应 `geometry.position()`。 */
648 position?: string | AttributeOption;
649 /** color 通道映射规则,对应 `geometry.color()`。 */
650 color?: string | AttributeOption;
651 /** shape 通道映射规则,对应 `geometry.shape()`。 */
652 shape?: string | AttributeOption;
653 /** size 通道映射规则,对应 `geometry.size()`。 */
654 size?: number | string | AttributeOption;
655 /** adjust 数据调整方式,对应 `geometry.adjust()`。 */
656 adjust?: string | string[] | AdjustOption | AdjustOption[];
657 /** style 样式配置,对应 `geometry.size()`。 */
658 style?: StyleOption | LooseObject;
659 /** tooltip 配置,对应 `geometry.tooltip()`。 */
660 tooltip?: GeometryTooltipOption | boolean | string;
661 /** Geometry 动画配置,对应 `geometry.animate()`。 */
662 animate?: AnimateOption | boolean;
663 /** Label 配置,对应 `geometry.label()`。 */
664 label?: LabelOption | false | string;
665 /** state 样式配置,对应 `geometry.state()`。 */
666 state?: StateOption;
667 /** 其他配置 */
668 cfg?: {
669 /** 是否对数据进行排序 */
670 sortable?: boolean;
671 /** 是否可见 */
672 visible?: boolean;
673 /** 是否连接空值,仅对 'line', 'area' 和 'path' 生效 */
674 connectNulls?: boolean;
675 };
676}
677/** 用于配置型式的 View 声明方式 */
678export interface ViewOption {
679 /** view 的唯一表示 ID */
680 readonly id?: string;
681 /** view 的绘制范围,起始点为左上角。 */
682 readonly region?: Region;
683 /**
684 * 设置图表的内边距,使用方式参考 CSS 盒模型。
685 * 下图黄色区域即为 padding 的范围。
686 * ![](https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*pYwiQrdXGJ8AAAAAAAAAAABkARQnAQ)
687 *
688 * @example
689 * 1. padding: 20
690 * 2. padding: [ 10, 30, 30 ]
691 */
692 readonly padding?: ViewPadding;
693 /** 设置主题。 */
694 readonly theme?: LooseObject | string;
695 /** 是否可见。 */
696 readonly visible?: boolean;
697 /**
698 * 图表组件、图形映射等相关的配置。
699 */
700 readonly options?: Options;
701}
702/** Chart 构造方法的入参 */
703export interface ChartCfg extends Omit<ViewCfg, 'parent' | 'canvas' | 'foregroundGroup' | 'middleGroup' | 'backgroundGroup' | 'region'> {
704 /** 指定 chart 绘制的 DOM,可以传入 DOM id,也可以直接传入 dom 实例。 */
705 readonly container: string | HTMLElement;
706 /** 图表宽度。 */
707 readonly width?: number;
708 /** 图表高度。 */
709 readonly height?: number;
710 /**
711 * 图表是否自适应容器宽高,默认为 false,用户需要手动设置 width 和 height。
712 * 当 `autoFit: true` 时,会自动取图表容器的宽高,如果用户设置了 height,那么会以用户设置的 height 为准。
713 */
714 readonly autoFit?: boolean;
715 /** 指定渲染引擎,默认使用 canvas。 */
716 readonly renderer?: Renderer;
717 /** 设置设备像素比,默认取浏览器的值 `window.devicePixelRatio`。 */
718 readonly pixelRatio?: number;
719 /**
720 * 是否开启局部刷新,默认开启。
721 */
722 readonly localRefresh?: boolean;
723 /** 支持 CSS transform,开启后图表的交互以及事件将在页面设置了 css transform 属性时生效,默认关闭。 */
724 readonly supportCSSTransform?: boolean;
725 /**
726 * 配置图表默认交互,仅支持字符串形式。
727 */
728 readonly defaultInteractions?: string[];
729}
730export declare type SyncViewPaddingFn = (chart: View, views: View[], PC: PaddingCalCtor) => void;
731/** View 构造参数 */
732export interface ViewCfg {
733 /** View id,可以由外部传入 */
734 readonly id?: string;
735 /** 当前 view 的父级 view。 */
736 readonly parent: View;
737 /** canvas 实例。 */
738 readonly canvas: ICanvas;
739 /** 前景层 */
740 readonly foregroundGroup: IGroup;
741 /** 中间层 */
742 readonly middleGroup: IGroup;
743 /** 背景层 */
744 readonly backgroundGroup: IGroup;
745 /** view 的绘制范围 */
746 readonly region?: Region;
747 /** 是否对超出坐标系范围的 Geometry 进行剪切 */
748 readonly limitInPlot?: boolean;
749 /**
750 * 设置图表的内边距,使用方式参考 CSS 盒模型。
751 * 下图黄色区域即为 padding 的范围。
752 * ![](https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*pYwiQrdXGJ8AAAAAAAAAAABkARQnAQ)
753 *
754 * @example
755 * 1. padding: 20
756 * 2. padding: [ 10, 30, 30 ]
757 */
758 readonly padding?: ViewPadding;
759 /**
760 * 设置图表的内边距在padding的基础上增加appendPadding的调整。
761 * @example
762 * 1. padding: 20
763 * 2. padding: [ 10, 30, 30 ]
764 */
765 readonly appendPadding?: ViewAppendPadding;
766 /**
767 * 是否同步子 view 的 padding,可以是 boolean / SyncViewPaddingFn
768 * 比如:
769 * view1 的 padding 10
770 * view2 的 padding 20
771 * 那么两个子 view 的 padding 统一变成最大的 20.
772 *
773 * 如果是 Funcion,则使用自定义的方式去计算子 view 的 padding,这个函数中去修改所有的 views autoPadding 值
774 */
775 readonly syncViewPadding?: boolean | SyncViewPaddingFn;
776 /** 设置 view 实例主题。 */
777 readonly theme?: LooseObject | string;
778 /**
779 * 图表组件、图形映射等相关的配置。
780 */
781 readonly options?: Options;
782 /** 是否可见。 */
783 readonly visible?: boolean;
784}
785/**
786 * @ignore
787 * 组件及布局的信息
788 */
789export interface ComponentOption {
790 readonly id?: string;
791 readonly component: GroupComponent | HtmlComponent;
792 readonly layer: LAYER;
793 direction: DIRECTION;
794 readonly type: COMPONENT_TYPE;
795 readonly extra?: any;
796}
797/** Legend marker 的配置结构 */
798export interface MarkerCfg extends LegendMarkerCfg {
799 /** 配置图例 marker 的 symbol 形状。 */
800 symbol?: Marker | MarkerCallback;
801 style?: ShapeAttrs | ((style: ShapeAttrs) => ShapeAttrs);
802}
803/** Legend item 各个图例项的数据结构 */
804export interface LegendItem {
805 /**
806 * 唯一值,用于动画或者查找
807 */
808 id?: string;
809 /** 名称 */
810 name: string;
811 /** 值 */
812 value: any;
813 /** 图形标记 */
814 marker?: MarkerCfg | ((name: string, index: number, item: {
815 name: string;
816 value: string;
817 } & MarkerCfg) => MarkerCfg);
818 /** 初始是否处于未激活状态 */
819 unchecked?: boolean;
820}
821export interface G2LegendTitleCfg extends LegendTitleCfg {
822 /** title 文本显示内容 */
823 text?: string;
824}
825/**
826 * 图例项配置
827 */
828export interface LegendCfg extends Omit<CategoryLegendCfg, 'marker'> {
829 /**
830 * 是否为自定义图例,当该属性为 true 时,需要声明 items 属性。
831 */
832 readonly custom?: boolean;
833 /**
834 * 布局方式: horizontal,vertical
835 */
836 layout?: 'horizontal' | 'vertical';
837 /**
838 * 图例标题配置,默认不展示。
839 *
840 * 属性结构如下:
841 *
842 * ```ts
843 * {
844 * spacing?: number; // 标题同图例项的间距
845 * style?: ShapeAttrs; // 文本样式配置项
846 * }
847 * ```
848 *
849 * 详见 {@link https://github.com/antvis/component/blob/81890719a431b3f9088e0c31c4d5d382ef0089df/src/types.ts#L639|LegendTitleCfg},
850 */
851 title?: G2LegendTitleCfg;
852 /**
853 * 背景框配置项。
854 *
855 * 属性结构如下:
856 *
857 * ```ts
858 * {
859 * padding?: number | number[]; // 背景的留白
860 * style?: ShapeAttrs; // 背景样式配置项
861 * }
862 * ```
863 *
864 * 详见 {@link https://github.com/antvis/component/blob/81890719a431b3f9088e0c31c4d5d382ef0089df/src/types.ts#L652|LegendBackgroundCfg}
865 */
866 background?: LegendBackgroundCfg;
867 /** 图例的位置。 */
868 position?: 'top' | 'top-left' | 'top-right' | 'right' | 'right-top' | 'right-bottom' | 'left' | 'left-top' | 'left-bottom' | 'bottom' | 'bottom-left' | 'bottom-right';
869 /** 动画开关,默认关闭。 */
870 animate?: boolean;
871 /** 动画参数配置,当且仅当 `animate` 属性为 true,即动画开启时生效。 */
872 animateOption?: ComponentAnimateOption;
873 /**
874 * **分类图例适用**,控制图例项水平方向的间距。
875 */
876 itemSpacing?: number;
877 /**
878 * **分类图例适用**,控制图例项垂直方向的间距。
879 */
880 itemMarginBottom?: number;
881 /**
882 * **分类图例适用**,图例项的最大宽度,超出则自动缩略。
883 * `maxItemWidth` 可以是像素值;
884 * 也可以是相对值(取 0 到 1 范围的数值),代表占图表宽度的多少
885 */
886 maxItemWidth?: number;
887 /**
888 * **分类图例适用**,图例项的宽度, 默认为 null,自动计算。
889 */
890 itemWidth?: number;
891 /**
892 * **分类图例适用**,图例的高度,默认为 null。
893 */
894 itemHeight?: number;
895 /**
896 * **分类图例适用**,图例项 name 文本的配置。
897 * 属性结构如下:
898 *
899 * ```ts
900 * {
901 * spacing?: number; // 图例项 name 同后面 value 的间距
902 * formatter?: (text: string, item: ListItem, index: number) => any; // 格式化文本函数
903 * style?: ShapeAttrs; // 文本配置项
904 * }
905 * ```
906 *
907 * 详见 {@link https://github.com/antvis/component/blob/81890719a431b3f9088e0c31c4d5d382ef0089df/src/types.ts#L665|LegendItemNameCfg},
908 */
909 itemName?: LegendItemNameCfg;
910 /**
911 * **分类图例适用**,图例项 value 附加值的配置项。
912 * 属性结构如下:
913 *
914 * ```ts
915 * {
916 * alignRight?: boolean; // 是否右对齐,默认为 false,仅当设置图例项宽度时生效
917 * formatter?: (text: string, item: ListItem, index: number) => any; // 格式化文本函数
918 * style?: ShapeAttrs; // 图例项附加值的配置
919 * }
920 * ```
921 *
922 * 详见 {@link https://github.com/antvis/component/blob/81890719a431b3f9088e0c31c4d5d382ef0089df/src/types.ts#L685|LegendItemValueCfg},
923 */
924 itemValue?: LegendItemValueCfg;
925 /**
926 * **分类图例适用**,图例项最大宽度设置。
927 */
928 maxWidth?: number;
929 /**
930 * **分类图例适用**,图例项最大高度设置。
931 */
932 maxHeight?: number;
933 /**
934 * **分类图例适用**,图例项最大宽度比例(以 view 的 bbox 宽度为参照,默认 0.25)。
935 */
936 maxWidthRatio?: number;
937 /**
938 * **分类图例适用**,图例项最大高度比例(以 view 的 bbox 高度为参照,默认 0.25)。
939 */
940 maxHeightRatio?: number;
941 /**
942 * **分类图例适用**,图例项的 marker 图标的配置。
943 */
944 marker?: MarkerCfg | ((name: string, index: number, item: {
945 name: string;
946 value: string;
947 } & MarkerCfg) => MarkerCfg);
948 /**
949 * **适用于分类图例**,当图例项过多时是否进行分页。
950 */
951 flipPage?: boolean;
952 /**
953 * **适用于分类图例**,图例分页器的样式设置。
954 */
955 pageNavigator?: LegendPageNavigatorCfg;
956 /**
957 * **分类图例适用**,用户自己配置图例项的内容。
958 */
959 items?: LegendItem[];
960 /**
961 * **分类图里适用**,用来配置正反选功能
962 */
963 radio?: LegendRadio;
964 /**
965 * **分类图例适用**,是否将图例项逆序展示。
966 */
967 reversed?: boolean;
968 /**
969 * **连续图例适用**,选择范围的最小值。
970 */
971 min?: number;
972 /**
973 * **连续图例适用**,选择范围的最大值。
974 */
975 max?: number;
976 /**
977 * **连续图例适用**,选择的值。
978 */
979 value?: number[];
980 /**
981 * **连续图例适用**,选择范围的色块样式配置项。
982 * 属性结构如下:
983 *
984 * ```ts
985 * {
986 * style?: ShapeAttrs; // 选定范围的样式
987 * }
988 * ```
989 *
990 * 详见 {@link https://github.com/antvis/component/blob/81890719a431b3f9088e0c31c4d5d382ef0089df/src/types.ts#L574|ContinueLegendTrackCfg}
991 */
992 track?: ContinueLegendTrackCfg;
993 /**
994 * **连续图例适用**,图例滑轨(背景)的样式配置项。
995 * 属性结构如下:
996 *
997 * ```ts
998 * {
999 * type?: string; // rail 的类型,color, size
1000 * size?: number; // 滑轨的宽度
1001 * defaultLength?: number; // 滑轨的默认长度,,当限制了 maxWidth,maxHeight 时,不会使用这个属性会自动计算长度
1002 * style?: ShapeAttrs; // 滑轨的样式
1003 * }
1004 * ```
1005 *
1006 * 详见 {@link https://github.com/antvis/component/blob/81890719a431b3f9088e0c31c4d5d382ef0089df/src/types.ts#L595|ContinueLegendRailCfg},
1007 */
1008 rail?: ContinueLegendRailCfg;
1009 /**
1010 * **连续图例适用**,文本的配置项。
1011 * 属性结构如下:
1012 *
1013 * ```ts
1014 * {
1015 * // 文本同滑轨的对齐方式,有五种类型
1016 * // rail : 同滑轨对齐,在滑轨的两端
1017 * // top, bottom: 图例水平布局时有效
1018 * // left, right: 图例垂直布局时有效
1019 * align?: string;
1020 * spacing?: number; // 文本同滑轨的距离
1021 * style?: ShapeAttrs; // 文本样式
1022 * }
1023 * ```
1024 *
1025 * 详见 {@link https://github.com/antvis/component/blob/81890719a431b3f9088e0c31c4d5d382ef0089df/src/types.ts#L618|ContinueLegendLabelCfg}
1026 */
1027 label?: ContinueLegendLabelCfg;
1028 /**
1029 * **连续图例适用**,滑块的配置项。
1030 * 属性结构如下:
1031 *
1032 * ```ts
1033 * {
1034 * size?: number; // 滑块的大小
1035 * style?: ShapeAttrs; // 滑块的样式设置
1036 * }
1037 * ```
1038 *
1039 * 详见 {@link https://github.com/antvis/component/blob/81890719a431b3f9088e0c31c4d5d382ef0089df/src/types.ts#L582|ContinueLegendTrackCfg},
1040 */
1041 handler?: ContinueLegendHandlerCfg;
1042 /**
1043 * **连续图例适用**,滑块是否可以滑动。
1044 */
1045 slidable?: boolean;
1046 /** 图例 x 方向的偏移。 */
1047 offsetX?: number;
1048 /** 图例 y 方向的偏移。 */
1049 offsetY?: number;
1050 /** 图例在四个方向的偏移量 */
1051 padding?: number[];
1052 /**
1053 * 图例高亮状态,false 表示默认置灰,无或 true 表示高亮
1054 */
1055 selected?: {
1056 [key: string]: boolean;
1057 };
1058}
1059/**
1060 * Tooltip Crosshairs 的文本数据结构。
1061 */
1062export interface TooltipCrosshairsText extends CrosshairTextCfg {
1063 /** crosshairs 文本内容 */
1064 content?: string;
1065}
1066/**
1067 * 辅助线文本回调函数
1068 * @param type 对应当前 crosshairs 的类型,值为 'x' 或者 'y'
1069 * @param defaultContent 对应当前 crosshairs 默认的文本内容
1070 * @param items 对应当前 tooltip 内容框中的数据
1071 * @param currentPoint 对应当前坐标点
1072 * @returns 返回当前 crosshairs 对应的辅助线文本配置
1073 */
1074export declare type TooltipCrosshairsTextCallback = (type: string, defaultContent: any, items: any[], currentPoint: Point) => TooltipCrosshairsText;
1075/** Tooltip crosshairs 配置结构 */
1076export interface TooltipCrosshairs {
1077 /**
1078 * crosshairs 的类型: `x` 表示 x 轴上的辅助线,`y` 表示 y 轴上的辅助项。
1079 * 以下是在不同坐标系下,crosshairs 各个类型的表现:
1080 *
1081 * | 坐标系 | type = 'x' | type = 'xy' | type = 'y' |
1082 * | ------------ | ------------- | ------------- |
1083 * | 直角坐标系 | ![image](https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*jmUBQ4nbtXsAAAAAAAAAAABkARQnAQ) | ![image](https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*RpWXT76ZSQgAAAAAAAAAAABkARQnAQ) | ![image](https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*Xjl8TLIJLuUAAAAAAAAAAABkARQnAQ) |
1084 * | 极坐标 | ![image](https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*zbMVSoKTyFsAAAAAAAAAAABkARQnAQ) | ![image](https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*k5EYRJspET0AAAAAAAAAAABkARQnAQ) | ![image](https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*n_TKQpUaXWEAAAAAAAAAAABkARQnAQ) |
1085 */
1086 type?: 'x' | 'y' | 'xy';
1087 /**
1088 * 辅助线的样式配置。
1089 * 属性结构如下:
1090 *
1091 * ```ts
1092 * {
1093 * style?: ShapeAttrs; // 线的样式配置
1094 * }
1095 * ```
1096 *
1097 * 详见 {@link https://github.com/antvis/component/blob/81890719a431b3f9088e0c31c4d5d382ef0089df/src/types.ts#L1177|CrosshairLineCfg}
1098 */
1099 line?: CrosshairLineCfg;
1100 /**
1101 * 辅助线文本配置,支持回调。
1102 */
1103 text?: TooltipCrosshairsText | TooltipCrosshairsTextCallback;
1104 /**
1105 * 辅助线文本背景配置。
1106 * 属性结构如下:
1107 *
1108 * ```ts
1109 * {
1110 * padding?: number | number[]; // 文本背景周围的留白
1111 * style?: ShapeAttrs; // 文本背景的样式
1112 * }
1113 * ```
1114 *
1115 * 详见 {@link https://github.com/antvis/component/blob/81890719a431b3f9088e0c31c4d5d382ef0089df/src/types.ts#L1185|CrosshairTextBackgroundCfg}
1116 */
1117 textBackground?: CrosshairTextBackgroundCfg;
1118 /** 辅助线是否跟随鼠标移动,默认为 false,即定位到数据点 */
1119 follow?: boolean;
1120}
1121export declare type TooltipTitle = string | ((title: string, datum: Datum) => string);
1122export declare type TooltipItem = {
1123 /** 原始数据 */
1124 readonly data: Datum;
1125 /** 映射之后的数据 */
1126 readonly mappingData: Datum;
1127 /** tooltip item 中名称 */
1128 readonly name: string;
1129 /** tooltip item 中值 */
1130 readonly value: string | number;
1131 /** tooltip item 中颜色 */
1132 readonly color: string;
1133 /** tooltip item 中图标类型 */
1134 readonly marker: string;
1135};
1136/** chart.tooltip() 接口配置属性 */
1137export interface TooltipCfg {
1138 /**
1139 * 设置 tooltip 内容框是否跟随鼠标移动。
1140 * 默认为 true,跟随鼠标移动,false 则固定位置不随鼠标移动。
1141 */
1142 follow?: boolean;
1143 /** tooltip 是否允许鼠标滑入,默认为 false,不允许 */
1144 enterable?: boolean;
1145 /** tooltip 显示延迟(ms),默认为 16ms,建议在 enterable = true 的时候才设置 */
1146 showDelay?: number;
1147 /** 是否展示 tooltip 标题。 */
1148 showTitle?: boolean;
1149 /**
1150 * 设置 tooltip 的标题内容:如果值为数据字段名,则会展示数据中对应该字段的数值,如果数据中不存在该字段,则直接展示 title 值。
1151 * 同时支持传入方法,回调的方式返回字符串
1152 */
1153 title?: TooltipTitle;
1154 /** 设置 tooltip 的固定展示位置,相对于数据点。 */
1155 position?: 'top' | 'bottom' | 'left' | 'right';
1156 /** true 表示合并当前点对应的所有数据并展示,false 表示只展示离当前点最逼近的数据内容。 */
1157 shared?: boolean;
1158 /** 是否展示 crosshairs。 */
1159 showCrosshairs?: boolean;
1160 /** 配置 tooltip 的 crosshairs,当且仅当 `showCrosshairs` 为 true 时生效。 */
1161 crosshairs?: TooltipCrosshairs;
1162 /** 是否渲染 tooltipMarkers。 */
1163 showMarkers?: boolean;
1164 /** tooltipMarker 的样式配置。 */
1165 marker?: object;
1166 /** 是否展示 tooltip 内容框 */
1167 showContent?: boolean | ((datum: Datum) => boolean);
1168 /** 自定义 tooltip 的容器。 */
1169 container?: string | HTMLElement;
1170 /** 用于指定图例容器的模板,自定义模板时必须包含各个 dom 节点的 class。 */
1171 containerTpl?: string;
1172 /** 每项记录的默认模板,自定义模板时必须包含各个 dom 节点的 class。 */
1173 itemTpl?: string;
1174 /** 传入各个 dom 的样式。 */
1175 domStyles?: TooltipDomStyles;
1176 /** tooltip 偏移量。 */
1177 offset?: number;
1178 /** 是否将 tooltip items 逆序 */
1179 reversed?: boolean;
1180 /** 是否显示空值的 tooltip 项目 */
1181 showNil?: boolean;
1182 /** 在 tooltip 渲染之前,对最终的 items 进行自定义处理(比如排序、过滤、格式化等) */
1183 customItems?: (originalItems: TooltipItem[]) => TooltipItem[];
1184 /** 支持自定义模板 */
1185 customContent?: (title: string, data: any[]) => string | HTMLElement;
1186}
1187/** 坐标系配置 */
1188export interface CoordinateOption {
1189 /** 坐标系类型 */
1190 type?: 'polar' | 'theta' | 'rect' | 'cartesian' | 'helix';
1191 /** 坐标系配置项,目前常用于极坐标。 */
1192 cfg?: CoordinateCfg;
1193 /**
1194 * 坐标系变换操作:
1195 * 1. rotate 表示旋转,使用弧度制。
1196 * 2. scale 表示沿着 x 和 y 方向的缩放比率。
1197 * 3. reflect 表示沿 x 方向镜像或者沿 y 轴方向映射。
1198 * 4. transpose 表示 x,y 轴置换。
1199 */
1200 actions?: CoordinateActions[];
1201}
1202/** 极坐标系支持的配置属性 */
1203export interface CoordinateCfg {
1204 /**
1205 * 用于极坐标,配置起始弧度。
1206 */
1207 startAngle?: number;
1208 /**
1209 * 用于极坐标,配置结束弧度。
1210 */
1211 endAngle?: number;
1212 /**
1213 * 用于极坐标,配置极坐标半径,0 - 1 范围的数值。
1214 */
1215 radius?: number;
1216 /**
1217 * 用于极坐标,极坐标内半径,0 -1 范围的数值。
1218 */
1219 innerRadius?: number;
1220}
1221/** 坐标轴网格线的配置属性 */
1222export interface AxisGridCfg {
1223 /**
1224 * 线的样式。
1225 * 属性结构如下:
1226 *
1227 * ```ts
1228 * {
1229 * type?: string; // 栅格线的类型,'line' 或者 'circle'
1230 * style?: ShapeAttrs; // 栅格线的样式配置项
1231 * }
1232 * ```
1233 *
1234 * 详见 {@link https://github.com/antvis/component/blob/81890719a431b3f9088e0c31c4d5d382ef0089df/src/types.ts#L407|GridLineCfg}
1235 */
1236 line?: GridLineCfg;
1237 /**
1238 * 两个栅格线间的填充色。
1239 */
1240 alternateColor?: string | string[];
1241 /**
1242 * 对于 circle 是否关闭 grid。
1243 */
1244 closed?: boolean;
1245 /**
1246 * 是否同刻度线对齐,如果值为 false,则会显示在两个刻度中间。
1247 * ![image](https://gw.alipayobjects.com/mdn/rms_2274c3/afts/img/A*YX6fS4GTTvMAAAAAAAAAAABkARQnAQ)
1248 */
1249 alignTick?: boolean;
1250}
1251/** 坐标轴配置属性,chart.axis() */
1252export interface AxisCfg {
1253 /**
1254 * 是否渲染在画布顶层,防止部分图形中,需要将 axis 显示在图形上面,避免被图形遮挡
1255 */
1256 top?: boolean;
1257 /**
1258 * 适用于直角坐标系,设置坐标轴的位置。
1259 */
1260 position?: 'top' | 'bottom' | 'right' | 'left';
1261 /**
1262 * 坐标轴线的配置项,null 表示不展示。
1263 * 属性结构如下:
1264 *
1265 * ```ts
1266 * {
1267 * style?: ShapeAttrs; // 坐标轴线的样式配置项
1268 * }
1269 * ```
1270 *
1271 * 详见 {@link https://github.com/antvis/component/blob/81890719a431b3f9088e0c31c4d5d382ef0089df/src/types.ts#L91|AxisLineCfg}
1272 */
1273 line?: AxisLineCfg | null;
1274 /**
1275 * 坐标轴刻度线线的配置项,null 表示不展示。
1276 * 属性结构如下:
1277 *
1278 * ```ts
1279 * {
1280 * style?: ShapeAttrs; // 坐标轴刻度线的样式配置项
1281 * alignTick?: boolean; // 是否同 tick 对齐
1282 * length?: number; // 长度
1283 * }
1284 * ```
1285 *
1286 * 详见 {@link https://github.com/antvis/component/blob/81890719a431b3f9088e0c31c4d5d382ef0089df/src/types.ts#L103|AxisTickLineCfg}
1287 */
1288 tickLine?: AxisTickLineCfg | null;
1289 /**
1290 * 坐标轴子刻度线的配置项,null 表示不展示。
1291 * 属性结构如下:
1292 *
1293 * ```ts
1294 * {
1295 * style?: ShapeAttrs; // 坐标轴刻度线的样式配置项
1296 * count?: number; // 子刻度个数
1297 * length?: number; // 子刻度线长度
1298 * }
1299 * ```
1300 *
1301 * 详见 {@link https://github.com/antvis/component/blob/81890719a431b3f9088e0c31c4d5d382ef0089df/src/types.ts#L169|AxisSubTickLineCfg}
1302 */
1303 subTickLine?: AxisSubTickLineCfg | null;
1304 /**
1305 * 标题的配置项,null 表示不展示。
1306 * 属性结构如下:
1307 *
1308 * ```ts
1309 * {
1310 * offset?: number; // 标题距离坐标轴的距离
1311 * style?: ShapeAttrs; // 标题文本配置项
1312 * autoRotate?: boolean; // 是否自动旋转
1313 * }
1314 * ```
1315 *
1316 * 详见 {@link https://github.com/antvis/component/blob/81890719a431b3f9088e0c31c4d5d382ef0089df/src/types.ts#L191|AxisTitleCfg}
1317 */
1318 title?: AxisTitleCfg | null;
1319 /**
1320 * 文本标签的配置项,null 表示不展示。
1321 * 属性结构如下:
1322 *
1323 * ```ts
1324 * {
1325 * // 坐标轴文本的样式
1326 * style?: ShapeAttrs;
1327 * // label 的偏移量
1328 * offset?: number;
1329 * // 文本旋转角度
1330 * rotate?: number;
1331 * // 格式化函数
1332 * formatter?: (text: string, item: ListItem, index: number) => any;
1333 * // 是否自动旋转,默认 false
1334 * autoRotate?: boolean | (isVertical: boolean, labelGroup: IGroup, limitLength?: number) => boolean; | string;
1335 * // 是否自动隐藏,默认 true
1336 * autoHide?: boolean | (isVertical: boolean, labelGroup: IGroup, limitLength?: number) => boolean; | string;
1337 * // 是否自动省略,默认 false
1338 * autoEllipsis?: boolean | (isVertical: boolean, labelGroup: IGroup, limitLength?: number) => boolean; | string;
1339 * }
1340 * ```
1341 *
1342 * 详见 {@link https://github.com/antvis/component/blob/81890719a431b3f9088e0c31c4d5d382ef0089df/src/types.ts#L127|AxisLabelCfg}
1343 */
1344 label?: AxisLabelCfg | null;
1345 /** 坐标轴网格线的配置项,null 表示不展示。 */
1346 grid?: AxisGridCfg | null;
1347 /** 动画开关,默认开启。 */
1348 animate?: boolean;
1349 /** 动画参数配置。 */
1350 animateOption?: ComponentAnimateOption;
1351 /** 标记坐标轴 label 的方向,左侧为 1,右侧为 -1。 */
1352 verticalFactor?: number;
1353 /**
1354 * 配置坐标轴垂直方向的最大限制长度,对文本自适应有很大影响。
1355 * 1. 可以直接设置像素值,如 100;
1356 * 2. 也可设置绝对值,如 0.2,如果是 x 轴,则相对于图表的高度,如果是 y 轴,则相对于图表的宽度
1357 *
1358 * 在 G2 中,x 轴的文本默认最大高度为图表高度的 1/2,y 轴的文本默认最大长度为图表宽度的 1/3
1359 */
1360 verticalLimitLength?: number;
1361}
1362export interface SliderCfg {
1363 /** slider 高度 */
1364 readonly height?: number;
1365 /** 滑块背景区域配置 */
1366 readonly trendCfg?: Omit<TrendCfg, 'data'> & {
1367 data?: number[];
1368 };
1369 /** 滑块背景样式 */
1370 readonly backgroundStyle?: any;
1371 /** 滑块前景样式 */
1372 readonly foregroundStyle?: any;
1373 /** 滑块两个操作块样式 */
1374 readonly handlerStyle?: any;
1375 /** 文本样式 */
1376 readonly textStyle?: any;
1377 /** 允许滑动位置的最小值 */
1378 readonly minLimit?: number;
1379 /** 允许滑动位置的最大值 */
1380 readonly maxLimit?: number;
1381 /** 滑块初始化的起始位置 */
1382 readonly start?: number;
1383 /** 滑块初始化的结束位置 */
1384 readonly end?: number;
1385 /** 布局的 padding */
1386 readonly padding?: number[];
1387 /** 滑块文本格式化函数 */
1388 formatter?: (val: any, datum: Datum, idx: number) => any;
1389}
1390/**
1391 * 事件 payload
1392 */
1393export declare type EventPayload = LooseObject & {
1394 /** 触发事件的来源 */
1395 source?: string;
1396};
1397export declare type EventCallback = (event: LooseObject) => void;
1398/**
1399 * todo: 事件名可穷举,后续需要补充
1400 * 事件配置项
1401 */
1402export interface EventCfg {
1403 [key: string]: EventCallback;
1404}
1405/**
1406 * 缩略轴的配置项
1407 */
1408export declare type SliderOption = SliderCfg | boolean;
1409/** 滚动条组件配置项 */
1410export interface ScrollbarCfg {
1411 /** 滚动条类型,默认 horizontal */
1412 type?: 'horizontal' | 'vertical';
1413 /** 宽度,在 vertical 下生效 */
1414 width?: number;
1415 /** 高度,在 horizontal 下生效 */
1416 height?: number;
1417 /** 可选 padding */
1418 padding?: Padding;
1419 /** 对应水平滚动条,为 X 轴每个分类字段的宽度;对于垂直滚动条,为 X 轴每个分类字段的高度 */
1420 categorySize?: number;
1421 /** 滚动的时候是否开启动画,默认跟随 view 中 animate 配置 */
1422 animate?: boolean;
1423 /** 主题样式设置, 暂不提供 hover 高亮滑块样式配置 */
1424 style?: {
1425 /** 滑道颜色 */
1426 trackColor?: string;
1427 /** 滑块颜色 */
1428 thumbColor?: string;
1429 /** 滑块高亮样式,对应主题的 hover.style.thumbColor */
1430 thumbHighlightColor?: string;
1431 lineCap?: string;
1432 };
1433}
1434/** 滚动条配置 */
1435export declare type ScrollbarOption = ScrollbarCfg | boolean;
1436/** 配置项声明式 */
1437export interface Options {
1438 /** 数据源配置。 */
1439 readonly data?: Data;
1440 /** 设置数据过滤条件,以 data 中的数据属性为 key。 */
1441 readonly filters?: Record<string, FilterCondition>;
1442 /** 坐标轴配置,以 data 中的数据属性为 key。 */
1443 readonly axes?: Record<string, AxisOption> | boolean;
1444 /** 图例配置,以 data 中的数据属性为 key。 */
1445 readonly legends?: AllLegendsOptions;
1446 /** 列定义配置,用于配置数值的类型等,以 data 中的数据属性为 key。 */
1447 readonly scales?: Record<string, ScaleOption>;
1448 /** Tooltip 配置。 */
1449 readonly tooltip?: TooltipOption;
1450 /** 坐标系配置。 */
1451 readonly coordinate?: CoordinateOption;
1452 /** 静态辅助元素声明。 */
1453 readonly annotations?: (ArcOption | RegionFilterOption | ImageOption | LineOption | TextOption | RegionOption | DataMarkerOption | DataRegionOption)[];
1454 /** Geometry 配置 */
1455 readonly geometries?: GeometryOption[];
1456 /** 开启/关闭动画,默认开启 */
1457 readonly animate?: boolean;
1458 /** 配置需要使用的交互行为 */
1459 readonly interactions?: InteractionOption[];
1460 /** 事件配置 */
1461 readonly events?: EventCfg;
1462 /** 缩略轴的配置 */
1463 readonly slider?: SliderOption;
1464 /** 滚动条配置 */
1465 readonly scrollbar?: ScrollbarOption;
1466 /** 子 View */
1467 readonly views?: ViewOption[];
1468 /** 分面 */
1469 readonly facets?: (RectCfg | MirrorCfg | CircleCfg | ListCfg | TreeCfg)[];
1470 /** 其他自定义的 option */
1471 readonly [name: string]: any;
1472}
1473/** 支持的 Marker 类型 */
1474export declare type Marker = 'circle' | 'square' | 'diamond' | 'triangle' | 'triangle-down' | 'hexagon' | 'bowtie' | 'cross' | 'tick' | 'plus' | 'hyphen' | 'line';
1475/** 自定义 Marker 的回调函数定义 */
1476export declare type MarkerCallback = (x: number, y: number, r: number) => PathCommand[];
1477/** chart.tooltip() 参数类型 */
1478export declare type TooltipOption = TooltipCfg | boolean;
1479export declare type FilterCondition = (value: any, datum: Datum, idx?: number) => boolean;
1480/** chart.axis() 参数类型 */
1481export declare type AxisOption = AxisCfg | boolean;
1482/** chart.legend() 参数类型 */
1483export declare type LegendOption = LegendCfg | boolean;
1484/** Options 中 legends 的配置定义 */
1485export declare type AllLegendsOptions = LegendCfg | Record<string, LegendOption> | boolean;
1486/** G2 支持的度量类型 */
1487export declare type ScaleType = 'linear' | 'cat' | 'category' | 'identity' | 'log' | 'pow' | 'time' | 'timeCat' | 'quantize' | 'quantile';
1488export declare type CoordinateRotate = ['rotate', number];
1489export declare type CoordinateReflect = ['reflect', 'x' | 'y'];
1490export declare type CoordinateScale = ['scale', number, number];
1491export declare type CoordinateTranspose = ['transpose'];
1492/** 坐标系支持的 action 配置 */
1493export declare type CoordinateActions = CoordinateRotate | CoordinateReflect | CoordinateScale | CoordinateTranspose;
1494export declare type FacetCtor = new (view: View, cfg: any) => Facet;
1495export interface Condition {
1496 readonly field: string;
1497 readonly value: any;
1498 readonly values: any[];
1499}
1500export declare type FacetDataFilter = (data: Datum[]) => boolean;
1501/**
1502 * 默认的基础配置
1503 */
1504export interface FacetCfg<D> {
1505 /** 布局类型。 */
1506 readonly type?: string;
1507 /** view 创建回调。 */
1508 readonly eachView: (innerView: View, facet?: D) => any;
1509 /** 分面 view 之间的间隔, 百分比或像素值 */
1510 readonly spacing?: [number | string, number | string];
1511 /** facet view padding。 */
1512 readonly padding?: ViewPadding;
1513 /** 是否显示标题。 */
1514 readonly showTitle?: boolean;
1515 /** facet 数据划分维度。 */
1516 readonly fields: string[];
1517}
1518/**
1519 * Facet title 配置项
1520 */
1521export interface FacetTitle {
1522 /** x 方向偏移。 */
1523 readonly offsetX?: number;
1524 /** y 方向偏移。 */
1525 readonly offsetY?: number;
1526 /** 文本样式。 */
1527 readonly style?: object;
1528 readonly formatter?: (val: any) => any;
1529}
1530/**
1531 * 分面数据
1532 */
1533export interface FacetData {
1534 /** 分面类型。 */
1535 readonly type: string;
1536 /** 当前分面子 view 的数据。 */
1537 readonly data: object[];
1538 /** 当前分面子 view 的范围。 */
1539 readonly region: Region;
1540 /** 当前分面子 view 的 padding。 */
1541 readonly padding?: number;
1542 /** 当前 facet 对应生成的 view。 */
1543 view?: View;
1544 /** 分面行字段。 */
1545 readonly rowField: string;
1546 /** 分面列字段。 */
1547 readonly columnField: string;
1548 /** 当前行分面的枚举值。 */
1549 readonly rowValue: string;
1550 /** 当前列分面的枚举值。 */
1551 readonly columnValue: string;
1552 /** 当前行索引。 */
1553 readonly rowIndex: number;
1554 /** 当前列索引。 */
1555 readonly columnIndex: number;
1556 /** 当前行字段的枚举值长度。 */
1557 readonly rowValuesLength: number;
1558 /** 当前列字段的枚举值长度。 */
1559 readonly columnValuesLength: number;
1560}
1561/** rect 分面类型配置 */
1562export interface RectCfg extends FacetCfg<RectData> {
1563 /** 行标题的样式。 */
1564 readonly columnTitle?: FacetTitle;
1565 /** 列标题的样式。 */
1566 readonly rowTitle?: FacetTitle;
1567}
1568export declare type RectData = FacetData;
1569/** mirror 分面类型配置 */
1570export interface MirrorCfg extends FacetCfg<MirrorData> {
1571 /** 是否转置。 */
1572 readonly transpose?: boolean;
1573 /** 标题样式。 */
1574 readonly title?: FacetTitle;
1575}
1576export declare type MirrorData = FacetData;
1577/** list 分面类型配置 */
1578export interface ListCfg extends FacetCfg<ListData> {
1579 /** 指定每行可显示分面的个数,超出时会自动换行。 */
1580 readonly cols?: number;
1581 /** 每个分面标题配置。 */
1582 readonly title?: FacetTitle;
1583}
1584export interface ListData extends FacetData {
1585 readonly total?: number;
1586}
1587/** matrix 分面类型配置 */
1588export interface MatrixCfg extends FacetCfg<MirrorData> {
1589 /** 列标题的样式 */
1590 readonly columnTitle?: FacetTitle;
1591 /** 列标题的样式 */
1592 readonly rowTitle?: FacetTitle;
1593}
1594export declare type MatrixData = FacetData;
1595/** circle 分面类型配置 */
1596export interface CircleCfg extends FacetCfg<CircleData> {
1597 /** 分面标题配置。 */
1598 readonly title?: FacetTitle;
1599}
1600export declare type CircleData = FacetData;
1601export interface Line {
1602 readonly style?: ShapeAttrs;
1603 readonly smooth?: boolean;
1604}
1605/** tree 分面类型配置 */
1606export interface TreeCfg extends FacetCfg<TreeData> {
1607 readonly line?: Line;
1608 readonly title?: FacetTitle;
1609}
1610export interface TreeData extends FacetData {
1611 children?: TreeData[];
1612 originColIndex?: number;
1613}
1614/**
1615 * facet object map
1616 */
1617export interface FacetCfgMap {
1618 /** rect 类型分面配置 */
1619 readonly rect: RectCfg;
1620 /** mirror 类型分面配置 */
1621 readonly mirror: MirrorCfg;
1622 /** list 类型分面配置 */
1623 readonly list: ListCfg;
1624 /** matrix 类型分面配置 */
1625 readonly matrix: MatrixCfg;
1626 /** circle 类型分面配置 */
1627 readonly circle: CircleCfg;
1628 /** tree 类型分面配置 */
1629 readonly tree: TreeCfg;
1630}
1631export interface StyleSheet {
1632 /** 背景色 */
1633 backgroundColor?: string;
1634 /** 主题色 */
1635 brandColor?: string;
1636 /** 辅助色 */
1637 subColor?: string;
1638 /** 分类色板 1,在数据量小于等于 10 时使用 */
1639 paletteQualitative10?: string[];
1640 /** 分类色板 2,在数据量大于 10 时使用 */
1641 paletteQualitative20?: string[];
1642 /** 语义色 */
1643 paletteSemanticRed?: string;
1644 /** 语义色 */
1645 paletteSemanticGreen?: string;
1646 /** 语义色 */
1647 paletteSemanticYellow?: string;
1648 /** (单色)顺序色板 */
1649 paletteSequence?: string[];
1650 /** 字体 */
1651 fontFamily?: string;
1652 /** 坐标轴线颜色 */
1653 axisLineBorderColor?: string;
1654 /** 坐标轴线粗细 */
1655 axisLineBorder?: number;
1656 /** 坐标轴线 lineDash 设置 */
1657 axisLineDash?: number[];
1658 /** 坐标轴标题颜色 */
1659 axisTitleTextFillColor?: string;
1660 /** 坐标轴标题文本字体大小 */
1661 axisTitleTextFontSize?: number;
1662 /** 坐标轴标题文本行高 */
1663 axisTitleTextLineHeight?: number;
1664 /** 坐标轴标题文本字体粗细 */
1665 axisTitleTextFontWeight?: number | string;
1666 /** 坐标轴标题距离坐标轴文本的间距 */
1667 axisTitleSpacing?: number;
1668 /** 坐标轴刻度线颜色 */
1669 axisTickLineBorderColor?: string;
1670 /** 坐标轴刻度线长度 */
1671 axisTickLineLength?: number;
1672 /** 坐标轴刻度线粗细 */
1673 axisTickLineBorder?: number;
1674 /** 坐标轴次刻度线颜色 */
1675 axisSubTickLineBorderColor?: string;
1676 /** 坐标轴次刻度线长度 */
1677 axisSubTickLineLength?: number;
1678 /** 坐标轴次刻度线粗细 */
1679 axisSubTickLineBorder?: number;
1680 /** 坐标轴刻度文本颜色 */
1681 axisLabelFillColor?: string;
1682 /** 坐标轴刻度文本字体大小 */
1683 axisLabelFontSize?: number;
1684 /** 坐标轴刻度文本行高 */
1685 axisLabelLineHeight?: number;
1686 /** 坐标轴刻度文本字体粗细 */
1687 axisLabelFontWeight?: number | string;
1688 /** 坐标轴刻度文本距离坐标轴线的间距 */
1689 axisLabelOffset: number;
1690 /** 坐标轴网格线颜色 */
1691 axisGridBorderColor?: string;
1692 /** 坐标轴网格线粗细 */
1693 axisGridBorder?: number;
1694 /** 坐标轴网格线虚线设置 */
1695 axisGridLineDash?: number[];
1696 /** 图例标题颜色 */
1697 legendTitleTextFillColor?: string;
1698 /** 图例标题文本字体大小 */
1699 legendTitleTextFontSize?: number;
1700 /** 图例标题文本行高 */
1701 legendTitleTextLineHeight?: number;
1702 /** 图例标题文本字体粗细 */
1703 legendTitleTextFontWeight?: number | string;
1704 /** 图例 marker 颜色 */
1705 legendMarkerColor?: string;
1706 /** 图例 marker 距离图例文本的间距 */
1707 legendMarkerSpacing?: number;
1708 /** 图例 marker 默认半径大小 */
1709 legendMarkerSize?: number;
1710 /** 图例 'circle' marker 半径 */
1711 legendCircleMarkerSize?: number;
1712 /** 图例 'square' marker 半径 */
1713 legendSquareMarkerSize?: number;
1714 /** 图例 'line' marker 半径 */
1715 legendLineMarkerSize?: number;
1716 /** 图例项文本颜色 */
1717 legendItemNameFillColor?: string;
1718 /** 图例项文本字体大小 */
1719 legendItemNameFontSize?: number;
1720 /** 图例项文本行高 */
1721 legendItemNameLineHeight?: number;
1722 /** 图例项粗细 */
1723 legendItemNameFontWeight?: number | string;
1724 /** 图例项之间的水平间距 */
1725 legendItemSpacing?: number;
1726 /** 图例项垂直方向的间隔 */
1727 legendItemMarginBottom?: number;
1728 /** 图例与图表绘图区域的偏移距离 */
1729 legendPadding?: number[];
1730 /** 水平布局的图例与绘图区域偏移距离 */
1731 legendHorizontalPadding?: number[];
1732 /** 垂直布局的图例与绘图区域偏移距离 */
1733 legendVerticalPadding?: number[];
1734 /** 图例分页器 marker 大小 */
1735 legendPageNavigatorMarkerSize: number;
1736 /** 图例分页器 marker 非激活状态填充色 */
1737 legendPageNavigatorMarkerInactiveFillColor: string;
1738 /** 图例分页器 marker 非激活状态填充色透明度 */
1739 legendPageNavigatorMarkerInactiveFillOpacity: number;
1740 /** 图例分页器 marker 填充色 */
1741 legendPageNavigatorMarkerFillColor: string;
1742 /** 图例分页器 marker 填充色透明度 */
1743 legendPageNavigatorMarkerFillOpacity: number;
1744 /** 图例分页器文本颜色 */
1745 legendPageNavigatorTextFillColor: string;
1746 /** 图例分页器文本字体大小 */
1747 legendPageNavigatorTextFontSize: number;
1748 /** 连续图例滑块填充色 */
1749 sliderRailFillColor?: string;
1750 /** 连续图例滑块边框粗细 */
1751 sliderRailBorder?: number;
1752 /** 连续图例滑块边框颜色 */
1753 sliderRailBorderColor?: string;
1754 /** 连续图例滑块宽度 */
1755 sliderRailWidth?: number;
1756 /** 连续图例滑块高度 */
1757 sliderRailHeight?: number;
1758 /** 连续图例文本颜色 */
1759 sliderLabelTextFillColor?: string;
1760 /** 连续图例文本字体大小 */
1761 sliderLabelTextFontSize?: number;
1762 /** 连续图例文本行高 */
1763 sliderLabelTextLineHeight?: number;
1764 /** 连续图例文本字体粗细 */
1765 sliderLabelTextFontWeight?: number | string;
1766 /** 连续图例滑块颜色 */
1767 sliderHandlerFillColor?: string;
1768 /** 连续图例滑块宽度 */
1769 sliderHandlerWidth?: number;
1770 /** 连续图例滑块高度 */
1771 sliderHandlerHeight?: number;
1772 /** 连续图例滑块边框粗细 */
1773 sliderHandlerBorder?: number;
1774 /** 连续图例滑块边框颜色 */
1775 sliderHandlerBorderColor?: string;
1776 /** arc 图形标注描边颜色 */
1777 annotationArcBorderColor?: string;
1778 /** arc 图形标注粗细 */
1779 annotationArcBorder?: number;
1780 /** line 图形标注颜色 */
1781 annotationLineBorderColor?: string;
1782 /** line 图形标注粗细 */
1783 annotationLineBorder?: number;
1784 /** lube 图形标注的虚线间隔 */
1785 annotationLineDash?: number[];
1786 /** text 图形标注文本颜色 */
1787 annotationTextFillColor?: string;
1788 /** text 图形标注文本字体大小 */
1789 annotationTextFontSize?: number;
1790 /** text 图形标注文本行高 */
1791 annotationTextLineHeight?: number;
1792 /** text 图形标注文本字体粗细 */
1793 annotationTextFontWeight?: number | string;
1794 /** text 图形标注文本边框颜色 */
1795 annotationTextBorderColor?: string;
1796 /** text 图形标注文本边框粗细 */
1797 annotationTextBorder?: number;
1798 /** region 图形标注填充颜色 */
1799 annotationRegionFillColor?: string;
1800 /** region 图形标注填充颜色透明色 */
1801 annotationRegionFillOpacity?: number;
1802 /** region 图形标注描边粗细 */
1803 annotationRegionBorder?: number;
1804 /** region 图形标注描边颜色 */
1805 annotationRegionBorderColor?: string;
1806 /** dataMarker 图形标注的连接线长度 */
1807 annotationDataMarkerLineLength?: number;
1808 /** tooltip crosshairs 辅助线颜色 */
1809 tooltipCrosshairsBorderColor?: string;
1810 /** tooltip crosshairs 辅助线粗细 */
1811 tooltipCrosshairsBorder?: number;
1812 /** tooltip crosshairs 辅助线虚线间隔 */
1813 tooltipCrosshairsLineDash?: number[];
1814 /** tooltip 内容框背景色 */
1815 tooltipContainerFillColor?: string;
1816 /** tooltip 内容框背景透明度 */
1817 tooltipContainerFillOpacity?: number;
1818 /** tooltip 内容框阴影 */
1819 tooltipContainerShadow?: string;
1820 /** tooltip 内容框圆角 */
1821 tooltipContainerBorderRadius?: number;
1822 /** tooltip 文本颜色 */
1823 tooltipTextFillColor?: string;
1824 /** tooltip 文本字体大小 */
1825 tooltipTextFontSize?: number;
1826 /** tooltip 文本行高 */
1827 tooltipTextLineHeight?: number;
1828 /** tooltip 文本字体粗细 */
1829 tooltipTextFontWeight?: number | string;
1830 /** Geometry label 文本颜色 */
1831 labelFillColor?: string;
1832 /** Geometry label 暗色文本颜色 */
1833 labelFillColorDark?: string;
1834 /** Geometry label 亮色文本颜色 */
1835 labelFillColorLight?: string;
1836 /** Geometry label 文本字体大小 */
1837 labelFontSize?: number;
1838 /** Geometry label 文本行高 */
1839 labelLineHeight?: number;
1840 /** Geometry label 文本字体粗细 */
1841 labelFontWeight?: number | string;
1842 /** Geometry label 文本描边颜色 */
1843 labelBorderColor?: string;
1844 /** Geometry label 文本描边粗细 */
1845 labelBorder?: number;
1846 /** Geometry innerLabel 文本颜色 */
1847 innerLabelFillColor?: string;
1848 /** Geometry innerLabel 文本字体大小 */
1849 innerLabelFontSize?: number;
1850 /** Geometry innerLabel 文本行高 */
1851 innerLabelLineHeight?: number;
1852 /** Geometry innerLabel 文本字体粗细 */
1853 innerLabelFontWeight?: number | string;
1854 /** Geometry innerLabel 文本描边颜色 */
1855 innerLabelBorderColor?: string;
1856 /** Geometry innerLabel 文本描边粗细 */
1857 innerLabelBorder?: number;
1858 /** Geometry overflowLabel 文本颜色 */
1859 overflowLabelFillColor?: string;
1860 /** Geometry overflowLabel 暗色文本颜色 */
1861 overflowLabelFillColorDark?: string;
1862 /** Geometry overflowLabel 亮色文本颜色 */
1863 overflowLabelFillColorLight?: string;
1864 /** Geometry overflowLabel 文本字体大小 */
1865 overflowLabelFontSize?: number;
1866 /** Geometry overflowLabel 文本行高 */
1867 overflowLabelLineHeight?: number;
1868 /** Geometry overflowLabel 文本字体粗细 */
1869 overflowLabelFontWeight?: number | string;
1870 /** Geometry overflowLabel 文本描边颜色 */
1871 overflowLabelBorderColor?: string;
1872 /** Geometry overflowLabel 文本描边粗细 */
1873 overflowLabelBorder?: number;
1874 /** Geometry label 文本连接线粗细 */
1875 labelLineBorder?: number;
1876 /** Geometry label 文本连接线颜色 */
1877 labelLineBorderColor?: string;
1878 /** slider 滑道高度 */
1879 cSliderRailHieght?: number;
1880 /** slider 滑道背景色 */
1881 cSliderBackgroundFillColor?: string;
1882 /** slider 滑道背景色透明度 */
1883 cSliderBackgroundFillOpacity?: number;
1884 /** slider 滑道前景色 */
1885 cSliderForegroundFillColor?: string;
1886 /** slider 滑道前景色透明度 */
1887 cSliderForegroundFillOpacity?: number;
1888 /** slider 手柄高度 */
1889 cSliderHandlerHeight?: number;
1890 /** Slider 手柄宽度 */
1891 cSliderHandlerWidth?: number;
1892 /** Slider 手柄背景色 */
1893 cSliderHandlerFillColor?: string;
1894 /** Slider 手柄背景色透明度 */
1895 cSliderHandlerFillOpacity?: number;
1896 /** Slider 手柄高亮背景色 */
1897 cSliderHandlerHighlightFillColor?: string;
1898 /** Slider 手柄边框色 */
1899 cSliderHandlerBorderColor?: string;
1900 /** Slider 手柄边框粗细 */
1901 cSliderHandlerBorder?: number;
1902 /** Slider 手柄边框圆角 */
1903 cSliderHandlerBorderRadius?: number;
1904 /** Slider 字体标签颜色 */
1905 cSliderTextFillColor?: string;
1906 /** Slider 字体标签透明度 */
1907 cSliderTextFillOpacity?: number;
1908 /** Slider 字体标签大小 */
1909 cSliderTextFontSize?: number;
1910 /** Slider 字体标签行高 */
1911 cSliderTextLineHeight?: number;
1912 /** Slider 字体标签字重 */
1913 cSliderTextFontWeight?: number | string;
1914 /** Slider 字体标签描边色 */
1915 cSliderTextBorderColor?: string;
1916 /** Slider 字体标签描边粗细 */
1917 cSliderTextBorder?: number;
1918 /** 滚动条 滚道填充色 */
1919 scrollbarTrackFillColor?: string;
1920 /** 滚动条 滑块填充色 */
1921 scrollbarThumbFillColor?: string;
1922 /** 滚动条 滑块高亮填充色 */
1923 scrollbarThumbHighlightFillColor?: string;
1924 /** 点图的大小范围 */
1925 pointSizeRange?: [number, number];
1926 /** 点图填充颜色 */
1927 pointFillColor?: string;
1928 /** 点图填充颜色透明度 */
1929 pointFillOpacity?: number;
1930 /** 点图大小 */
1931 pointSize?: number;
1932 /** 点图描边粗细 */
1933 pointBorder?: number;
1934 /** 点图描边颜色 */
1935 pointBorderColor?: string;
1936 /** 点图描边透明度 */
1937 pointBorderOpacity?: number;
1938 /** 点图 active 状态下填充颜色 */
1939 pointActiveFillColor?: string;
1940 /** 点图 active 状态下填充颜色透明度 */
1941 pointActiveFillOpacity?: number;
1942 /** 点图 active 状态下大小 */
1943 pointActiveSize?: number;
1944 /** 点图 active 状态下描边粗细 */
1945 pointActiveBorder?: number;
1946 /** 点图 active 状态下描边颜色 */
1947 pointActiveBorderColor?: string;
1948 /** 点图 active 状态下描边透明度 */
1949 pointActiveBorderOpacity?: number;
1950 /** 点图 selected 状态下填充颜色 */
1951 pointSelectedFillColor?: string;
1952 /** 点图 selected 状态下填充颜色透明度 */
1953 pointSelectedFillOpacity?: number;
1954 /** 点图 selected 状态下大小 */
1955 pointSelectedSize?: number;
1956 /** 点图 selected 状态下描边粗细 */
1957 pointSelectedBorder?: number;
1958 /** 点图 selected 状态下描边颜色 */
1959 pointSelectedBorderColor?: string;
1960 /** 点图 selected 状态下描边透明度 */
1961 pointSelectedBorderOpacity?: number;
1962 /** 点图 inactive 状态下填充颜色 */
1963 pointInactiveFillColor?: string;
1964 /** 点图 inactive 状态下填充颜色透明度 */
1965 pointInactiveFillOpacity?: number;
1966 /** 点图 inactive 状态下大小 */
1967 pointInactiveSize?: number;
1968 /** 点图 inactive 状态下描边粗细 */
1969 pointInactiveBorder?: number;
1970 /** 点图 inactive 状态下描边颜色 */
1971 pointInactiveBorderColor?: string;
1972 /** 点图 inactive 状态下描边透明度 */
1973 pointInactiveBorderOpacity?: number;
1974 /** 描边点图大小 */
1975 hollowPointSize?: number;
1976 /** 描边点图描边粗细 */
1977 hollowPointBorder?: number;
1978 /** 描边点图描边颜色 */
1979 hollowPointBorderColor?: string;
1980 /** 描边点图描边透明度 */
1981 hollowPointBorderOpacity?: number;
1982 /** 描边点图填充颜色 */
1983 hollowPointFillColor?: string;
1984 /** 描边点图填充透明度 */
1985 hollowPointFillOpacity?: number;
1986 /** 点 描边 active 状态下大小 */
1987 hollowPointActiveSize?: number;
1988 /** 点 描边 active 状态下描边粗细 */
1989 hollowPointActiveBorder?: number;
1990 /** 点 描边 active 状态下描边颜色 */
1991 hollowPointActiveBorderColor?: string;
1992 /** 点 描边 active 状态下描边透明度 */
1993 hollowPointActiveBorderOpacity?: number;
1994 /** 点 描边 selected 状态下大小 */
1995 hollowPointSelectedSize?: number;
1996 /** 点 描边 selected 状态下描边粗细 */
1997 hollowPointSelectedBorder?: number;
1998 /** 点 描边 selected 状态下描边颜色 */
1999 hollowPointSelectedBorderColor?: string;
2000 /** 点 描边 selected 状态下描边透明度 */
2001 hollowPointSelectedBorderOpacity?: number;
2002 /** 点 描边 inactive 状态下大小 */
2003 hollowPointInactiveSize?: number;
2004 /** 点 描边 inactive 状态下描边粗细 */
2005 hollowPointInactiveBorder?: number;
2006 /** 点 描边 inactive 状态下描边颜色 */
2007 hollowPointInactiveBorderColor?: string;
2008 /** 点 描边 inactive 状态下描边透明度 */
2009 hollowPointInactiveBorderOpacity?: number;
2010 /** 线图粗细 */
2011 lineBorder?: number;
2012 /** 线图颜色 */
2013 lineBorderColor?: string;
2014 /** 线图透明度 */
2015 lineBorderOpacity?: number;
2016 /** 线图 active 状态下粗细 */
2017 lineActiveBorder?: number;
2018 /** 线图 active 状态下颜色 */
2019 lineActiveBorderColor?: string;
2020 /** 线图 active 状态下透明度 */
2021 lineActiveBorderOpacity?: number;
2022 /** 线图 selected 状态下粗细 */
2023 lineSelectedBorder?: number;
2024 /** 线图 selected 状态下颜色 */
2025 lineSelectedBorderColor?: string;
2026 /** 线图 selected 状态下透明度 */
2027 lineSelectedBorderOpacity?: number;
2028 /** 线图 inactive 状态下粗细 */
2029 lineInactiveBorder?: number;
2030 /** 线图 inactive 状态下颜色 */
2031 lineInactiveBorderColor?: string;
2032 /** 线图 inactive 状态下透明度 */
2033 lineInactiveBorderOpacity?: number;
2034 areaBorder?: number;
2035 /** area 边框颜色 */
2036 areaBorderColor?: string;
2037 /** area 边框透明度 */
2038 areaBorderOpacity?: number;
2039 /** area 填充颜色 */
2040 areaFillColor?: string;
2041 /** area 填充透明度 */
2042 areaFillOpacity?: number;
2043 /** area Active 状态下边框粗细 */
2044 areaActiveBorder?: number;
2045 /** area Active 状态下边框颜色 */
2046 areaActiveBorderColor?: string;
2047 /** area Active 状态下边框透明度 */
2048 areaActiveBorderOpacity?: number;
2049 /** area Active 状态下填充颜色 */
2050 areaActiveFillColor?: string;
2051 /** area Active 状态下填充透明度 */
2052 areaActiveFillOpacity?: number;
2053 /** area selected 状态下边框粗细 */
2054 areaSelectedBorder?: number;
2055 /** area selected 状态下边框颜色 */
2056 areaSelectedBorderColor?: string;
2057 /** area selected 状态下边框透明度 */
2058 areaSelectedBorderOpacity?: number;
2059 /** area selected 状态下填充颜色 */
2060 areaSelectedFillColor?: string;
2061 /** area selected 状态下填充透明度 */
2062 areaSelectedFillOpacity?: number;
2063 /** area inactive 状态下边框粗细 */
2064 areaInactiveBorder?: number;
2065 /** area inactive 状态下边框颜色 */
2066 areaInactiveBorderColor?: string;
2067 /** area inactive 状态下边框透明度 */
2068 areaInactiveBorderOpacity?: number;
2069 /** area inactive 状态下填充颜色 */
2070 areaInactiveFillColor?: string;
2071 /** area inactive 状态下填充透明度 */
2072 areaInactiveFillOpacity?: number;
2073 /** hollowArea 边框粗细 */
2074 hollowAreaBorder?: number;
2075 /** hollowArea 边框颜色 */
2076 hollowAreaBorderColor?: string;
2077 /** hollowArea 边框透明度 */
2078 hollowAreaBorderOpacity?: number;
2079 /** hollowArea Active 状态下边框粗细 */
2080 hollowAreaActiveBorder?: number;
2081 /** hollowArea Active 状态下边框颜色 */
2082 hollowAreaActiveBorderColor?: string;
2083 /** hollowArea Active 状态下边框透明度 */
2084 hollowAreaActiveBorderOpacity?: number;
2085 /** hollowArea selected 状态下边框粗细 */
2086 hollowAreaSelectedBorder?: number;
2087 /** hollowArea selected 状态下边框颜色 */
2088 hollowAreaSelectedBorderColor?: string;
2089 /** hollowArea selected 状态下边框透明度 */
2090 hollowAreaSelectedBorderOpacity?: number;
2091 /** hollowArea inactive 状态下边框粗细 */
2092 hollowAreaInactiveBorder?: number;
2093 /** hollowArea inactive 状态下边框颜色 */
2094 hollowAreaInactiveBorderColor?: string;
2095 /** hollowArea inactive 状态下边框透明度 */
2096 hollowAreaInactiveBorderOpacity?: number;
2097 /** interval 边框粗细 */
2098 intervalBorder?: number;
2099 /** interval 边框颜色 */
2100 intervalBorderColor?: string;
2101 /** interval 边框透明度 */
2102 intervalBorderOpacity?: number;
2103 /** interval 填充颜色 */
2104 intervalFillColor?: string;
2105 /** interval 填充透明度 */
2106 intervalFillOpacity?: number;
2107 /** interval active 状态下边框粗细 */
2108 intervalActiveBorder?: number;
2109 /** interval active 状态下边框颜色 */
2110 intervalActiveBorderColor?: string;
2111 /** interval active 状态下边框透明度 */
2112 intervalActiveBorderOpacity?: number;
2113 /** interval active 状态下填充颜色 */
2114 intervalActiveFillColor?: string;
2115 /** interval active 状态下填充透明度 */
2116 intervalActiveFillOpacity?: number;
2117 /** interval selected 状态下边框粗细 */
2118 intervalSelectedBorder?: number;
2119 /** interval selected 状态下边框颜色 */
2120 intervalSelectedBorderColor?: string;
2121 /** interval selected 状态下边框透明度 */
2122 intervalSelectedBorderOpacity?: number;
2123 /** interval selected 状态下填充颜色 */
2124 intervalSelectedFillColor?: string;
2125 /** interval selected 状态下填充透明度 */
2126 intervalSelectedFillOpacity?: number;
2127 /** interval inactive 状态下边框粗细 */
2128 intervalInactiveBorder?: number;
2129 /** interval inactive 状态下边框颜色 */
2130 intervalInactiveBorderColor?: string;
2131 /** interval inactive 状态下边框透明度 */
2132 intervalInactiveBorderOpacity?: number;
2133 /** interval inactive 状态下填充颜色 */
2134 intervalInactiveFillColor?: string;
2135 /** interval inactive 状态下填充透明度 */
2136 intervalInactiveFillOpacity?: number;
2137 /** hollowInterval 边框粗细 */
2138 hollowIntervalBorder?: number;
2139 /** hollowInterval 边框颜色 */
2140 hollowIntervalBorderColor?: string;
2141 /** hollowInterval 边框透明度 */
2142 hollowIntervalBorderOpacity?: number;
2143 /** hollowInterval 填充颜色 */
2144 hollowIntervalFillColor?: string;
2145 /** hollowInterval 填充透明度 */
2146 hollowIntervalFillOpacity?: number;
2147 /** hollowInterval active 状态下边框粗细 */
2148 hollowIntervalActiveBorder?: number;
2149 /** hollowInterval active 状态下边框颜色 */
2150 hollowIntervalActiveBorderColor?: string;
2151 /** hollowInterval active 状态下边框透明度 */
2152 hollowIntervalActiveBorderOpacity?: number;
2153 /** hollowInterval selected 状态下边框粗细 */
2154 hollowIntervalSelectedBorder?: number;
2155 /** hollowInterval selected 状态下边框颜色 */
2156 hollowIntervalSelectedBorderColor?: string;
2157 /** hollowInterval selected 状态下边框透明度 */
2158 hollowIntervalSelectedBorderOpacity?: number;
2159 /** hollowInterval inactive 状态下边框粗细 */
2160 hollowIntervalInactiveBorder?: number;
2161 /** hollowInterval inactive 状态下边框颜色 */
2162 hollowIntervalInactiveBorderColor?: string;
2163 /** hollowInterval inactive 状态下边框透明度 */
2164 hollowIntervalInactiveBorderOpacity?: number;
2165}
2166/** createTheme 主题样式表配置 */
2167export declare type StyleSheetCfg = Pick<StyleSheet, 'backgroundColor' | 'subColor' | 'brandColor' | 'paletteQualitative10' | 'paletteQualitative20' | 'paletteSemanticRed' | 'paletteSemanticGreen' | 'paletteSemanticYellow' | 'paletteSequence' | 'fontFamily'>;
2168/** 交互反馈的定义 */
2169export interface IAction {
2170 /**
2171 * 初始化
2172 */
2173 init(): any;
2174 /**
2175 * 交互 action (反馈)的名称
2176 */
2177 name: string;
2178 /**
2179 * 上下文
2180 */
2181 context: IInteractionContext;
2182 /**
2183 * 销毁函数
2184 */
2185 destroy(): any;
2186}
2187/** 交互上下文的接口定义 */
2188export interface IInteractionContext extends LooseObject {
2189 /** 事件对象 */
2190 event: LooseObject;
2191 /**
2192 * 当前的 view
2193 */
2194 view: View;
2195 /** 交互相关的 Actions */
2196 actions: IAction[];
2197 /**
2198 * 缓存属性,用于上下文传递信息
2199 * @param key 键名
2200 * @param value 值
2201 */
2202 cache(key: string, value?: any): any;
2203 /**
2204 * 获取 action
2205 * @param name - action 的名称
2206 * @returns 指定 name 的 Action
2207 */
2208 getAction(name: any): IAction;
2209 /**
2210 * 获取当前的点
2211 * @returns 返回当前的点
2212 */
2213 getCurrentPoint(): Point;
2214 /**
2215 * 获取当前的图形
2216 */
2217 getCurrentShape(): IShape;
2218 /**
2219 * 添加 action
2220 * @param action 指定交互 action
2221 */
2222 addAction(action: IAction): any;
2223 /**
2224 * 移除 action
2225 * @param action 移除的 action
2226 */
2227 removeAction(action: IAction): any;
2228 /**
2229 * 事件触发时是否在 view 内部
2230 */
2231 isInPlot(): any;
2232 /**
2233 * 是否在组件的包围盒内
2234 * @param name 组件名,可省略
2235 */
2236 isInComponent(name?: string): any;
2237 /**
2238 * 是否在指定的图形内
2239 * @param name shape 的名称
2240 */
2241 isInShape(name: any): any;
2242 /**
2243 * 销毁
2244 */
2245 destroy(): any;
2246}
2247/** G 的渲染类型 */
2248export declare type Renderer = 'svg' | 'canvas';
2249/** 数据的定义 */
2250export declare type Datum = Record<string, any>;
2251export declare type Data = Datum[];
2252export declare type ActionCallback = (context: IInteractionContext) => void;
2253export declare type Padding = [number, number, number, number];
2254export declare type ViewPadding = number | number[] | 'auto';
2255export declare type ViewAppendPadding = number | number[];
2256export declare type Position = [number, number];
2257export declare type AttributeType = 'position' | 'size' | 'color' | 'shape';
2258export declare type ShapeVertices = RangePoint[] | Point[] | Point[][];
2259/** easing 的回调函数, 入参 data 为对应的原始数据记录 */
2260export declare type AnimateEasingCallback = (data: Datum) => string;
2261/** delay 的回调函数, 入参 data 为对应的原始数据记录 */
2262export declare type AnimateDelayCallback = (data: Datum) => number;
2263/** duration 的回调函数, 入参 data 为对应的原始数据记录 */
2264export declare type AnimateDurationCallback = (data: Datum) => number;
2265
\No newline at end of file