产品简介

DTS Charts

零代码配置大屏工具，上百种图表类型满足你的各种需求，云渲染、WebGL兼容你的所有三维场景，拖拖拽拽即可实现大屏的快速搭建，真正的零代码。

地址

http://charts.freedo3d.com/

面向群体

售前演示系统，可快速搭建交互项目，直观演示给客户看。小型项目的快速搭建等等。

产品亮点

可拖拽的场景编辑，上百种控件支持，提供WebGL与高渲染两种地图支撑，满足客户不同场景。

提供了多种场景多种主题的模板，用户可以根据模板快速搭建场景，可节约创建时间、提升效率。

产品登录及场景创建

进入系统

选择DTS Charts，默认进入系统主页，如下图所示：

系统主页分为模板和项目两个模块，左侧有分享页面和回收站的页面入口，点击可进入对应页面。创建新的大屏以及当前用户创建的所有的大屏列表，如上图所示。

根据自己的场景需求，创建固定布局或创建自适应布局，系统为方便用户快速搭建常见，提供了模板，可以通过模板创建。也可根据名称搜索模板。

工程可以直接查看、复制、分享、删除、编辑。查看可直接查看当前项目效果。复制可以快速复制当前工程作为新工程。点击分享可将对应的项目加入分享列表。点击删除可将本条数据添加到回收站页面。也可根据名称搜索项目工程。

创建布局

自适应布局

如上图所示，自适应布局固定画布大小，组件根据两边距或一边距加宽（高）进行自适应大小（宽高）。

固定布局

如上图所示，创建固定布局项目，所有组件的都为固定大小尺寸。

我的分享

工程页点击我的分享可进入我的分享页面，如下图所示：

分享页面展示分享列表，展示项目缩略图、分享名称、场景名称、过期时间、启用、禁用、查看、修改、删除。可根据分享名称进行条件搜索。

工程页添加到分享页项目默认为启用状态，当状态为启用状态时点击查看可预览当前项目的项目成果；也可直接复制查看地址分享给他人查看。当状态为禁用或者超过分享时间则无法正常查看项目。

修改，可修改分享名称和过期时间。如下图所示：

点击取消，关闭修改弹窗，取消本次删除。点击确定，关闭修改弹窗，提交本次修改刷新分享列表。

删除，点击删除显示删除确认弹窗，如下图所示：

点击取消，关闭删除弹窗，取消本次删除；点击确定删除本条，关闭删除弹窗，刷新分享列表。

点击左侧【返回工程页】、【回收站】可进入对应的工程页和回收列表页面。

回收站

工程页点击回收站可进入回收站页面，如下图所示：

回收站默认展示删除项目列表，展示项目缩略图、项目名称、创建时间、删除时间、恢复。可根据项目名称进行条件搜索。

点击恢复可打开恢复确认弹窗，如下图所示：

点击取消，取消本次恢复，关闭恢复弹窗；点击确定，关闭恢复弹窗，可将本条数据恢复到工程页中我的项目列表中。

点击左侧【返回工程页】、【我的分享】可进入对应的工程页和分享列表页面。

基本操作

组件以及系统操作说明：

系统的所有组件都支持拖拽至画布；
画布上组件支持Ctrl多选及画布范围多选；
选中单组件右键复制、剪切、删除、置顶、置底、上移、下移、锁定、解锁；
选中多组件右键复制、剪切、删除、锁定、解锁；
移动组件智能辅助线参照；
组件选中Delete快速删除；

工具说明

如画布页面展示，主要分为3大部分，顶部工具栏、左侧工具栏/操作记录，右侧属性栏，如下图所示：

右侧属性默认或未选择组件时展示工程属性，大屏名称以及缩略图。大屏名称可修改，默认无缩略图用户可上传、修改。

顶部工具栏

顶部工具栏介绍

工具栏功能说明
模块	子模块	说明
文本	大标题/小标题/标题/正文
形状	基本形状/通用图标/按钮
图表	包含29种大类图表
多媒体	图片/视频
通用	时间控件/时钟控件/定时控件/层级树/容器组件/日历组件/数值组件/统计表/装饰/iframe/跑马灯/菜单
地图	WebGl/高渲染
自定义	自定义组件
清空画布		清空当前页面画布里所有组件
保存	自动保存时间5/10/15/20/25/30分钟选项	保存当前工程，选择对应的时间选项系统可以会根据时间自动保存
预览		预览当前编辑的工程
退出		退出当前编辑工程返回工程页

组件工具栏如上图所示：

功能及快捷键依次为：撤销（ctrl+z）、恢复（ctrl+y）、插入图片、组件锁定（ctrl+L）、组件解锁（ctrl+U）、画布大小宽（默认1920*1080）、高、画布比例适应画布根据当前屏幕大小进行等比缩放，也可滑动滑块调整或输入百分比进行调整。

