基础元素&＃xff08;图元&＃xff09;
范围
在第一篇中我们通过思维导图也简单介绍了图元的范围。
- 基础图形 - 点线面
- 基础图表 - echarts[折线图&＃xff0c;饼图&＃xff0c;柱状图&＃xff0c;地图&＃xff0c;散点图...]
- 媒体 - 视频&＃xff0c;直播视频
- 表格
- 3d图形
- 行业组件
- ...
配置项
样式配置项
可以通过样式配置项&＃xff0c;配置图元的基础样式属性&＃xff0c;如下&＃xff1a;
数据配置项 可以通过数据配置项&＃xff0c;配置图元的数据&＃xff0c;这里有个数据源的概念。 数据源指的就是获取数据的方式&＃xff0c;可以通过以下的方式&＃xff1a;
- 静态的编辑器书写&＃xff0c;
- 可以通过api&＃xff0c;
- 可以通过sql&＃xff0c;
- ...
图元属性
- 位置 - top,left
- 大小 - width,height
- 角度 - angle
- 名称 - partName
- id - partId
- 图层 - layer
- 身份标示 - partType
基本就是以上的信息我们重新梳理一下(x指left,y指top)&＃xff1a;
class Part {/*** 图形元素的名称*/public partName: string &＃61; &＃39;&＃39;;
/*** 图形元素的id*/public partId: string &＃61; &＃39;&＃39;;
/*** 图形的类型&＃xff0c;比如part&＃xff0c;component&＃xff0c; template*/public partType: string &＃61; &＃39;&＃39;;
/*** 第一级表示标识*/public sourceType: string &＃61; &＃39;&＃39;;
/*** 第二级表示标识*/public type: string &＃61; &＃39;&＃39;;
/*** 第三级表示标识*/public childType: string &＃61; &＃39;&＃39;;
/*** 图形元素的图层*/public layer: number &＃61; 0;/*** 基本的样式*/public partStyle: PartStyle;
}
class PartStyle {/*** 图形元素的x坐标*/public x: number;
/*** 图形元素的y坐标*/public y: number;
/*** 图形元素的宽度*/public width: number;
/*** 图形元素的高度*/public height: number;
/*** 图形元素的角度*/public angle: number;
/*** 图形元素的背景颜色*/public backgroundColor: string;
/*** 图形元素的透明度* 1~100*/public opacity: number;
}
图元函数&＃xff08;方法&＃xff09;
生命周期
图元是一个完整的实例类&＃xff0c;所以它是一个有生命的个体&＃xff0c;所以我们需要为它定制生命周期&＃xff0c;以抽象的形式展示
初始化实例对象
发生在创建实例的时候&＃xff0c;比如从菜单拖拽出一个图元
销毁实例对象
export abstract class LifeCircle {/*** 初始化类对象*/abstract init(domId: string, opts?: any): void;
/*** 销毁类对象*/abstract destroyed(): void;
}
通用的方法钩子
这里面我是用ts写的&＃xff0c;大概可以总结为以下几个方法
- 数据存储和读取
保存图元数据&＃xff0c;获取图元数据数据&＃xff0c;发生在保存和初始化的情况
- 获取类对象纯属性 - getPartAllProps
- 设置类对象纯属性 - setPartAllProps
2. 样式配置
设置样式配置项 公共的样式配置项指的是大小&＃xff0c;坐标&＃xff0c;图层等 私有的样式配置项指的是echarts的系列&＃xff0c;xy轴等
- 获取类对象公共样式 - setPublicStyle
- 设置类对象私有样式 - setShapeStyle(setPrivateStyle)
3. 数据配置
设置数据配置项 调用设置静态数据&＃xff0c;这里补充一点不管是什么数据源&＃xff0c;最终拿到的都是静态数据&＃xff0c;所以只有一个设置静态数据的方法
- 获取类对象静态数据 - setStaticData
4. 事件配置
设置事件配置项 公共的事件配置项指的是图元间的传参等 私有的事件配置项指的是图元内部的事件等
- 获取类对象公共事件 - setPublicPartEvent
- 设置类对象私有事件 - setPrivatePartEvent
5. 动画配置
设置动画配置项 内置动画配置项指的是图元内部的动画&＃xff0c;比如echarts的tooltip显示等 外部动画配置项指的是图元外部渐变显示和隐藏等
- 获取类对象外部动画 - setOuterAnimation
- 设置类对象内置动画 - setInnerAnimation
export abstract class AbstractPart extends LifeCircle {/*** 获取类对象纯属性*/public abstract getPartAllProps(): Model.Part;
/*** 设置类对象纯属性*/public abstract setPartAllProps(partType: any): void;
/*** 设置公共和私有的实例样式属性*/public abstract setPublicStyle(option: any): void;public abstract setPrivateStyle(option: any): void;/*** 设置静态数据*/public abstract setStaticData(option: any): void;/*** 设置实例的事件*/public abstract setPublicPartEvent(): void;public abstract setPrivatePartEvent(): void;
/*** 设置实例内置的动画*/public abstract setInnerAnimation(): void;
/*** 设置实例外置的动画*/public abstract setOuterAnimation(): void;
}
下一章节&＃xff0c;我们将介绍如何去设计一个能够实例化图元的大致流程
上一篇 前端可视化开发&＃xff08;二&＃xff09;- 框架选择
下一篇 前端可视化开发&＃xff08;四&＃xff09;- 实现图元阶段一
京公网安备 11010802041100号