单一数据的可视化大屏

产品的架构是怎么样的呢？

系统层 数据智能，让未来变成现在EasyV系统采用 B/S 架构，依托于浏览器,一处部署多端访问，可通过不同客户端随时随地进行浏览、访问，轻量、易维护。数据层 支持 MySQL、Oracle、SQL Server 等常见关系型数据库，Restful API ，CSV 静态数据，音视频流媒体，且支持快速集成其他常见数据源类型，如 API 网关等。 由数据库或 API 获取到相应指标后，若指标与图形预

数据驱动子组件显隐

一般情况下，对子组件的显隐操作都使用自定义事件来进行一对一事件控制，这种方式方便快捷，不需要写代码。如果要单独显示某个子组件，则需要把其他不需要显示的组件全部隐藏。当需要显隐控制的子组件比较多时，需要配置的事件与动作会迅速膨胀。事件驱动下，显隐都需要全额配置随着控制的入口增多、需要操作的子组件增多，配置起来也会越来越复杂，一旦中途新增了子组件，所有的控制入口全都要对新增的子组件做对应动作配置。数据

从点九图看EasyV编辑模式的使用方式

代码仓库：http://gitlab.prod.dtstack.cn/visdev/visApplication/easyvc_new/draw-9-patch.git先来看看EasyV中点九图组件的编辑效果：从上图中可以看出一下几个功能点：1.组件进入编辑模式后，会出现四根绿色的线（edit属性）。2.鼠标拖动四根绿线，图片会做出相应的缩放变化（点九图特性，不懂的自行百度，该功能的实现不是本文重

数据分发

1.逻辑思维目标组件的静态数据中添加标记字段，数据过滤器内通过 data 参数获取到对应标记，随后根据需求进行逻辑处理。2.实际操作数据容器模拟数据标题组件接受userData回调,根据静态数据的key筛选userData回调的数据(需提前在静态数据里根据数据类型添加筛选字段),根据key的筛选,做到一个过滤器,多个组件通用,实现数据分发3.demo示例📎数据分发 demo_142279.zip

表格排序

功能说明实际项目实施中，有时候会需要对表格做排序。单个组件无法实现，这个时候不需要单独做定制开发，多个组件之间结合使用即可满足需求。此处示例可以作为参考，实际项目中还是根据对应需求来处理。点击图片中 区域1 的三角箭头，即可使 区域2 的内容进行排序联动。大屏链接📎大屏包-表格排序.zip实现思路轮播表格默认展示顺序与数据返回顺序相同，想要动态控制轮播表格内容的排序，通过调整轮播表格的数据即可。数

token认证

简介部分需求的接口数据依赖于token作为验证， token可以采取回调的形式作用于全局获取token组件数据容器获取token通常获取的token为一串字符串将token作为回调发送根据token获取数据在body、路径、参数这几个选项中 ‘：’+ ‘回调名’可作为变量使用，此外虽然获取token的接口的触发时机不确定的问题，但是并不会出现没有token的情况，平台会根据变量是否存在决定接口是

全局变量的使用

在项目的实际推进中，一般情况下只对每次获取的最新值做展示，但是有时候也有特殊需求，需要与之前的数据做对比或拼接。而平台本身不做数据存储，想要对过往数据应用，则需要对之前的数据通过全局变量做缓存。大屏链接大屏包-全局变量.zip计算变化值功能说明接口每次只返回当前值，但是需求上要求显示当前值与上次返回结果相减的值。效果展示实现思路每次捕捉到数据变化后，在全局变量 window中暂存上次获取到的值，同

数据过滤器的特性与用法

用法介绍数据过滤器通常作用于数据的处理，其本质是一个代码块，通常与数据容器搭配使用，以数据容器作为数据源，数据过滤器进行数据的加工处理，最后输出合适的数据结构以及内容创建过滤器勾选「使用过滤器」选项，下方「加号」按钮 进行过滤器添加；名称做过滤器的管理，必填项；回调字段，即当组件需要接收回调参数时，可在此处进行填写接收（详细使用场景 可见数据交互模块）；编辑器，即用户可在此处编写原生的JS脚本，主

自定义事件中的【自动模式】

基本介绍自动模式是自定义事件的条件中提供一个便捷功能，要使用自动模式，我们需要先添加一个自定义事件，并且新增一个条件，如下所示：点击添加条件按钮后，会打开条件的编辑弹窗，弹窗比较长，注意看弹窗的底部有一个名为自动模式的开关，默认它是勾选的，表示自动模式默认是开启的。功能概述自动模式的概念是，如果自动模式开启，当一个自定义事件满足其条件时，会触发自定义事件下配置的所有的动作，这个是自定义条件的基本功

easyv常用接口

注：所有接口调用都需要先登录easyv,也只允许通过接口修改该账号下的大屏。1. 修改组件显隐：url ：https://workspace.easyv.cloud/api/easyv/v3/screen/layers/changemethod: POST,headers： \Content-Type\: \application/json\,body: JSON.stringify({id:大屏