对齐以及分布位置和尺寸：左对齐、右对齐、顶对齐、底对齐、垂直平均分布、水平平均分布、左分布对齐、右分布对齐、上分布对齐、下分布对齐、3:1、4:1、8:1、3:3、4:4、5:5。

注：对齐功能需选择两个及以上组件。

左侧工具栏

左侧工具栏以tab切换展示对应内容，包含图层和操作记录两个模块。

图层包含两个模块页面列表和组件列表，如下图所示：

页面操作可为：显隐当前页面，只显示当前页面。操作记录记录所有操作步骤，点击任意一条记录即可恢复到当前操作，保留最近100次操作步骤。根据组件类型、页面进行筛选组件。组件顺序可随意进行拖拽调整组件层级。

右侧属性栏

属性栏分为工程属性、通用属性和组件特有属性。通用属性包含基本属性、事件、动画，所有组件都有通用属性。组件特有属性是指当前选中的组件特定的组件属性。

基本属性

所有组件都有基本属性，如下图所示：

事件

事件可以为显隐事件、消息事件、导览事件。每个组件都可以添加对应的事件。事件类型分为鼠标点击、鼠标移入、鼠标移出三种。每个事件都可以添加分组，添加完成后事件会按照分组顺序执行。具体事件如下图展示：

开关按钮事件为开关开启和开关关闭两种，是特殊的一个组件。如下图所示：

复选框事件分为勾选、取消勾选以及节点选中三种。这三种事件都需要与层级树与节点做关联关系才能生效，具体如下图所示：

动画

为给用户提舒适的用户体验以及页面更多酷炫的效果，系统默认提供了3大类，70种动画。可以使组件做出样式、位置的改变等。鼠标悬浮按钮可以预览动画效果，双击即可给组件添加对应的动画效果。如下图展示：

组件与属性

文本

组件

文本组件内置4个子组件，大标题、小标题、标题、正文，如下图所示：

文本属性

文本特有属性如下图所示：

字体大小	字号
行高	字间距
字体颜色	字体加粗效果
文字水平位置	文字垂直位置
文字内容

根据页面需求调整文本的各个属性值进行页面适配。

形状

形状分为三大类：基本形状、通用图标、按钮。如下图所示：

基本形状

基本形状内置三个组件：矩形、圆角矩形、原型，具体如下图所示：可根据场景在基本属性中调整形状、背景、颜色、角度等等。

通用图标

内置至少300种图标，可满足不同的场景、工程使用，如下图所示：

按钮

内置基本按钮和开关按钮两个组件，如下图所示：

基本按钮属性与文本属性保持一致，具体使用方法可参照文本属性，如下图所示：

开关按钮暂无特定属性，事件可参照3.3.2中开关按钮事件使用。

图表

目前支持29种大类型图表，每种大类又可支持不同类型数据，满足各种场景使用。如下图所示：

配色

所有图表都支持配色调整，配色分为内置配色和自定义配色，内置配色为系统内置配色方案，用户也可以根据自己的场景需求自己添加配色，每个用户可添加10条自定义配色方案。也可以修改、删除配色自定义配色。自定义配色翻转是将已选的颜色对称翻转，渐变是根据起始和终止颜色将中间的颜色计算出过渡颜色。如下图所示：

编辑数据

所有图表都可进行数据编辑，分为静态数据和接口接入。

静态数据可在线编辑或根据样例数据在编辑后上传到系统，系统会将上传的数据展示到表格里并重新绘制图表。如下图所示：

接口接入，输入接口URL地址，设置自动请求时长、请求方式即可获取接口返回所有字段在左侧以树结果展示。点击，如下图所示：

基础柱状图

柱状图内置6种常用柱状图图表，可根据不同场景进行使用。柱状图调整属性以及相关属性如图所示：

柱状图属性说明如下图所示：

堆叠柱状图

堆叠柱状图需要至少两组数据进行堆叠，具体属性与基本柱状图属性保持一致，可参照基本柱状图属性进行调整，如下图所示：

基础饼图

基础饼图一为单饼图，图例属性可参照基础柱状图图例属性调整，宽度属性为饼图宽度，尺寸为当前组件的百分比占比。具体可参照下图所示：

基础饼图二为双饼图，图例属性可参照基础柱状图图例属性调整。内圈尺寸为当前组件的百分比占比，外圈尺寸第一个数值为内径的尺寸，第二个数值为外径的尺寸。具体可参照下图所示：

折线图

折线图可以显示随时间（根据常用比例设置）而变化的连续数据，因此非常适用于显示在相等时间间隔下数据的趋势。图例属性可参照基础柱状图图例属性调整。其中线条粗细为折线图的粗细调整，线条类型可分为虚线和实线。具体如下图所示：

雷达图

