一、props参数类型

LifecycleProps描述的是传入自定义组件各个生命周期的props参数类型。包含了container和customProps两个属性，其接口为：

interface LifecycleProps {
  container?: HTMLElement;
  customProps?: ComponentProps;
}

示例：

class MyComponent {
    mount(props: LifecycleProps) {...}// props 是 LifecycleProps 类型
  update(props: LifecycleProps) {...}
  unmount(props: LifecycleProps) {...}
}

const MyReactComponent: React.FC<LifecycleProps> = (props) => <div>...<div/> // props 是 LifecycleProps 类型

1.1 container

props.container 是 Quick BI 仪表盘上的一个 div DOM 元素，作为自定义组件的容器。如果开启了 Shadow DOM, 则 props.container 的父元素会变成 ShadowRoot 元素。

1.2 customProps

props.customProps 是自定义组件运行时的一些信息。其接口为：

interface ComponentProps {
 viewConfig: ComponentPropsViewConfig;
 dataConfig: AreaModel[];
 advancedConfig: object;
 globalConfig?: ComponentPropsGlobalConfig;
 data: DataCell[][];
 dispatch?: ComponentPropsDispatch;
 cubeConfig?: ComponentPropsCubeConfig[];
 sql?: string[];
}

二、customProps 的具体属性

2.1 customProps.data

自定义图表的数据，其数据结构是一个二维数组。

interface DataCell {
  fieldId: string;
  originValue: string;
  value: string;
  geoInfo?: object;
}

field:数据字段ID,与customProps.dataConfig 中的ID 一 一对应
originValue: 数据的原始值
value: 数据的展示值
geoinfo: 维度字段的地理信息

获取数据

2.2 customProps.dataConfig 字段配置

自定义图表数据面板的数据字段配置，其接口为：

interface AreaModel {
  areaType: 'row' | 'column' | 'drill' | 'filter';
  fields: FieldModel[];
}

areaType: 字段类型，可能有以下几种取值
- row: 维度类型字段
- column: 度量类型字段
- drill: 钻取
- filter

fields : 字段数组，同一种字段类型下可能有多个字段。其接口为:

interface FieldModel {
  /** 唯一Id */
  fieldId: string;
  /** 字段名 */
  fieldName: string;
  /** 最终展示别名 */
  showName: string;
  /** 是否计算字段 */
  isCalc?: boolean;
  /** 如：calc */
  skin?: string;
  /** 值的类型 */
  valueType?: FieldValueType;
  /** 字段类型: 维度或度量 */
  fieldType: FieldCommonType;
  /** 聚合方式 */
  aggregation?: FieldAggregation | string;
  /** [QBI特有] 数据渲染形式，目前有imageUrl用于交叉表、排行榜图片渲染 */
  displayType?: 'imageUrl' | '';
  /** [QBI特有] 数据集格式化配置，如#,##0.00% */
  rawFormat?: string;
  /** [QBI特有] 数据集维度类型, TimeRegionInBackend, 需迁移，防止循环依赖 */
  dimGranularity?: any;
  /** 最终格式化配置（注：qbi目前是放在styleConfig中，该字段并未被使用） */
  /** ！！首先得产品层面统一 */
  format?: QbiFormatModel | FbiFormatModel;
  /** 排序 */
  order?: FieldOrder;
  /** 高级计算：同环比等 */
  advancedCalculation?: 'year-to-year' | 'month-to-year';
  /** 当前图表的过滤条件集合 */
  complexFilter: {
    limitNum: number;
    filter: any;
  };
  // 真·字段唯一标识
  uuid: string;
  /** 不同图表字段特殊扩展信息 */
  extends?: FieldModelExtends;
}