前端可视化开发(三)- 基础元素

javascript/jquery

浏览数:279

2020-5-26

基础元素(图元)

范围

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

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

配置项

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

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

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

图元属性

  • 位置 – 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;
}

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

作者:chuxiaoguo