可視化開發的心酸路之基礎元素

時間 2020-01-23

標籤可視化開發心酸基礎元素欄目悠閒生活简体版

原文原文鏈接

基礎元素（圖元）

範圍

在第一篇中咱們經過思惟導圖也簡單介紹了圖元的範圍。sql

基礎圖形 - 點線面
基礎圖表 - echarts[折線圖，餅圖，柱狀圖，地圖，散點圖...]
媒體 - 視頻，直播視頻
表格
3d圖形
行業組件
...

配置項

樣式配置項
能夠經過樣式配置項，配置圖元的基礎樣式屬性，以下：

數據配置項
能夠經過數據配置項，配置圖元的數據，這裏有個數據源的概念。
數據源指的就是獲取數據的方式，能夠經過一下的方式：api

靜態的編輯器書寫，
能夠經過api，
能夠經過sql，
...

圖元屬性

位置 - top,left
大小 - width,height
角度 - angle
名稱 - partName
id - partId
圖層 - layer
身份標示 - partType

基本就是以上的信息咱們從新梳理一下(x指left,y指top)：echarts

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;
}

圖元函數（方法）

生命週期

圖元是一個完整的實例類，因此它是一個有生命的個體，因此咱們須要爲它定製生命週期，以抽象的形式展現
初始化實例對象
發生在建立實例的時候，好比從菜單拖拽出一個圖元dom

銷燬實例對象編輯器

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;
}

下一章節，咱們將介紹如何去設計一個可以實例化圖元的大體流程動畫