首页  流程图  详情

可视化实现设计

2021-12-22 10:40:12   5  举报





可视化实现设计

前端

作者其他创作

大纲/内容

Plugin

+ type: string; // 图表类型+ icon: string; // 图标+ text: string; // 名称+ component: InfChart; // anyg图表组件# actions: ISchemaFormActions ; // 样式配置表单方法

StyleConfig

redux: { graphType: 'Column'; //图表类型 styleConfig: {}; // 样式配置}

+ changeStyleConfig: (formData) => void // 改变样式配置

ColumnPlugin

+ type: string; // 图表类型+ icon: string; // 图标+ text: string; // 名称+ component: InfChart; // anyg图表组件+ dataOptions:{ x:{ span style=\"font-size: inherit;\

ConfigItem

+ deleteDataConfig: (id) => void // 删除数据配置+ onConfirm:(key)=>{} // 点击确定

PopcomfirmContent

props:{ isSaveData:{[key:number]:number} // 是否保存 aggTypes：[] // 聚合类型 defaultValue：{} // 默认值}

+ onSaveData: () => void //保存数据+ onConfirm:(key)=>{} // 点击确定

DataConfig

redux: { graphType: 'Column'; //图表类型 dataConfig: {}; // 数据配置 isLoading:false // 加载中}

+ getConfigOptions: (graphType) => object// 获取图标默认配置+ fetchSearchData: () => Promise<void>; // 请求图表数据+ validatorDataConfig:(value)=>Promise<string> // 校验数据配置

DateHistogram

props:{ fieldIsnfo:{[key:string]:string[]}}

Terms

Field

props:{ fieldIsnfo:{[key:string]:string[]} aggType:'' // 当前聚合类型}

+validatorField:(value)=>Promise<string>

Interval

state:{ info:'' // 提示信息}

+changeInterval:(value)=>{} // 自动计算时间间隔

Graph

props: { graphType: 'Column'; //图表类型 styleConfig: {}; // 样式配置 dataConfig: {}; //数据配置 data: []; //请求的原始数据 isLoading:false; // 加载中}

+ transformDataToVis: (data) => any[]；转换数据格式为图表所需格式