关于数据可视化的web前端

发布时间:2025-05-16 05:28:02 发布人:远客网络

关于数据可视化的web前端

一、关于数据可视化的web前端

1、所谓数据可视化的web的前端其实从一个广义角度讲，跟传统网页开发没有什么区别。都是数据模板，组件化模块化也都是类似。前后端分离什么的，也是跟传统网页开发没有两样。现在node作为中间层来做分离方案是比较多(天猫的wormhole,淘宝的midway),数据处理交给java或者其他更适合的，node用来做密集IO和模板展现。（但是对于体量不大的应用，其实不需要考虑这么多）

2、要不要做成单页面应用提高体验取决于你的应用还得看场景，还有开发复杂度等因素（其实一开始不建议做成单应用，除非一开始就有完整的规划）。如果类似Google Analytics的程序，也不是整站都直接单应用，还是取决于场景。因为往往在网页中单应用的形式，往往复杂度都会高很多，处理的问题也会叠加，图表的性能问题，内存问题，持久性问题，过场的问题等等，都是需要考虑的。

3、之前我做过一个项目，其实都没用组件库(当然后来维护问题会很多,也不够优雅)。但是对于构建组件库，无论是Polymer、react感觉都可以，react这么火，但是还是选自己比较熟悉的更好。

4、前端框架上最好还是mvvm的框架，vue, angular, react都很不错，用过vue，现在更倾向于使用react。图表展示，是更重数据交互的，所以肯定是开发以数据驱动的方式来。图表库来说，echarts是比较牛逼的了，底层是canvas，百度开源的。highcharts是svg的，老牌牛逼图表库，商业使用需要授权。之前我们用的是kcharts(阿里自己开发)。现在更倾向于百度Echarts，从图表展现和用例丰富上，可以减少很多自己开发的工作量。

二、后台产品设计之数据可视化

这是《后台产品设计指南》系列文章的第13篇内容，更多精彩可以点击下方链接查看。

把复杂、抽象的数据通过可视的方式以人们更易理解的形式展示出来的一系列手段叫做数据可视化。数据可视化在后台产品中的应用主要包括和数据图表数据大屏和两部分，本文会和大家介绍一下数据可视化的产品设计规范。

数据图表一般出现在后台产品中的首页、统计模块。后面提到的数据大屏实际上也是不同数据图表的组合，因为比较特殊所以单独进行介绍。

后台的首页可以是简单的欢迎页面，但这样做会比较浪费首页这个黄金位置。更合适的做法是根据用户的角色和身份设计不同的内容，展示用户当前的待办、平台的关键数据、数据预警，用图表的形式展示会更加直观。用户一进入首页就能看到核心内容，可以知道当前的宏观情况，接下来要做哪些事情。

至于统计模块则是平台管理层决策的利器，除了展示基础的数据报表、图表，还需要结合平台业务，相关政策等信息给到用户决策的辅助信息。下面和大家介绍一下常用的数据图表类型。

柱状图一般用来表达某种分类下的数据的大小，分类可以是单个也可以是多个。比如某地2021年不同月份的最大值。

横向的柱状图也叫条形图，和柱状图的使用场景比较类似。条形图更适用于类别名称比较长的数据展示，使用柱状图会出现数据展示不全的情况。

折线图一般用来反映数据一段时间内的变化趋势。比如最近10年的考研报名人数。

柱状图和折线图有些类似，柱状图适合数据较少时的分析，折线图适合连续时间内较多数据的分析。

饼图一般用来表达不同类型的数据的占比情况。比如某公司不同部门的业绩占比。饼图也有一些特殊的展现形式，比如玫瑰图，理解起来需要一定的成本。

散点图一般用来变现两组数据之间的是否存在某种关联，这个关系可能是线性相关，也可能是正相关或者其他类型。比如员工工作年限和薪资的对应关系。

雷达图一般用来对不同指标进行对比分析。比如腾讯公司产品经理的能力雷达图。

热力地图用高亮的形式表达数据的集中区域。比如国内国庆假期游客的分布情况。

关系图一般用来表示实物之间的相互联系。比如下图中围绕李白展开的关系图。

漏斗图一般用来表达不同业务环节的价值转化情况。比如电商行业客户访问、注册、下单、付费的转化数据。

其他诸如K线图、桑基图、盒须图等类型使用的场景不多，这里就不做展开，感兴趣的读者可以自行研究。

数据大屏是以大屏为主要载体的数据可视化设计。数据大屏是数据的最后应用环节，与数据怎么收集、清洗、处理，是否使用数仓技术没有必然的联系。

数据大屏一般是用来做信息展示、数据分析和监控预警，无论是哪一种都需要对业务有充分的理解，否则设计出来的大屏只能是空中楼阁。

每个行业的数据指标是不同的，比如电商消费的核心数据就是GMV；购买人数，订单数，最受欢迎品牌就是次要数据。大屏因为空间限制可以展示的内容有限，一定要优先展示核心数据。

同一个数据指标有不同的分析维度，比如电商GMV可以统计平台的累计金额，也可以按照月份统计新增金额，还可以按照商品类型来统计数据。

这个步骤需要使用到前面提到的图表，根据业务数据里选择合理的图表类型。选择图表时既要考虑用户能直观地理解，又要考虑开发实现的可行性。

在正式输出设计稿之前，需要提前了解现场环境中信号源电脑的分辨率以及大屏的相关参数，如果没有提前了解做出来的效果很容易出问题，再返工会浪费很多成本。

设计师按照一定的规范根据要展现的内容输出设计稿。大屏产品不能贪图炫技，而忽视了本质，即大屏是为了高效地展示信息，提供决策辅助。

这个过程包括前端样式的实现和数据的接入，实际上数据的接入在前期就可以先行了。有一些效果开发很难实现，这个时候可以设计师配合提供切图实现。开发完成后需要内部验收测试，除了关注样式还需要验证数据的准确性。

数据大屏的展示可以使拼接屏，也可以使一块完整的大屏。数据大屏的本质是把电脑屏幕通过有线信号投放到大屏上，两者的内容是一致的。

一般情况下我们需要了解大屏的类型和分辨率，选择合适的设计稿尺寸。如果大屏和电脑比例一致，可以按照大屏的分辨率来做设计稿，然后再进行开发实现；或者是使用等比例缩小的分辨率尺寸来做设计稿，再导出2倍图和开发实现。如果大屏和电脑比例不一致，这个时候需要优先保证大屏上的展示效果，电脑上和大屏上会出现一定的误差。

数据大屏实现后，一定要到现场进行调试，避免出现突发情况。数据大屏的设计稿和开发适配不需要产品经理过多地关注，只需要关注最终的质量即可。

1.数据大屏上一定要有主次，不能贪多，也不需要炫技；

2.数据大屏的字体大小和PC上有区别，需要重点关注；

3.需要根据行业、应用场景等因素选择合适的配色方案；

4.合理地使用动效可以增强大屏的品质和空间感。

数据可视化在后台产品中应用非常广泛，先了解数据可视化的应用场景和设计规范才能设计出实用的可视化产品。

在写作过程中，如果有意见或者想法，欢迎有兴趣的读者添加我的微信一起交流探索，共同进步。