ChartEz

拖拽式页面生成工具

线上版本

线上版本 拖拽式配置展示 配置结果展示

产品简介

chartEz的拖拽编辑能力,依赖于BIU的支持

chartEz为用户提供了如下功能:

  1. 拖拽式的页面布局设计

  2. 页面内容的表单编辑

  3. WebSocket连接提供页面数据的动态更新

  4. 富的后台数据接口,包括数据库连接,Socket等

  5. 自定义后台数据源以及数据回调的能力

  6. 完整的Echart支持

  7. Echart主题包导入

主要概念

元素

chartEz将网页定义为了四种元素

  • 图片展示用的img

  • 表格展示用的table

  • 处理图标的chart

  • 无所不包的html

元素是系统中可配置的最小单位,每一个元素都需要独立配置它的展示样式、数据内容、动态数据等属性 通过四种元素的编辑与配置,即可生成一个布局完毕的页面,这个页面被称为——看板 看板中的元素管理

看板

看板拥有名称、尺寸、chart主题、背景样式等属性。还拥有其下配置的各种元素,一款看板已经包含了从动态数据获取,到前台展示所需要的全部信息。 为了实现多块看板的轮播功能,首先要将看板装进看板组中。看板组就是用户真正可以打开的页面了。当一个看板组拥有超过一个的看板时,多块看板将以轮播的形式展示。 看板管理

看板组

看板组可以直接称为一个URL被用户查看,您可以耦合您的用户/权限体系,或者根据您的业务需要,进行看板展示即可~ 看板组展示 看板组管理

数据源

在chartEz中,数据源指的是动态数据的来源。数据源可以关联到元素,通过建立websocket连接,让元素在浏览器中始终展示最新的数据。 目前,chartEz支持的数据源有如下几类:

  • MySql数据库记录

  • Socket

  • ICE

    使用手册

    看板组配置

    可以配置看板组的名称,以及看板组与看板的关联。

    当一个看板组关联了多块看板时,多块看板将以轮播形式展示。

看板配置

看板的配置内容为看板的名称、尺寸、echart主题包、背景图片或背景颜色 看板的配置在拖拽布局页面的菜单中进行

HTML元素配置

HTML元素可配置内容如下

配置项

说明

名称

元素的名称,显示在拖拽布局中

样式

自定义的元素样式

after

元素生成后的JS脚本,可以做一些数据的后置处理

数据源

关联用户预设置的数据源,关联后可在页面中不断获得该数据源的数据

回调方法

JS脚本,用来处理接受数据推送后的元素更新

HTML元素的配置菜单,由拖拽页面中的右键菜单进入

CHART元素配置

CAHRT元素的可配置内容如下

配置项

说明

名称

元素的名称,显示在拖拽布局中

样式

自定义的元素样式

参数内容

EChart的option选项

before

chart初始化前的JS脚本,可以进行一些数据的预处理

after

chart生成后的JS脚本,可以做一些数据的后置处理

数据源

关联用户预设置的数据源,关联后可在页面中不断获得该数据源的数据

回调方法

JS脚本,用来处理接受数据推送后的元素更新

CHART元素的配置菜单,由拖拽页面中的右键菜单进入

TABLE元素配置

TABLE元素的可配置内容如下

配置项

说明

名称

元素的名称,显示在拖拽布局中

样式

自定义的元素样式

after

元素生成后的JS脚本,可以做一些数据的后置处理

数据源

关联用户预设置的数据源,关联后可在页面中不断获得该数据源的数据

回调方法

JS脚本,用来处理接受数据推送后的元素更新

TABLE元素的配置菜单,由拖拽页面中的右键菜单进入

IMG元素配置

IMG元素的可配置内容如下

配置项

说明

名称

元素的名称,显示在拖拽布局中

样式

自定义的元素样式

url

图片路径

IMG元素的配置菜单,由拖拽页面中的右键菜单进入

数据源配置

数据源暂时可分为SQL数据源,Socket数据源,ICE数据源三种 数据源均是独立配置,被元素调用。当一个元素关联了数据源以后,在生成看板页面时,同时会向后台注册该数据源。 后台获取数据源的注册后,会进行相应的数据采集工作(SQL查询,Socket监听等),并将采集到的信息通过Websocket实时同步给前端页面。 前端页面可根据元素的回调方法,进行页面内容的更新。 在配置数据源时,也可以设置一些“环境依赖数据”,例如,根据登录用户的不同,查询不同的用户ID。根据当然日期的不同,查询不同的数据等等。

Last updated