Quick BI 自定义组件开发 -- 第三篇 echart 组件开发图表，使用动态数据

一、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;
}