一种基于VUE构建可视化数据大屏的方法与流程

一种基于vue构建可视化数据大屏的方法
技术领域
1.本发明涉及一种基于vue构建可视化数据大屏的方法，属于可视化大屏是数据展示技术领域。


背景技术：

2.可视化大屏是数据展示一种非常重要的形式，随着大数据时代的来临，数据可视化大屏展示被更多的企业青睐，而vue是当下非常流行的一套用于构建用户界面的渐进式javascript框架，其响应式数据绑定、组件化开发给前端带来很多便利。
3.在现有技术的前端开发中，实现炫酷的大屏效果往往是一项非常复杂繁重的工作，涉及到布局、各种效果的程序编写，且如果企业的客户想要按自己的意愿设计一个可视化大屏，需要委托有开发能力的人去做开发，不同风格的大屏重复性的工作也比较多。


技术实现要素：

4.本发明是为解决现有技术中的问题而提出的，技术方案如下，
5.一种基于vue构建可视化数据大屏的方法，包括如下步骤，
6.步骤一：创建可视化数据大屏常用的vue组件；
7.步骤二：划分画布网格，将可视化数据大屏的画布划分为m行n列的网格；
8.步骤三：创建布局，通过拖拽的形式向可视化大屏的画布上放置布局单元，并通过拖拽来调整每个布局单元占用网格的行列数，每个布局单元细分为多行多列且独立存在；
9.步骤四：填充vue组件，向每一个布局单元之中拖放vue组件，vue组件可以通过拖动调整在布局单元中所占的行数和列数，不同的vue组件在同一个布局单元中可以重叠；
10.步骤五：绑定vue组件接口，用以提供vue组件的数据信息，不同种类的vue组件的前后端约定数据格式；
11.步骤六：预览、保存，预览效果无问题，将画布上的每个布局单元、vue组件的数据信息进行保存，生成一个模板。
12.优选的，所述vue组件的类型包括柱状图、折线图、表格、地图。
13.优选的，所述布局单元的数据信息包括起始行、终止行、起始列、终止列。
14.优选的，所述vue组件的数据信息包括绑定的vue组件接口、所在的布局单元及所在布局单元的起始行、终止行、起始列、终止列。
15.本发明通过自由拖拽的形式，灵活的将可视化数据大屏各个模块自由组合，大大加快可视化数据大屏的开发速度与自由度，只需内置几个常用的组件，可快速组合出一套可视化大屏，大大节省了开发时间。
附图说明
16.图1是本发明一种基于vue构建可视化数据大屏的方法的工作流程图。
17.图2是本发明可视化数据大屏的画布划分网格的示意图。
18.图3是本发明布局单元分布的示意图。
具体实施方式
19.下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
20.缩略语和关键术语定义
21.vue：一套用于构建用户界面的渐进式javascript框架。
22.api：application programming interface应用程序编程接口。
23.如图1所示，一种基于vue构建可视化数据大屏的方法，包括如下步骤，
24.步骤一：创建可视化数据大屏常用的vue组件；所述vue组件的类型包括柱状图、折线图、表格、地图等。
25.步骤二：划分画布网格，将可视化数据大屏的画布划分为m行n列的网格，网格的精细度可以根据需要自己调整，m、n越大，布局越精细，如图2所示，画布调整为7行6列。
26.步骤三：创建布局，通过拖拽的形式向可视化大屏的画布上放置布局单元，并通过拖拽来调整每个布局单元占用网格的行列数，每个布局单元细分为多行多列且独立存在，不同的布局单元不可以相互重叠；布局单元就是一个一个小的内容单元，如图3所示，有7个布局单元，将画布划分为7块；所述布局单元的数据信息包括起始行、终止行、起始列、终止列。
27.步骤四：填充vue组件，向每一个布局单元之中拖放vue组件，vue组件可以通过拖动调整在布局单元中所占的行数和列数，不同的vue组件在同一个布局单元中可以重叠；
28.步骤五：绑定vue组件接口(api)，用以提供vue组件的数据信息，不同种类的vue组件的前后端约定数据格式；所述vue组件的数据信息包括绑定的vue组件接口、所在的布局单元及所在布局单元的起始行、终止行、起始列、终止列，通过这些信息可确定它的位置以及呈现的数据。
29.步骤六：预览、保存，预览效果无问题，将画布上的每个布局单元、vue组件的数据信息进行保存，生成一个模板。一个系统内可以建立多个大屏模板，可以随时切换到自己想要的风格。
30.本发明实现了可视化数据大屏开发组件的复用与组合，布局单元的自由拖拽，只需内置几个常用的vue组件，就可快速组合出一套可视化数据大屏，加快了可视化数据大屏的开发速度与自由度，大大节省了开发时间，任何不懂代码的人都可以短时间内快速组合一套前端大屏。
31.尽管参照前述实施例对本发明进行了详细的说明，对于本领域的技术人员来说，其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换,凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。


技术特征：
1.一种基于vue构建可视化数据大屏的方法，其特征在于：包括如下步骤，步骤一：创建可视化数据大屏常用的vue组件；步骤二：划分画布网格，将可视化数据大屏的画布划分为m行n列的网格；步骤三：创建布局，通过拖拽的形式向可视化大屏的画布上放置布局单元，并通过拖拽来调整每个布局单元占用网格的行列数，每个布局单元细分为多行多列且独立存在；步骤四：填充vue组件，向每一个布局单元之中拖放vue组件，vue组件可以通过拖动调整在布局单元中所占的行数和列数，不同的vue组件在同一个布局单元中可以重叠；步骤五：绑定vue组件接口，用以提供vue组件的数据信息，不同种类的vue组件的前后端约定数据格式；步骤六：预览、保存，预览效果无问题，将画布上的每个布局单元、vue组件的数据信息进行保存，生成一个模板。2.根据权利要求1所述的一种基于vue构建可视化数据大屏的方法，其特征在于：所述vue组件的类型包括柱状图、折线图、表格、地图。3.根据权利要求1所述的一种基于vue构建可视化数据大屏的方法，其特征在于：所述布局单元的数据信息包括起始行、终止行、起始列、终止列。4.根据权利要求1所述的一种基于vue构建可视化数据大屏的方法，其特征在于：所述vue组件的数据信息包括绑定的vue组件接口、所在的布局单元及所在布局单元的起始行、终止行、起始列、终止列。

技术总结
本发明提出一种基于VUE构建可视化数据大屏的方法，包括步骤一：创建可视化数据大屏常用的Vue组件；步骤二：划分画布网格；步骤三：创建布局，通过拖拽的形式向可视化大屏的画布上放置布局单元，并通过拖拽来调整每个布局单元占用网格的行列数；步骤四：填充Vue组件，向每一个布局单元之中拖放Vue组件，Vue组件可以通过拖动调整在布局单元中所占的行数和列数；步骤五：绑定Vue组件接口，用以提供Vue组件的数据信息；步骤六：预览、保存。本发明通过自由拖拽的形式，灵活的将可视化数据大屏各个模块自由组合，大大加快可视化数据大屏的开发速度与自由度，只需内置几个常用的组件，可快速组合出一套可视化大屏，大大节省了开发时间。大大节省了开发时间。大大节省了开发时间。


技术研发人员：张东 刘光明
受保护的技术使用者：山东华软金盾软件股份有限公司
技术研发日：2020.07.03
技术公布日：2022/1/21