@alicloud/cloud-charts
Version:
108 lines (107 loc) • 4.67 kB
TypeScript
/// <reference types="react" />
import { Chart, ChartData, Types, G2Dependents } from './types';
import { customFormatterConfig } from './common';
import { YAxisConfig } from './rectYAxis';
declare type Position = 'top' | 'top-left' | 'top-right' | 'right' | 'right-top' | 'right-bottom' | 'left' | 'left-top' | 'left-bottom' | 'bottom' | 'bottom-left' | 'bottom-right';
export interface LegendConfig extends customFormatterConfig {
visible?: boolean;
/** 是否支持分页 */
autoCollapse?: boolean;
/** 分页尺寸 */
collapseRow?: number;
position?: Position;
align?: string;
padding?: [number, number, number, number];
nameFormatter?(text: string, item: G2Dependents.ListItem, index: number): string;
valueFormatter?(value: string | number, item: G2Dependents.ListItem, index: number): string;
showData?: boolean;
marker?: Types.MarkerCfg;
allowAllCanceled?: boolean;
hoverable?: boolean;
/** @deprecated config.legend.onHover 已废弃，请使用 chart.on('legend-item:mouseenter', onHover) */
onHover?: Types.EventCallback;
clickable?: boolean;
/** @deprecated config.legend.onClick 已废弃，请使用 chart.on('legend-item:click', onClick) */
onClick?: Types.EventCallback;
/** @deprecated config.legend.defaultClickBehavior 已废弃，请使用 chart.on('legend-item:click', onClick) 绑定自定义点击事件 */
defaultClickBehavior?: boolean;
customConfig?: Types.LegendCfg;
/**
* @title 最大宽度
* @description **分类图例适用**，图例项最大宽度设置。
*/
maxWidth?: number;
/**
* @title 最大高度
* @description **分类图例适用**，图例项最大高度设置。
*/
maxHeight?: number;
/**
* @title 最大宽度比例
* @description **分类图例适用**，图例项最大宽度比例（以 view 的 bbox 宽度为参照，默认 0.45）。
*/
maxWidthRatio?: number;
/**
* @title 最大高度比例
* @description **分类图例适用**，图例项最大高度比例（以 view 的 bbox 高度为参照，默认 0.45）。
*/
maxHeightRatio?: number;
/**
* @title 是否采用反选模式
* @description 默认true，false时采用单选模式
*/
useReverseChecked?: boolean;
/**
* 默认false,true表示采用表格型legend并显示所有统计值
* 目前仅支持线图
*/
table?: boolean | {
/** 显示哪些指标 */
statistics?: Array<'min' | 'max' | 'avg' | 'current'>;
/** 自定义表格列，会拼在内置的统计值后面，decimal不生效 */
custom?: Array<{
/** 列名 */
title: string;
/** 数值，可以直接展示数字或字符串，也可以函数回调 */
value: number | string | ((legendItem: any) => number | string);
}>;
style?: React.CSSProperties;
hideTitle?: boolean;
};
/** legend数量多时是否折叠，默认false，优先级高于分页 */
foldable?: boolean;
dodge?: boolean;
/**
* 是否使用阶梯型图例，目前主要用于热力图
* 会根据传的colors数组自动计算每个数据区段对应的颜色
* true表示全用默认值
*/
gradient?: boolean | {
/** 数据范围，默认[0,100] */
valueRange?: [number, number];
/** 类型与对应的颜色，默认[{green,绿}，{yellow,黄}，{orange,橙}，{red,红}] */
colors: Array<{
type: string;
color: string;
}>;
};
}
/**
* rectLegend 直角坐标系legend配置。
*
* @param {this} ctx 组件实例 this 指针
* @param {Chart} chart 图表实例
* @param {Object} config 配置项
* @param {Object} defaultConfig 组件的自定义配置
* @param {string} dataType 数据的枚举类型，如单组(single)、多组(multiple)、树结构(tree)、图结构(graph)
* @param {string} field 数据映射字段
* @param {boolean} isPolar 是否极坐标系
* @param {function} itemFormatter 组件自定义的 item 格式函数
* */
export default function <T>(ctx: T, chart: Chart, config: {
legend?: LegendConfig | boolean;
showStackSum?: boolean;
yAxis?: YAxisConfig | YAxisConfig[] | boolean;
}, defaultConfig: Types.LegendCfg, dataType: string, field?: string, isPolar?: boolean, itemFormatter?: (item: G2Dependents.ListItem, i: number) => G2Dependents.ListItem): void;
export declare function getItemData(name: string, rawData: ChartData, dataType: string, currentData?: ChartData): undefined | Types.LooseObject | (number | string)[];
export {};