雷达图暂无属性可调整，可调整基本属性或配色进行适配场景。如下图所示：

仪表盘

仪表盘可属性如下图所示：

玉玦图

混合图

混合图属性与柱状图属性基本一致，使用方法可参照柱状图。如下图所示：

基础环图

宽度第一个数值为内径的尺寸，第二个数值为外径的尺寸。具体可参照下图所示：

其他

上面简单说明了9种图表，其他未说明图表基本与柱状图属性一致或没有特定属性。

多媒体

多媒体包含图片与视频，两大类。如下图所示：

图片

图片展示已上传的图片资源，可直接拖拽至画布使用。也可上传图片资源，上传的图片默认会放置画布左上角。如下图所示：

当选择一张图片可调整图片尺寸样式（自适应/充满/实际宽高）。添加多张图片时可以从资源库中选择，也可以重新上传，也可以自定义，填写外部网络图片地址即可。选择多张图片时默认变成图片轮播。具体如下图所示：

视频

视频展示已上传的视频资源，可直接拖拽至画布使用。也可上传视频资源，上传的视频默认会放置画布左上角。如下图所示：

与图片不同，视频属性只作为修改当前视频资源，选择资源库资源或上传资源或自定义都是修改当前视频资源。具体如下图所示：

通用

通用组件内置12种组件，每个种类的组件又包含多种子组件。如下图所示：

时间控件

时间控件包含三个子组件，年月日时分秒、年月日、时分秒。如下图所示：

时间控件属性如下图所示：与文本属性类型，可参照文本属性。

时钟控件

时钟控件属性都是调整时钟细节的样式，时分秒指针的颜色尺寸，刻度的颜色和宽窄。如下图所示：

定时控件

定时控件只在编辑状态显示，在预览状态下不展示。定时控件一般搭配事件使用，例如在什么时间执行相对应的事件。

层级树

层级包含层级显隐和层级选择联动，具体如下图所示。层级树事件详见3.3.2中复选框事件。层级树属性中可新增、删除、修改每个节点，节点也支持拖拽调整。

容器组件

内置15个容器组件，其中有一个支持输入文本，属性如下图所示，具体属性可参数4.1.2文本属性。调整颜色可使用配色调整可参照4.3.1配色。

日历组件

目前内置一个日历组件，可展示当前的日期。

数值组件

数值组件内置4个组件，主要分为倒计时和星评，具体如下图所示：

统计表

统计表组件属性有编辑数据和滚动速度，滚动速度控制滚动快慢，当组件高度高于组件内容条数高度则自动滚动。编辑数据可参照4.3.2编辑数据模块，统计表在编辑数据时表头字段可上下拖拽调整顺序。

装饰

装饰组件内置12个子组件。其中有3个可输入文本进行编辑，如下图所示。装饰组件属性可参照4.1.2文本属性进行样式调整。调整颜色可使用配色调整可参照4.3.1配色。

iframe

iframe组件支持输入页面地址嵌入页面展示，具体如下图所示。

跑马灯

跑马灯效果是内容首尾相接来回滚动的效果，属性分为两个部分，文本部分可参照4.12.文本属性进行调整，滚动时间是指内容在多久时间内展示完，滚动方向为向上、向下、向左、向右四个方向。

菜单

菜单内置横向和纵向两个子组件。菜单属性可调整默认文本颜色、字号、选中文本颜色，可新增、删除、修改每个节点，节点也支持拖拽调整。如下图所示：

地图

地图包含两种，webgl为基础的Holo3D和高渲染平台的Aircity。

Holo3D

Holo3D是以webgl为基础的地图渲染。输入模型文件地址、栅格瓦片地址、地形文件地址点击确定即可展示加载地址对应的模型。

AirCity

以高渲染平台为基础，输入对应的服务地址即可加载出对应的实例列表，选择实例即可展示其对应导览列表，选择导览即可查看。

IP地址示例： ws://192.168.0.0:0000

ip地址说明：采用WebSocket通信协议，所以ip地址前需加ws://，ip地址也需跟正确的端口才能构成正确的ip地址。

端口号：Manager端口

自定义

自定义是自定义组件，默认展示已上传的自定义组件。可上传自定义组件、编辑、删除。

上传自定义组件

自定义组件结构如下图所示：

自定义组件开发说明

