UNPKG

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