来试试这个用 Vue 撸的数据可视化后台吧

国际老例：项目Github地点，接待 Star

dongsuo/vue-data-board

起首放个线上地点各人感觉一下(因为后端用的是 leancloud 的免费套餐，因此也许会较量慢)：

vue-data-board

P.S. 提议各人只管本身注册一个账号(可以任意填一个暗码)，假如用默认的测试账号，不要乱改对象，不然别人进来就没得看了，由于你做的任何窜改城市生涯到后端数据库里。

缘起

也不知道为什么，公司里对数据说明、数据可视化的需求越来越多。这部门需求有的来自数据说明师(假如公司稀有据说明师的话)，有的来自产物、运营、开拓，尚有的来自公司的中层、高层率领，有的只是要把某一个表的数据导出，也有的但愿能从多个维度对数据举办说明、可视化，尚有的但愿把多个可视化图表整合在一个页面中形成可视化的报表，有的是一次性的需求，有的是周期性的常态化需求，这些需求经常混乱无章，并且数据的维度许多，交互较量伟大，可视化图表的各类参数浩瀚，很难做到通用，并且很大都据较为敏感又必要严酷的权限节制，时刻一长，权限的打点又成了一个头疼的工作，各种身分导致各类数据需求淹灭了前端开拓的大量精神，发量日渐稀薄。

信托许多公司城市有相同的数据需求，零星却必需，固然市面上也有不少产物提供了相同的数据打点成果，可是一理因为数据的敏感性，很多公司不肯意将本身的数据放到此外平台上，二来这些数据打点的产物大多收费昂贵且成果难以定制。以是许多公司里这种数据需求就会落到前端的头上，这些需求固然零星乃至姑且，可是实现起来却并不简朴，可视化的视觉结果必要各类参数去设置，而大量的数据必要验证、洗濯、转换又使得接口调试和对接变得异常贫困，增进了前端的事变量，也让前端的 coding 变得异常恼人。

这时辰做一个强盛机动易用的数据说明靠山就异常有效了，通过傻瓜式地拖拽天生图表的方法，可以让没稀有据基本的同事也能很快上手;通过将公司的数据源整合到一路，可以利便地对数据举办打点;通过构建看板整合多个图表，可以快速天生报表，便于查察、分享;通过用户自界说图表参数，可以有用地办理前端调参的疾苦。(一个异常工致的排比句，oh yeah!)

我在我司搭建数据说明靠山也快要一年了，现实上我从第一份演习开始就在打仗BI、数据相干的工作，在数据说明靠山的搭建进程中也踩了很多的坑，时代经验了同事的各类吐槽，实行了各类差异的办理方案，现在固然代码手段不见几多晋升，可是对付营业需求的混乱无章、幻化莫测可谓多有领会。

在经验了半年多疾苦的熬煎之后，我按照营业需求，参考其他数据说明产物，搭建了全新的数据说明平台，这一平台现在在我司运转精采，一方面已经满意了一部门数据需求，另一方面也有很好的可扩展性，可以应对更伟大的营业场景。我将前端部门抽离出来，形成了这个开源项目：

dongsuo/vue-data-board

起首先容下这个项目标根基环境，这个项目首要是用 Vue+ElementUI 搭建的，可视化部门是用的echarts，拖拽和机关部门是 vue-grid-layout 和 vuedraggable这两个库。这个项目一些技能、思绪以及一部门帮助代码是参考了潘神的这个靠山项目：

PanJiaChen/vue-element-admin

项目标后端部门除了少数数据是用了 mock 数据之外，都是用了 [leancloud](http://leancloud.cn) 举办搭建， Demo 数据的数据库部门则是用了海外的一个免费数据库 Free MySQL Hosting 速率较量慢，也没有 root 权限，可是测试足够用了，其他的用户数据、图表、看板等则是用了 leancloud 的工具存储。

首要成果点和实现道理

起首先容项目标首要成果点及实现道理：

1. 通过拖拽字段查询数据

这个成果首要是通过构建 SQL 语句来查询数据库，在后端的查询是用 Presto 来做的，Presto 可以同一查询多种数据库，除了传统的相关型数据库还可以查询 HDFS，查询手段较量强盛。前端部门数据查询首要是通过对 SQL 语句的解构，分别成维度、数据、筛选、排序、数据条数等交互元素，便于没有 SQL 基本的用户行使。用户在前端的交互凭证特定语礼貌则动态天生 SQL 发送到后端举办数据库的查询。虽然今朝 SQL 的构建成果还不完备，有一些 SQL 语法尚有待支持，已经列入了开拓打算中。

2. 对数据举办可视化渲染

对数据举办可视化渲染首要是通过数据查询的维度和数值来判定可用的图表范例，然后操作 vue.js 的动态组件来渲染对应的图表组件：

// Vue.js 动态组件渲染对应的图表范例 
<component :is="currentType.componentName" :data="chartData" :schema="schema" :chart-style="chartStyle" class="visualize-window" />  

这里有一个题目是图表与数据的映射相关的题目，差异的数据适实用差异的图表来展示，譬喻饼图的数据跟堆叠柱状图的数据就纷歧样，因此必要对各个图表所必要的数据布局举办界说：

// 这是饼图的匹配法则界说 
matchRule: { 
    desc: '1个维度1个数值;0个维度多个数值', 
    isUsable(dimensions, calculs) { 
        return (dimensions.length === 1 && calculs.length === 1) || (dimensions.length === 0 && calculs.length >= 1) 
    } 
}, 

然后按照匹配法则来判定图表范例是否可用。

3. 图表的生涯和回显

前端天生图表后就可以生涯到后端了，因为界说一个图表所必要的字段太多，并且这些字段还也许会常常增减窜改，因此不太也许让后端在数据库一必然义这些字段，因此我们回收的方案是由前端来维护这些字段，后端同一将全部的内容以字符串可能 json 工具的方法存在数据库的一个字段(如 content)中。

这样一来图表的回显题目也就没有任何题目了，凭证天生图表的逻辑把 content 字段的内容理会出来就好了。

4. 图表整合到看板

许多时辰营业都必要同时查察多个图表，这个时辰就必要一个看板来整合多个图表。看板着实是指 Dashboard，中文着实没有很贴切的翻译可以对应，看板始末达意。

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!