数据可视化引擎从0到1搭建学习

数据可视化大屏现在非常热门,那么经过阅读参考一些文章数据可视化从0到1我们需要做的是这样几个步骤

目录

一、页面大致布局确定界面

二、组件库

三、拖拽器

四、动态渲染器

五、配置面板

六、控制中心

七、辅助功能


一、页面大致布局确定界面

参考阿里云的datav我们可以发现他的静态页面是这样的

那么我们可以将页面分为左中右三个区域,左面我们成为组件去,主要是用来存放组件以及图层;右面我们称之为配置区,主要用来设置组件的外观,配置数据已经设置页面的交互;中间我们称为画布。

二、组件库

组件库我们可以同样参考阿里云的datav,来定义一套组件结构和属性协议

图表 地图 信息 表格 控件 媒体 素材 模型 其他

 

 那么图表部分,我们可以选择的库有很多

 1.echarts  我们可以去MCChart 这里找许多样式的图表

 2.datav 亮点是有动态装饰效果,样式比较科技感,与其他库搭配使用 官网介绍 | DataV

 3.AntV

 4.g2

三、拖拽器

拖拽功能是们搭建可视化引擎的最核心部分,我们可以用原生的js来实现,也可以用成熟的拖拽库来实现他

1.react-beautiful-dnd 漂亮,可移植性 列表拖拽库

2.react-dnd 可帮助我们构建复杂的拖放界面,同时保持组件的分离

3.react-moveable 支持自由拖拽, 缩放, 参考线的灵活强大的拖拽库

4.react-grid-layout 强大的网格拖拽排序缩放库

5.mixitup 强大且高性能的列表卡片排序动画库

我们还可以设置参考线, 对齐线, 吸附等, 并且可以在拖拽的不同时期(比如onDragStart和onDragEnd)做不同的业务逻辑。这些 Moveable 都提供了对应的api支持, 大家可以参考使用。

四、动态渲染器

组件从左侧组件栏拖动到画布上之后,组件才开始真正的渲染,每个组件都是异步加载的(待学习)

五、配置面板

(待学习)

六、控制中心

(待学习)

七、辅助功能

(待学习)

猜你喜欢

转载自blog.csdn.net/weixin_45818290/article/details/126606657