UNPKG

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