可视化实现设计
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[]；转换数据格式为图表所需格式
Panel
redux: { graphType: Column'; //图表类型 data: []; // 请求的原始数据 styleConfig: {}; // 样式配置 dataConfig: {}; //数据配置 isLoading:false // 加载中}
+ setGraphType: (type) => void; // 设置图表类型
Metric
0 条评论
回复 删除
下一页
