goview大屏设计操作文档

介绍：

GoView 是一个高效的拖拽式低代码数据可视化开发平台，将图表或页面元素封装为基础组件，无需编写代码即可制作数据大屏，减少心智负担。当然低代码也不是 “银弹”，希望所有技术人员都能理智看待此技术。
纯前端 Demo 地址：https://vue.mtruning.club/
带后端 Demo 地址：https://demo.mtruning.club/
GoView 源码地址：https://gitee.com/MTrun/go-view
后端地址（社区实现，仅供参考）：
接口文档https://docs.apipost.cn (不是最新, 以前端代码为准)
JAVA https://gitee.com/MTrun/go-view-serve (当前使用)
.NET https://gitee.com/sun_xiang_yu/go-view-dotnet
NODE https://gitee.com/qwdingyu/led
Docker 镜像 https://gitee.com/AHEAD4/go-view-docker
技术点：
框架：基于 Vue3 框架编写，使用 hooks 写法抽离部分逻辑，使代码结构更加清晰；
类型：使用 TypeScript 进行类型约束，减少未知错误发生概率，可以大胆修改逻辑内容；
性能：多处性能优化，使用页面懒加载、组件动态注册、数据滚动加载等方式，提升页面渲染速度；
存储：拥有本地记忆，部分配置项采用 storage 存储本地，提升使用体验；
封装：项目进行了详细的工具类封装如：路由、存储、加/解密、文件处理、主题、NaiveUI 全局方法、组件等；
注意：GoView 是纯前端项目，没有后台系统，已预装 axios，若需后台请自行二次开发；

1.界面介绍

首页：

工作空间：

注意事项：

1.在右侧页面配置菜单，可以调整宽度和高度，控制画布的大小
2.可上传图片作为画布背景，在应用类型可选择应用颜色还是应用背景图（待完善）
3.所有组件都是有层级的，比如一个边框嵌套一个图表，边框在图表的上层时，在进行操作时，注意点击选择的是边框还是图表，有三种方式可以让你精准选择：1.直接在图层选择（最方便）；2.在图层拖动图表放在边框的上层，画布上选择的就是图表了；3.隐藏边框进而选择图表

2.组件

组件包括图表、信息、列表、小组件、图片、图标
可以在组件菜单进行搜索，其中图片是支持上传的

所有组件都是选中后拖拽到画布对应位置，在配置模块可进行具体的配置，分为定制、动画、数剧、事件这些配置。
在画布上右键组件，可以快捷改变图层、隐藏等，如下图：

定制：

修改组件的名称、颜色、位置、大小等，不同组件可修改的配置不同

动画：

可配置该组件动画效果，分为强调动画和移入动画，不可多选

数据：

组件的数据来源，分为静态数据、动态请求、公共接口
静态数据只需要下载默认的json格式数据，然后改数据再导入修改完的即可，如下图：

动态请求和用postman调用后端接口一样，如下图：

动态接口操作举例：

1.选中需要对接接口的数据列表

2.下载默认数据格式后续需使用

3.配置接口路径、请求方式、参数等，发送请求

发送请求后，f12查看是否调通，有没有结果返回，如果没有，不要急着下一步，先调通接口。

4.设置过滤器

注：接口有返回值后默认的数据内容会被替换

我们接口返回的数据格式一般不会与它指定默认格式一致，就需要设置过滤器，转换数据结构，这样才能将数据回显上
将接口返回的数据内容下载然后与第二步下载的默认数据格式对比，进行转换
以下面接口为例：
接口返回格式：

默认数据格式：

点击新增过滤器

编写转换格式的代码，记得return最后的数据

点击保存后，可以查看过滤器是否生效，数据是否转换成默认数据格式，如下图：

注：

现在数据请求功能可能不是特别的完善
现在数据处理主要是两种，一种是静态数据（较为推荐）, 第二种是接口请求。
静态数据处理在创建新图表那里可以直接导入，聚焦目标之后，可以在数据设置。
动态数据现仅有较为简单的 get / post 请求。
支持定时请求，在页面 页面设置 -> 数据配置 里设置时间，还可以设置全局的 根路径。
每个页面的数据可以设置单独的请求方式与接口；
数据格式需要使用 ECharts-setdata 规范，支持数据映射校验。
支持静态数据 导出 与 导入，注意需要符合 setdata 格式奥。
返回的数据格式需和提供得json格式一致，不一致需配置过滤器
sql请求需后端有专用接口去处理这个sql

事件：

可以配置一些基本鼠标点击事件和高级事件，如下图：