数据可视化之组件开发

标签：数据可视化分类：前端创建时间：2019-12-03 10:20:36 更新时间：2023-10-20 11:23:27

数据可视化还是一个很大的命题的。根据知乎上：如何考察一个候选人的前端数据可视化水平?提到了以下几点，我觉得非常的有用：

用过d3的同学，能否讲讲d3的layout是什么概念，如何作用到svg上的？讲讲d3 的data()方法的实现？ 讲讲d3.geo中，常见的投影方式？用过echarts的同学，了解zrender吗？他跟市面上的一些canvas引擎的区别？用过three.js做仿真的同学， 了解gltf, dae, obj等模型格式吗，他们是如何互相转换的？ 如何在页面中渲染几十万个立方体？如何做多边形的碰撞检测？做过bi的同学，能讲讲olap的概念，星型模型和雪花模型的区别，以及定义维度和度量的情况下前后端如何通信？ 如果不想用内置的可视化组件如何使用第三方的快速接入？ 如何做下钻，透视？做过gis的同学，能讲讲地图瓦片是如何绘制的？不同的坐标系如何进行转换？geojson和topojson的格式和区别？了解常见的分析模型吗，如商品abc分析？基础知识：如何做canvas的事件监听，拖拽？ canvas和svg的适用场景？ svg的视口如何控制？

比较成熟的图表:

AntV
ECharts

参考文章：
1.如何考察一个候选人的前端数据可视化水平
2.如何做大屏数据可视化设计？超全面设计指南

1.三维组件

进来随便浏览网页，竟然找到了一个不错的博客地址，里面丰富的展示了大屏数据展示以及使用Cesium进行数据展示的特效。上图吧

这里有这么多的案例

参考文章：
1.[ol-cesium]二三维联动 | 基于2019肺炎疫情的数据可视化 (题目就是内容，就不解释了，上车)
2.[nodeJS] 快速搭建web服务器提供api服务 | 云函数爬虫 (数据展示与爬虫分不开，于是就有了nodejs爬虫)
3.三维示例
4.OSM数据下载网站
5.Web3D学习-城市交通可视化Demo 这是一篇三维可视化的文章，包括用到的技术，使用的地图以及绘制方法等，都有了简单的介绍。
6.threeJs|开源示例和可视化 (1)

2.工业组态组件

最近有一个需求，就是有没有成熟的，可以直接拖动图片生成流程图的软件，给出的一个名词就是工业组态组件。我一查，还真有这么个东西。

参考文章：
1.工业4.0：换热站最酷设计—— Web SCADA 工业组态软件界面 (这里实现了一个现成的界面，有换热站、水流动态效果)
2.组态 web组态组态插件编辑器工业组态物联网组态组态编辑器 (这篇文章其实实现了一个动态绘制的功能，软件提供多种工业中用到的组件，比如仪器仪表锅炉等，然后可以拖动相关的图片，生成一个流程图)
3.组态 web组态插件编辑器使用说明书 (上面的一个说明书)
4.有没有前端好用的画流程图的组件？ (绘制流程图的开源讨论，还有GGEditor,这里还有其他的几个插件的对比，draw.io、aworkflow.js、flowchart.js、mermaidjs)
5.最火前端Web组态软件(可视化) (这里还提到了le5le-topology、HT-2D/3D、3D可视化楼宇水站实时监测系统、前端设计Mqtt、OSHMI、HslControls控件库、VUE组态-支持拖动等等，文章的最后，开源不易，希望如果有公司使用了开源的技术和软件，记得回报开源，不要挣到了钱，还不愿意拿出资金扶持开源产品。我尝试了其中的Ht-2D，好像功能还是挺多的，是在mxGraph的基础上发展而来的，添加了很多的功能)
6.国内外组态软件 (这个就比较老了，感觉大部分都是桌面软件)
7.乐吾乐物联网低代码平台来啦！就像名字一样，就是用少量代码的方式，创建不一样的物联网平台，可以支持MQTT协议，可以拖动生成组件，可以生成大屏技术等。

3.滚动表格

使用动画，可以实现滚动效果

.animation
    animation moving 60s linear infinite
    &:hover
        animation-play-state paused
/*定义动画*/
@keyframes moving {
    form {
        transform translateX(0)
    }
    to {
        transform translateX(-50%)
    }
}

