search

zhaobinglong / myBlog

https://zhaobinglong.github.io/myBlog/
MIT License
7 stars 0 forks source link

大屏可视化开发方向 #126

Open zhaobinglong opened 3 years ago

zhaobinglong commented 3 years ago

目标

可视化拖拽大屏实现，UI组件拖拽进入，数据和视图剥离，私有部署。 image

参考

阿里dataV，非常优秀的目标产品，重度参考，https://datav.aliyun.com/ 百度echarts，优点是各种二维图的构建，可以用来构建组件卡片，https://echarts.apache.org/examples/zh/index.html 华为可视化，跟dataV非常类似，https://www.huaweicloud.com/product/dlv.html 伟岸纵横，3D可视化，http://www.vrgvtech.com/index.php 开源的移动小网页拖拽，http://dsmorse.github.io/gridster.js/demos/adding-widgets-dynamically.html 达实智能，访问不到他们的内部系统，http://www.chn-das.com/ 网易，https://demo.youdata.163.com/

构建自己的可视化框架构建

风格参考万达 交互参考dataV 基于开源框架进行快速开发

zhaobinglong commented 3 years ago

开源图形库

https://threejs.org/ https://d3js.org/ https://g2.antv.vision/zh https://github.com/antvis/g6 https://github.com/antvis/L7/，地理图可视化

zhaobinglong commented 3 years ago

可用资源

拖拽 vue-draggable-resizable

vue-draggable-resizable组件用于可调整大小和可拖动的元素，且没有第三方库依赖。数据大屏开发中，可用于做画布中组件大小的调整。 文档链接

截图做封面 html2canvas

html2canvas 可以轻松地帮你将HTML代码转换成Canvas，数据大屏开发中，可用于做大屏的图片生成，通过静态图片生成来分享数据。文档链接

颜色选择器 vcolorpicker

vcolorpicker是vue颜色选择器组件，是仿照Angular的color-picker插件开发的 在数据大屏开发中，可用于做背景色等进行颜色选择 文档链接

不过还是建议使用第三方组件库的颜色选择器，比如element组件库的ColorPicker，用户体验更佳

zhaobinglong commented 3 years ago

参考开源项目

H5可视化拖拽生成 https://github.com/MrXujiang/h5-Dooring 有demo：https://juejin.cn/post/6908502083075325959#comment