視覺化編輯器之資料來源配置

2021-10-11 00:24:39 字數 1967 閱讀 4504

隨著國家近來幾次重要會議開展以及落地。企業轉型及視覺化布控迎來熱潮。所以一款能效力於管理層——運籌帷幄、省力於運維層——降低維護成本的視覺化編輯器是很有必要的。關鍵在於,它很輕便。

給大家展示一下最近乙個竣工專案的效果圖:

該專案實現了企業核心指標的實時觀測,以及整體布控。另外其還易於上手。並且是由編輯器與3d(數字孿生理念)聯合完成。那麼話不多說,言歸正傳。我將站在開發者角度,以專案為原型。通過系列文章,帶領大家了解這款編輯器。**

編輯器針對不同主題設計了三個資料來源配置

1、特定業務資料

2、**資料

3、圖表資料

對於資料來源的配置。只需開發者了解基本的ajax請求以及資料解析即可。

我們根據設計圖繪製好基本區域後,繫結資料物件。再通過陣列選匹配對應關係即可完成資料驅動。

如下圖——繪圖

繫結資料物件

資料來源配置

最終效果圖

如上圖中的資料來源配置可見,有如下配置:

介面描述,介面位址,重新整理時間,資料解析,關聯字段

大大的增強了前端配置的靈活性。

核心**如下:

start() 

// 獲取資料

await this.invokedata(dataplan)

// 資料重新整理

timer[index] = setinterval(async () => , dataplan.refreshtime)})}

以上為資料獲取重新整理核心**,此處不做過多描述,**層面敬請期待後續原理系列文章。

在屬性面板中配置(配置詳情在屬性面版中,原理同資料來源配置)

此處強調三點

1、表頭配置

2、css樣式配置

3、聯動功能

表頭配置

標題配置對應資料的屬性、標題欄等

css樣式配置

使用原生寫法,確保有效性。

聯動功能通過定義事件派發或事件監聽完成

由於截圖場景下,此**無聯動功能,此處暫不予以效果暫時。後期原始碼部分會展示聯動效果。

最終效果圖

在屬性面板中配置(配置詳情在屬性面版中,原理同資料來源配置)

此處重點是,屬性面板提供了常用圖表配置。

json面板配置

更強大的是完美對接echats的options配置。實現真正的無縫對接。

如果已有現成的圖表配置,直接移植到專案中即可。

最終效果圖

用於 CKeditor 編輯器的視覺化數學公式外掛程式

基於ckeditor編輯器的視覺化的數學公式編輯器,可以返回數學公式。將 ckeditor編輯器的config.js開啟,在 ckeditor.editorconfig function config 裡面新增 config.extraplugins jdmath config.allowedcon...

10個免費的jquery視覺化編輯器

jquery 文字編輯器,也就是所見即所得的html編輯器,是 乙個非常重要的元件,特別是對於一些內容發布 來說。本文介紹10個基於jquery的視覺化文字編輯器。1.markitup demo source 2.jwysiwyg 這是乙個內嵌的內容編輯器,可直接編輯html內容,並具備所見即所得的...

資料視覺化之pyecharts

pyecharts乙個讓你變得強大的學習 首先來開始繪製你的第乙個圖表 from pyecharts.charts import bar bar bar bar.add xaxis 可樂 雪碧 礦泉水 咖啡 冰紅茶 涼白開 bar.add yaxis 商家a 5,20,36,10,75,90 ren...