如何用vue框架做大屏可视化？使用心得和好用的替代工具

现在越来越多公司引入可视化大屏，不仅炫酷，而且能更直观的看到各个维度的数据！现在收费的大屏可视化服务很多，比如阿里云datav、百度Sugar、腾讯云图等。vue框架大屏可视化，因为开源免费功能又好，也很热门，本文就来介绍如何用vue框架做大屏可视化、使用心得，以及好用的替代工具。

一、如何用vue框架做大屏可视化？

一般来说，用vue框架做大屏可视化，会结合其他工具。比如我用的编码工具：Visual Studio Code；js框架：vue；接口对接：axios。

步骤流程：

（1）由于宽高的不确定性，做组件的第一步是获取组件在大屏上的宽高 。

（2）宽高确定了，组件内部的元素和字体大小要进行相应比例的放缩，达到自适应的效果。我使用的是d3和bizchart来完成图的绘制，d3中我大量使用了linearScale进行插值计算，而bizChart就更为简单，框架帮你完成了自适应。

（3）增加动画元素。

（4）在做组件的过程中，还需注意组件内部的样式，不能影响外部。

二、vue框架大屏可视化的使用心得

用Vue做基础的框架是绝对合适的，就现在运用的情况来说，Vue适合95%的网页应用开发，几乎任何的网页应用Vue都有对应的解决方案。

而且Vue开发效率极高，甚至由于它组件化的特性，尤其适合完成一些需求不明确或一直变化的，而最终的产品就是一个在需求不明确的情况下，慢慢变成一个产品的。

缺点就是，开源的产品，要开发一款可视化数据大屏可不容易。期间还要掌握很多很多的知识。

三、vue框架大屏可视化的替代工具？

1、FineReport

FineReport个人使用是免费的，大部分组件设置宽高或配置简单的数据即可使用，通过组合不同的配置项可以达到多变的视觉效果。帆软公司也在长期维护，不断添加新组件以丰富组件库。

2、DataV

DataV组件库基于Vue （React版） ，主要用于构建大屏（全屏）数据展示页面即数据可视化，具有多种类型组件可供使用，视觉绚丽。不过，要开发一款可视化数据大屏可不容易，其实用起来还是感觉FineReport更顺手。

四、Vue和React可视化组件的区别

近期分别使用了 React 和 Vue 框架完成了两个大屏可视化案例，两个技术栈写组件，有共同的组件，不需要整个重写，只需要改写即可。改写的过程中，我也比较深刻体会到了两者的不同。比如获取宽高的方式：

React获取宽高的方式比较标准，分为三步:在render的时候ref，在did的时候取值，在构造方法create。在生命周期函数的钩子里实现相应方法即可。

Vue获取宽高的方式更自由一些，直接在mouted钩子里就可以拿到相应组件的clientWidth。