前言:
本系列文章会讲诉我这一年来,独立开发了一个项目叫数据可视化,附上链接 [https://github.com/chuxiaoguo…],欢迎大家 star,市面上现阶段可以看到类似的有,
- 阿里的 dataV[https://data.aliyun.com/visua…]
- 百度的 sugar[https://cloud.baidu.com/produ…]
当然还有其他的,这里就不过多介绍了。
那什么是数据可视化,我个人的理解就是枯燥乏味的大数据通过图表的丰富展示,以一种快速,易懂的形式展示给用户,一般的应用场景就是数据展示,告警提醒,实时消息推送等。
当然我这个项目的规划还能通过对图表的控制,通过物联,控制硬件设备。数据可视化只是一个模块,它还能囊括组件事件交互,定制行业组件,形成一套行业定制方案。类似 scada。
项目准备工作
需求的整理和蓝图的构建,这里我们用思维导图规划一下
项目
我们认为一个项目就是你即将构建的一个系统,或一个可视化项目
页面
如果将整个项目比喻为一颗系统树,那么项目就是根节点,那么页面就是子节点了,顾名思义,页面就是项目中的一个个的页面。
图元
图元是最基础的元素,构成页面的基本元素就是图元,它是丰富的,可以是图表,可以是基础的图形,可以是表格,可以 3D 的图形 … 只要你愿意,万物皆图元。
组件
组件分为内置组件,和用户组件,区别就是用户组件是用户生成并添加的,内置组件就是编辑器内置的。组件是由一个或多个图元组件并构建的。
工具
工具指编辑器画布内的功能,工具中有历史,粘贴板,删除等功能,这些丰富的功能能提高用户构建大屏项目的效率。
母版
母版跟组件是很像的,区别在于母版具备一改全改的功能,类似静态属性一样的。
这里是大概的规划,以后对于元素,组件,页面,项目等的细节我们会重新梳理,但是大体方向就是这样的。
目标
我们要基于这些的基础,打造一个配置可视化的编辑器,当然如果你想做原型设计或是 uml 也是可以支持的,因为它足够灵活。
下一期我将给大家介绍如何通过 vue 构建基础的模型编辑器框架,以及框架应该如何选择。