数据大屏的核心模块组件库拖拽(自由拖拽, 参考线, 自动提示)画布渲染器
属性编辑器
撤销重做 react-undo
标尺，参考，网格线

编辑器

  • react-monaco-editor
  • react-codemirror2

react可视化编辑器
https://zhuanlan.zhihu.com/p/94016600

生成缩略图

  • dom-to-image
  • html2canvas

https://blog.csdn.net/supermapsupport/article/details/104789521
迭代速度够快的话赶上百度sugar 应该还可以，
比起datav 就差很多，官方最近迭代速度很快，3D编辑器都出来了

vue数据大屏开发

https://juejin.cn/post/6875249819250606087
https://juejin.cn/post/6844904158181457933
https://juejin.cn/post/6844903683411410951
数据采集、清洗、分析到直观实时的数据可视化展现
数据可视化本质：数据驱动决策
目前市场的数据可视化参考
https://www.yuque.com/arvinxx/hci-lab/34bf8124-2905-4b23-841b-0a220ca7dbee

数据大屏实现思路

  1. 使用H5 dragable API拖拽，左侧组件(component data)进入目标容器(targetBox)
  2. 监听拖拽结束事件，拿到拖拽事件传递的data来，渲染真实的可视化组件
  3. 可视化组件挂载, schema注入编辑面板, 编辑面板渲染组件属性编辑器
  4. 拖拽, 属性修改, 更新
  5. 预览, 发布

总结：Schema规范

  1. 宽高比锁定，缩放时自适应屏幕，页面布局不能错乱
  2. 物料中心
    1. 图表组件
    2. 预设模板
    3. 图片组件
    4. 文字组件
    5. 媒体组件
  3. 数据中心
    1. 通用的数据库
    2. 规范的数据结构
    3. 第三方数据
  4. 编辑器
    1. 拖拽布局
    2. 组件动态加载
    3. 表单渲染
    4. DSL规范
  5. 辅助功能
    1. 标尺
    2. 参考线
    3. 网格
    4. 自动吸附对齐