首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
宝塔
V2EX  ›  分享创造

恬不知耻地分享一下自己的项目:一个用 Vue 撸的数据可视化后台

  •  6
     
  •   dongsuo · 153 天前 · 4901 次点击
    这是一个创建于 153 天前的主题,其中的信息可能已经有所发展或是发生改变。

    首先放个线上地址大家感受一下(由于后端用的是 leancloud 的免费套餐,因此可能会比较慢):

    vue-data-board

    P.S. 建议大家尽量自己注册一个账号(可以随便填一个密码),如果用默认的测试账号,不要乱改东西,否则别人进来就没得看了,因为你做的任何改动都会保存到后端数据库里。

    再放几个 GIF 吸睛:

    拖拽实现数据的查询和可视化

    向看板中添加图表

    通过拖拽自定义看板布局

    缘起

    也不知道为什么,公司里对数据分析、数据可视化的需求越来越多。这部分需求有的来自数据分析师(如果公司有数据分析师的话),有的来自产品、运营、开发,还有的来自公司的中层、高层领导,有的只是要把某一个表的数据导出,也有的希望能从多个维度对数据进行分析、可视化,还有的希望把多个可视化图表整合在一个页面中形成可视化的报表,有的是一次性的需求,有的是周期性的常态化需求,这些需求常常杂乱无章,而且数据的维度很多,交互比较复杂,可视化图表的各种参数众多,很难做到通用,而且很多数据较为敏感又需要严格的权限控制,时间一长,权限的管理又成了一个头疼的事情,种种因素导致各种数据需求耗费了前端开发的大量精力,发量日渐稀薄。

    相信很多公司都会有类似的数据需求,零散却必须,虽然市面上也有不少产品提供了类似的数据管理功能,但是一来由于数据的敏感性,许多公司不愿意将自己的数据放到别的平台上,二来这些数据管理的产品大多收费昂贵且功能难以定制。所以很多公司里这种数据需求就会落到前端的头上,这些需求虽然零散甚至临时,但是实现起来却并不简单,可视化的视觉效果需要各种参数去配置,而大量的数据需要验证、清洗、转换又使得接口调试和对接变得十分麻烦,增加了前端的工作量,也让前端的 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,中文其实没有很贴切的翻译可以对应,看板勉强达意。

    看板整合多个图表在后端而言只是一个关联关系的管理,对前端而言则需要根据看板关联的图表来对页面进行布局,然后根据保存的图表来查询数据、可视化渲染。页面布局主要是利用了 vue-grid-layout 进行 grid 布局,同时也支持拖拽和大小调整等。可视化的逻辑跟创建图表时的可视化是一样的,不再赘述。

    这里遇到的问题是对于已有布局的看板,添加新图表时,新图表的定位要如何计算。这其实跟图片瀑布流的问题有些相似,但是由于各个 item 不定宽高,其实相对更难一些,我已经找到了思路,做了一些计算,但是目前还不完善,完善后我会再写文章来介绍。

    5. 数据的权限问题

    公司的数据其实相当敏感,对于上市公司而言,数据会影响股价走势,对非上市公司来说,会影响投融资的进度,都是关系到公司财务甚至生死存亡的大事,因此数据的权限管理是十分重要的。在这个项目里,这一部分的解决方案其实并不简单,但是复杂度主要在于后端而不是前端。简单来说,我们的权限是做到了数据表这一层级,由管理员向系统中添加数据源,添加的同时定义好该数据源的权限范围,如产品、运营、开发等权限角色。用户进入系统后,由管理员给用户分配权限角色,用户只能查询其自身对应角色所能查看的数据。由于权限和数据源管理的部分暂时还没有添加到这个开源项目中来,因此也就不细说了,先挖个坑,以后有机会再填。

    6. 其他技术点:

    • 首先项目的构建是用了 [email protected],除了默认的配置之外,还通过 vue.config.js 做了一些自定义的配置。另外还有环境变量的配置等等,项目的配置方面建议参考潘神的这篇文章:

      手摸手,带你用 vue 撸后台 系列五(v4.0 新版本) - 掘金

    • 项目中用到了很多 icon,虽然Element UIicon 在 2.8.x 版本之后增加了不少, 但是还是不能满足我们的需求(一些常用的 icon 仍然没有,比如保存),因此需要自己来解决 icon 的问题,这里要感谢 iconfont 上的设计师如山提供的这套漂亮的数据可视化图标库。至于 icon 如何优雅地管理使用,再次祭出潘神的文章:

      手摸手,带你优雅的使用 icon - 掘金

    • 项目的后端接口文档我是用的 postman 进行的管理,其实 postman 有很多强大的功能,不仅仅是一个接口测试工具,接口文档管理就是其中一个。我在开发时一般是在本地同时起前端和后端两个项目,本地开发时通过环境变量判断接入本地的后端接口地址:

        const fetchInstance = axios.create({
        	baseURL: process.env.VUE_APP_BASE_API
        *}*)
      

      本地开发完成后,前端打包发布到 gh-page 分支( git subtree push --prefix docs origin gh-pages ),后端通过 leancloud 提供的 cli 工具一键部署,还是挺方便的。前端的打包发布其实可以配置 Travis-ci 来实现自动部署,我暂时还没有配(已弃疗的拖延症患者在此)。

    • 项目的登录授权、图表和看板的增删改查等都是使用了 leancloud 提供的解决方案,其实利用 leancloudjs-sdk ,前端也可以很方便地实现对象存储的增删改查,不需要写后端接口。但是为了保持项目代码的纯洁,避免代码中引入奇奇怪怪的 AV.query 这种东西,我还是自己做了后端的部分,当然这部分也做的比较简单,毕竟只是一个 Demo,主要就是基于 koa.js 做的的一些增删改查,基本上是面向文档编程。

    • 项目里的状态管理用到了 vuex, 但是其实目前为止并没有很多全局状态管理的需求,只有用户 token 保存在了 store 里。另外关于状态管理,我在这个项目的创建图表的部分还尝试用了 Vue 的简单状态管理模式( 代码在此 ),掘金上有一篇文章介绍过这个模式:

      为管理复杂组件状态困扰?试试 vue 简单状态管理 Store 模式 - 掘金

      这个模式用起来是没问题的,对于大型项目里的复杂组件来说是很好用的,很方便地解决了复杂组件内部的状态共享问题。但是目前对于我这个项目而言并不是特别适用,因为这部分的状态管理放在全局状态也挺合适,当然这里是见仁见智了,我觉得就目前这样也挺好。

    最后

    这个项目的核心功能目前算是已经完成得七七八八了,还有一些功能很不完善,后期会逐步完善起来。数据分析可视化平台国内社区里的讨论貌似不多,一些中文的讨论大多是设计和产品方面的介绍,而且过于理想化,在实践中可能不太容易落地,关于技术实现的讨论不多(当然后端和运维方面还是比较多的),开源项目也没见多少,因此我这个项目也算是做了一些探索,当然我没多少经验,虽然参考了几个商业平台的产品交互设计,但是很多地方都是摸着石头过河,有些地方应该会有更好的解决方案,希望我的这个项目可以抛砖引玉,也希望大家能够多提意见。

    第 1 条附言  ·  152 天前

    不好意思各位,由于用的是 leancloud 的开发版,因此 api 调用是有次数限制的,今天的 API 调用总次数已超过开发版限制。 感谢各位 V 友的热情支持,各位明日请早吧,抱歉抱歉。

    52 回复  |  直到 2019-11-18 23:25:21 +08:00
        1
    cqcn1991   153 天前 via Android
    挺不错的。希望楼主可以仔细再展开讲讲各方面的设计考虑
        2
    dongsuo   153 天前 via Android
    @cqcn1991 嗯,后面计划把细节再讲清楚一些,放在一篇文章里有点太长了
        3
    andylsr   153 天前 via Android
    恬不知耻的 star 了
        4
    dongsuo   153 天前
    @andylsr 哈哈哈,感谢支持
        5
    ChiangDi   153 天前
    不支持 group by ? 另外作图方式跟 metabase 非常像
        6
    xiaolanger   153 天前
    我很想知道,楼主是怎么学会设计的,我怎么一写 css 就不知道怎么下手了。。。
        7
    dongsuo   153 天前 via Android
    @ChiangDi group by 是支持的,其实是会按照维度来 group,metabase 我还真没研究过,我去学习一下
        8
    dongsuo   153 天前 via Android
    @xiaolanger 不会设计呀,都是 element UI 的现成组件
        9
    xiaolanger   153 天前
    @dongsuo #8 为什么我用了 element UI,做出来的还是那么丑。。。尴尬了,我再去看看去
        10
    ResidualWind   153 天前   ♥ 1
    不错 不错 已关注
        11
    Vendettar   153 天前   ♥ 1
    star 了,学习学习,谢谢楼主。
        12
    moocean   153 天前
    bi,这部分还是挺多的,不过大多开源的都是结合 SQL 查询,然后以结果集为基础做的可视化,我们做了一个,拿到结果集,将 SQL 语句部分改成变量,然后,再图标编辑器中写代码,生成报表,和你的生成方式不一样,其他差不多
        13
    chaoshui   153 天前   ♥ 1
    star 了,感谢楼主
        14
    dongsuo   153 天前
    @moocean 嗯,听起来感觉差不多,只是我这个项目是基本完全避免写代码,主要是公司里的很多需求方根本不会写……只能搞这种傻瓜式的拖拽来满足这部分需求
        15
    dongsuo   153 天前
    @moocean 另外类似的开源项目我见到的不多……不知道是不是我的关键词选错了,可以给几个搜索关键词我去找来参考一下吗?
        16
    daweibao   153 天前
    @dongsuo superset \ cboard
        17
    sujin190   153 天前
    不错不错,话说能不能加个一个 access token 之类的授权 dashboard 的方式啊,很多情况写完后台还有加图表,自己写真是类似,如果能通过 access token 的方式把 dashboard 放到自己后台不要太方便啊
        18
    lc1450   153 天前
    最近也在做前端数据可视化, 看过 Grafana,觉得不错,开始设计思路和楼主相似, 动态组件根据配置生成图表,用户可以自定义设计图表

    不过项目赶时间(我一个人负责),准备搞成由管理员统一设计图表,配置数据源,用户只用选择是否显示该图表
        19
    itqls   153 天前
    star 了,最近刚好想搞一下公司的数据分析,话说地域统计也可以加上
        20
    dongsuo   153 天前
    @daweibao 感谢感谢,superset 有研究过的,其实有些地方就是对标 superset,cboard 看起来做得很棒,改天研究下
        21
    dongsuo   153 天前
    @lc1450 赶时间的话确实要牺牲一些功能了,在此我要感谢公司给我时间瞎折腾(捂脸
        22
    dongsuo   153 天前
    @sujin190 你的意思是说通过 iframe 的方式把 dashboard 放到自己后台吗?这个主意不错,应该是可以做的
        23
    dongsuo   153 天前
    @itqls 其实还有很多图表类型很快就会加上的,敬请期待😝
        24
    sujin190   153 天前
    @dongsuo #22 对的对的啊,强烈需求,用过 superset 可以这样,但就是没有一个方便的授权方式,很不方便了
        25
    dongsuo   153 天前
    @sujin190 也就是除了能够分享出去,还要有授权的人才能看,是这个意思吗?但是讲真我这个项目只是一个 demo,就算我做了这个功能,你也要自己去搭一个项目才行呀
        26
    98jiang   153 天前
    请问手机上显示效果如何
        27
    dongsuo   153 天前
    @98jiang 啊,你戳到了我的软肋,但是我是想这种工具不会在手机上使用的吧……
        28
    ningbo16   153 天前
    没接触过这方面的知识,感觉不错
        29
    forever139   153 天前
    挺好,学习一个。
        30
    98jiang   153 天前
    @dongsuo 老板和领导可能会用~
        31
    duck2u   153 天前
    { "code": 140, "rawMessage": "今天的 API 调用总次数已超过开发版限制。" } 打扰了?
        32
    dongsuo   152 天前 via Android
    @98jiang 嗯嗯,可能会为移动端的查看做一下适配,操作的交互还是只能在 PC 端做
        33
    dongsuo   152 天前 via Android
    @duck2u 纳尼...这个已经这么火了吗
        34
    slamDunkLINk   152 天前
    没有看到 GIF 额..登录限制了
        35
    dongsuo   152 天前
    @slamDunkLINk GIF 有点大…… 不好意思,由于用的是 leancloud 的开发版,因此 api 调用是有次数限制的,今天的 API 调用总次数用完了。
        36
    chengxiao   152 天前
    { "code": 140, "rawMessage": "今天的 API 调用总次数已超过开发版限制。" }
        37
    1ffree   152 天前
    今天的 API 调用总次数已超过开发版限制。 [400 POST http://api.leancloud.cn/1.1/login]
        38
    npe   152 天前
    登录 Button 一直在 loading。。 看到这就不想继续看了
        39
    dongsuo   152 天前
    @1ffree
    @chengxiao
    @slamDunkLINk
    @duck2u
    切换了一下 leancloud 账号,又可以愉快地拖拽啦
        40
    dongsuo   152 天前
    @npe 啊啊啊,一个小 bug,对不起对不起,刷新下页面就好啦,我会尽快修掉哒
        41
    renmu   152 天前 via Android
    哇⊙∀⊙!好评感谢!最近在公司也在搞数据可视化!码住!
        42
    dongsuo   152 天前 via Android
    @renmu 感谢支持,能有帮助真的很开心
        43
    slamDunkLINk   152 天前
    看到了,挺好的,支持楼主
        44
    dongsuo   152 天前
    @slamDunkLINk 感谢支持
        45
    jabin88   152 天前
    做得很好,请坚持下去
        46
    dongsuo   152 天前
    @jabin88 谢谢
        47
    jerry12547   152 天前
    network error
        48
    dongsuo   152 天前
    @jerry12547 感谢提醒,服务器资源用尽了,已经切换了备用节点
        49
    bysslord   151 天前 via iPhone
    楼主用过 bdp ?怎么这么像?
        50
    dongsuo   151 天前 via Android
    @bysslord 是的,可耻地参考了很多产品和交互设计🤣🤣
        51
    mader   16 小时 57 分钟前
    楼主还在维护吗?看到你这个东西正需要,特别想要有一个能将数据库数据可视化,方便拉取数据分析。
    部署方案能否简化?能让产品和运营使用的,不是很会代码,按你的教程,到后面不知道怎么操作了 sad
        52
    dongsuo   15 小时 45 分钟前
    @mader 这个项目确实有简化部署的想法,但是即使再简化,如果你对代码不熟悉的话,可能还是不那么容易就搭起来的
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   4012 人在线   最高记录 5043   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.3 · 24ms · UTC 07:10 · PVG 15:10 · LAX 23:10 · JFK 02:10
    ♥ Do have faith in what you're doing.