参考文章:
1.vue2.x 实现数据可视化大屏（可交互气泡地图、数字滚动、表格滚动、列表轮播、饼图轮播、圆环图）这个是一整个的项目实践，还有源码，主要有可交互气泡地图 (使用的是阿里开源的 antvL7 );自定义数字滚动器、数据圆环;表格、列表滚动（自定义了部分）（DataV）;饼图、圆环图（使用的是百度 echarts）
2.vue 大屏滚动实现利用marquee和element-ui table 主要利用了marquee
3.vue-seamless-scroll 无限滚动的vue插件
4.Vue无缝滚动上面插件的一个例子
5.轮播表

4.其他

拖拽
Vue.Draggable(Sortable.js)、vue-draggable-resizable
栅格
vue-grid-layout
图片生成
html2canvas
颜色选择
vcolorpicker
表单生成
vue-form-maker

参考文章：
1.推荐几个数据大屏可视化开发工具这篇文章倒是让我想到了在大屏可视化开发中，用到的比较好用的功能：Vue.Draggable(Sortable.js)、vue-draggable-resizable、vue-grid-layout、 html2canvas、vcolorpicker、vue-form-maker

5.可拖拽组件

参考文章:
1.Fabric.js demos · Kitchensink 这里有很多的实例，包括添加svg到canvas，拖拽，旋转等操作。
2.Fabric.js 拖拽添加元素先建立两个 div 节点，一个放素材，一个放Canvas。素材节点每个素材绑定 @dragstart 方法，这个方法用来获取拖拽开始时的事件信息，从这里我们能获取到选中的元素和鼠标在这个元素的相对位置这两个关键信息。Canvas 节点绑定 @drop 方法，这个方法用来获取拖拽结束时的事件信息，从这里我们能得到鼠标相对于Canvas节点的位置。这样，所需就全了。
3.Fabricjs做组态和流程图-认识Fabricjs（1）
4.图片在 canvas 中的选中/平移/缩放/旋转，包含了所有canvas的2D变化，让你认识到数学的重要性 1、添加多张图片或者文字到 canvas 。( 这里没有添加文字，我们可以先把文字利用canvas转为图片，然后添加 canvas 上 )2、图片的缩放，根据选择不同的点实现不同缩放。3、图片移动，改变图片在 canvas 的中心位置。4、图片旋转，根据旋转点在移动的角度进行旋转。5、图片选择，两种方式：一种根据图片的位置，确定当前选择的图形，第二种是点击列表选择。6、数据的保存，提供了保存按钮，保存图形的位置和大小以及旋转角度。7、初始化数据，通过之前保存的数据，重新绘制。
5.有哪些用 JavaScript 实现的图形库？
6.canvas 多个图形可视化操作:拖拽、缩放、旋转写了简单的示例，对canvas中进行选中、缩放和旋转，还有一些问题：多个图形时判断点中物体出错、多物体时候绘制出错的原因等问题的解决。

往期推荐

文章目录

微信公众号

广告位

诚心邀请广大金主爸爸洽谈合作

每日一省

isNaN 和 Number.isNaN 函数的区别？

1.函数 isNaN 接收参数后，会尝试将这个参数转换为数值，任何不能被转换为数值的的值都会返回 true，因此非数字值传入也会返回 true ，会影响 NaN 的判断。

2.函数 Number.isNaN 会首先判断传入参数是否为数字，如果是数字再继续判断是否为 NaN ，不会进行数据类型的转换，这种方法对于 NaN 的判断更为准确。

每日二省

为什么0.1+0.2 ! == 0.3，如何让其相等?

一个直接的解决方法就是设置一个误差范围，通常称为“机器精度”。对JavaScript来说，这个值通常为2-52，在ES6中，提供了Number.EPSILON属性，而它的值就是2-52，只要判断0.1+0.2-0.3是否小于Number.EPSILON，如果小于，就可以判断为0.1+0.2 ===0.3。

每日三省

== 操作符的强制类型转换规则？

1.首先会判断两者类型是否**相同，**相同的话就比较两者的大小。

2.类型不相同的话，就会进行类型转换。

3.会先判断是否在对比 null 和 undefined，是的话就会返回 true。

4.判断两者类型是否为 string 和 number，是的话就会将字符串转换为 number。

5.判断其中一方是否为 boolean，是的话就会把 boolean 转为 number 再进行判断。

6.判断其中一方是否为 object 且另一方为 string、number 或者 symbol，是的话就会把 object 转为原始类型再进行判断。

每日英语

Happiness is time precipitation, smile is the lonely sad.

幸福是年华的沉淀，微笑是寂寞的悲伤。