前端可视化开发（三）- 基础元素

基础元素（图元）

范围

在第一篇中我们通过思维导图也简单介绍了图元的范围。

• 基础图形 - 点线面
• 基础图表 - echarts[折线图，饼图，柱状图，地图，散点图...]
• 媒体 - 视频，直播视频
• 表格
• 3d图形
• 行业组件
• ...

配置项

样式配置项
可以通过样式配置项，配置图元的基础样式属性，如下：

数据配置项
可以通过数据配置项，配置图元的数据，这里有个数据源的概念。
数据源指的就是获取数据的方式，可以通过一下的方式：

1. 静态的编辑器书写，
2. 可以通过api，
3. 可以通过sql，
4. ...

图元属性

• 位置 - top,left
• 大小 - width,height
• 角度 - angle
• 名称 - partName
• id - partId
• 图层 - layer
• 身份标示 - partType

基本就是以上的信息我们重新梳理一下(x指left,y指top)：

class Part {
    /**
     * 图形元素的名称
     */
    public partName: string = '';

    /**
     * 图形元素的id
     */
    public partId: string = '';

    /**
     * 图形的类型，比如part，component， template
     */
    public partType: string = '';

    /**
     * 第一级表示标识
     */
    public sourceType: string = '';

    /**
     * 第二级表示标识
     */
    public type: string = '';

    /**
     * 第三级表示标识
     */
    public childType: string = '';

    /**
     * 图形元素的图层
     */
    public layer: number = 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;
}

图元函数（方法）

生命周期

图元是一个完整的实例类，所以它是一个有生命的个体，所以我们需要为它定制生命周期，以抽象的形式展示
初始化实例对象
发生在创建实例的时候，比如从菜单拖拽出一个图元

销毁实例对象

export abstract class LifeCircle {
    /**
     * 初始化类对象
     */
    abstract init(domId: string, opts?: any): void;

    /**
     * 销毁类对象
     */
    abstract destroyed(): void;
}

通用的方法钩子

这里面我是用ts写的，大概可以总结为以下几个方法

数据存储和读取

保存图元数据，获取图元数据数据，发生在保存和初始化的情况

• 获取类对象纯属性 - getPartAllProps
• 设置类对象纯属性 - setPartAllProps

样式配置

设置样式配置项
公共的样式配置项指的是大小，坐标，图层等
私有的样式配置项指的是echarts的系列，xy轴等

• 获取类对象公共样式 - setPublicStyle
• 设置类对象私有样式 - setShapeStyle(setPrivateStyle)

数据配置

设置数据配置项
调用设置静态数据，这里补充一点不管是什么数据源，最终拿到的都是静态数据，所以只有一个设置静态数据的方法

• 获取类对象静态数据 - setStaticData

事件配置

设置事件配置项
公共的事件配置项指的是图元间的传参等
私有的事件配置项指的是图元内部的事件等

• 获取类对象公共事件 - setPublicPartEvent
• 设置类对象私有事件 - setPrivatePartEvent

动画配置

设置动画配置项
内置动画配置项指的是图元内部的动画，比如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;
}

下一章节，我们将介绍如何去设计一个能够实例化图元的大致流程
上一篇 前端可视化开发（二）- 框架选择
下一篇 前端可视化开发（四）- 实现图元阶段一