必须有两个html文件，且命名不能重复且命名是element.html和elementAttr.html，固定命名。
element.html 是绘制画布上的自定义组件内容，elementAttr.html是自定义组件对应的属性内容。
element.html 和 elementAttr.html 内容不能为空。element.html 必须有setElement{id} 方法。elementAttr.html 必须有setElementAttr方法。
element.html 和 elementAttr.html 两者关联关系就是该组件的ID，既是唯一标识也是关联ID，也能确保组件属性的唯一性。
elementAttr.html 设置完属性后需调取方法设置属性，该方法命名必须与 element.html 中的某一方法是一致的，才能正确调用对应方法。
element.html 文件中的setElement方法可以获取该自定义组件的所有数据、属性；elementAttr.html 文件中的setElementAttr可以获取该自定义组件的所有数据、属性。
elementAttr.html 文件方法可调用element.html文件中同一名称的方法。所有方法后面都需跟{id} 可以区分组件的方法，避免组件之间方法冲突。
若自定义组件有图片或视频，则需要采用相对路径引用。

下面是element.html和elementAttr.html的demo：

element.html 代码示例：

 \<div class="row-1"\>

    \<div id="text\_{id}" class="content"\>测试自定义组件\</div\>

\</div\>

\<script type="text/javascript"\>

    var data{id} = null;

    function setElement{id}(item) {

        data{id} = item;

    }

    function setStyleValue{id}(attr) {

        var dom = document.getElementById("text\_{id}");

        if (attr) {

            if (attr.fontSize) {

                dom.style.fontSize = attr.fontSize + "px";

            } else {

                dom.style.fontSize = data{id}.target.data.fontSize ?
data{id}.target.data.fontSize + "px" : "18px";

            }

            dom = null;

        }

    }

\</script\>

\<style\>

    .content {

        color: brown;

    }

\</style\>

elementAttr.html 代码示例：

\<div class="main-panel-title"\>

    \<span\>文本样式\</span\>

\</div\>

\<div class="main-panel-title"\>

    \<span\>字体大小\</span\>

\</div\>

\<div class="main-mas-input-simple main-mas-input-simple-input"\>

    \<div class="mas-basic-layout"\>

       \<input id="font\_{id}" type="number" class="mas-basis-input
mas-basis-input2" onblur="setFontSize{id}(this)"/\>

    \</div\>

 \</div\>

\<script type="text/javascript"\>

    var elementAttr{id} = null;

    function setElementAttr(item) {

        elementAttr{id} = item;

        document.getElementById("font\_{id}").value = item.target.data.fontSize
? item.target.data.fontSize : 18;

    }

    function setFontSize{id}(input) {

      elementAttr{id}.target.data.fontSize = input.value;

      setStyleValue{id}({fontSize: input.value});

  }

\</script\>

组件效果和组件属性如下图所示：

解说：该组件是一个简单的文本组件，可以修改该组件的字体大小。

编辑自定义组件

编辑自定义组件为在线编辑，如下图所示。编辑状态可上传html、css和图片资源进行使用，element.html和elementAttr.html作为自定义组件的基本构成不允许删除。点击左侧的资源标题可展示其对应的内容或缩略图。

数据接入

资源支持静态和动态数据的接入

动态数据

填写URL地址，数据基础柱状图下有编辑地址，接口接入地方，右侧数据地址

注意：上图右侧3的地方，除了第一个参数【分类】外，其他参数获取的结果必须是数字，或者字符串里是数字，要不然数据可能会失败 dasd

格式

接口地址说明

暂时只支持get post的，接口格式为,下面接口以实际为主，接口参数现在只支持query方式（例如：?token=1&cs=3）,暂时不支持body体

http://127.0.0.1:8300/jk?token=2

返回结果为json格式，格式里面有数组集合。不能是字符串，请关注接口返回的响应头部信息Content-Type类型只能是application/json，其他方式不识别。

支持添加请求头

返回结果例如

{"state":{"code":10000,"message":"访问成功","timestamp":1692956339501},"body":{"message":[{"len":"30","name":"name0"},{"len":"96","name":"name1"},{"len":"89","name":"name2"},{"len":"28","name":"name3"},{"len":"1","name":"name4"}]}}

[{"len":"30","name":"name0"},{"len":"96","name":"name1"},{"len":"89","name":"name2"},{"len":"28","name":"name3"},{"len":"1","name":"name4"}]

{"data":[{"len":"67","name":"测试0"},{"len":"97","name":"测试1"},{"len":"39","name":"测试2"},{"len":"63","name":"测试3"},{"len":"75","name":"测试4"}]}

message: [{"len":"30","name":"name0"},{"len":"30","name":"name0"}]

如果原始数据格式跟需求不符,需要转成需要的格式，Content-Type类型application/json

例如： message: [{"len":"30","name":"name0"},{"len":"30","name":"name0"}]

结语

关于本文档和系统的说明：

DTSCharts2.0于2022年7月7日已正式对外发布上线，正式上线之前 UI 和功能点进行过数次调整，以便为您提供更好的用户体验。文档会存在更新不及时的情况，存在与系统不一致的地方，本文档着重对功能的讲解，具体使用情况以系统为主。

感谢您使用DTSCharts2.0。

京公网安备 11011502006676号

京ICP备17012026号-4