你将收获
可视化大屏产品设计思路
主流可视化图表库技术选型
大屏编辑器设计思路
大屏可视化编辑器Schema设计
用户数据自治探索
在介绍之前, 我们先看看实现的效果展示....大屏编辑器设计思路
在上面的分析中我们知道一个大屏编辑器需要有个编辑器核心, 主要包含以下部分:
组件库
拖拽(自由拖拽, 参考线, 自动提示)
画布渲染器
属性编辑器
如下图所示:
组件库我们可以用任何组件封装方式...配置面板设计
实现配置面板的前提是对组件 Schema 结构有一个系统的设计, 在介绍组件库实现中我们介绍了通用组件 schema 的一个设计案例, 我们基于这样的案例结构, 来实现 动态配置面板。..., 也可以自己实现, 实现原理:
有点链表的意思, 我们将每一个状态存储到数组中, 通过指针来实现撤销重做的功能, 如果要想更健壮一点, 我们可以设计一套“状态淘汰机制”, 设置可保留的最大状态数, 之前的自动淘汰...标尺参考线 标尺和参考线这里我们自己实现, 通过动态dom渲染来实现参考线在缩放后的动态收缩, 实现方案核心如下:
arr.forEach(el => {
let dom = [...Array.from