利用免费的可视化组件，零代码制作一个电商销量大屏居然这么简单！

每到一年一度的618和双十一时，由于各种平台的优惠力度，使人们纷纷清空购物车下单，而在这庞大的销售数据下，各大商家却能够在第一时间发布整体销售业绩和数额，在这高效且巨大的数据背后，你是否有了解过展示数据所用的数据可视化大屏呢？

一.什么是大屏，它有什么作用？

顾名思义，大屏就是一块屏幕，和我们日常所见的黑板，仪表板有些相似，它们能够传递数据，信息等，但它们都有各自的缺陷，比如：替换信息不方便，需要擦除，展示的内容不够丰富，界面不够美观等，而数据可视化大屏则可以很好地解决这些问题。随着大数据技术和智能显示技术的发展，数据大屏已经成为IT信息领域一种普遍的数据展示应用场景。从政府的宏观政务决策，到企业的生产管理，从环保数据的实时监控，到电商平台的流量监控，都离不开数据大屏的身影。它以数据可视化的方式在一个或多个屏幕上展示业务的重要指标，它不仅具有现代化，科技化的的特点，能给人的观感留下震撼的印象，而且由于其面积大，可显示信息多的特点，能够帮助决策者提高效率。

下面展示的这个销售数据统计大屏不仅涵盖了各地区的销量，还详细展示了浙江浙各地区的具体销量，年产量占比，大客户购买明细，各地区往年及今年总销量对比，一周重点地区销量对比等多个关键信息。通过全面监控，厂家能够实时了解商品在各地区的销售情况，及时发现和解决潜在问题，提高产品的总体销量。本文使用简单免费的开发平台（山海鲸可视化），来从零制作一个可视化大屏。

二．如何设计可视化大屏？

想要大屏呈现出精美的画面，进行相关的视觉设计以及界面布局是必不可少的。大屏首要任务是为业务服务，合理展现业务指标和数据。由于大屏通常展示的是企业全局的业务状况，设计上一般分为主要指标和次要指标两个层次。主要指标反映核心业务，而次要指标则用于进一步分析和阐述。因此，在制作大屏时，需要针对不同指标给予不同的侧重。

以下是两种常见排版，它们都能突出主次层次，更好地展示核心业务信息。

以下是两个典型的主次分布大屏效果，它们的信息呈现都十分清晰，主次分明。

三.如何制作可视化大屏？

常见的方案有：

1.传统制作方法：使用编程语言如JavaScript，结合数据库和图表库，直接编写代码。这种方法对于大多数人而言，门槛相对较高，维护成本也较大，开发周期长。当涉及到大量动态可视化和大数据量时，性能会受到一定的影响。

2.便捷的开发工具：利用现成的数据可视化工具。这种方法相对简单，通过数据可视化工具可以快速设计样式、适应不同屏幕大小，并且能够实现实时刷新数据。自带丰富的组件，图表以及大屏模板等，这种方式更适合不具备底层技术的人群，上手和制作也更加方便快捷。

（1）点击新建大屏

进入软件后，点击新建按钮，会跳转到项目创建页面。

选择需要使用的看板，也可以选择没有任何组件的空白项目（自行添加所需要的可视化组件），修改项目名称后点击创建项目按钮即可进入大屏编辑界面。

在主界面左侧的菜单栏可以选择资源中心，里面有各种大屏模板可供预览，也可以直接下载需要的模板进行参考或者使用。

在大屏编辑界面的左上角可以对数据进行处理，如果有自己的本地数据需要使用，可以导入本地的数据文件，比如Excel，CSV,JSON,XML,MySQL等。

（2）添加相关组件

制作一张完整的可视化大屏离不开丰富的组件，在大屏编辑界面有众多的可视化组件供我们使用，右侧还有组件的预览图，我们可以根据自己的需要选择合适的组件。

点击组件库中的组件会自动添加当前组件到看板画布上。新添加的组件默认出现在画布中心位置，且组件为默认状态，显示的数据和颜色也都是默认的。

点击选中组件，在右侧“样式”设置窗口中可以看到多个不同的设置分类，每一个分类里都有不同的设置项，这些分类和设置项根据不同的组件会有不同的内容。

单击选中组件，在右侧数据设置窗口中，可以看到具体的数字字段，默认是来源于组件自有数据，可以直接修改其中的数值使用，也可以通过看板公共数据来导入本地的数据，数据字段需要对应，否则无法导入。

下面介绍上述销售数据统计大屏所使用到的一些基本组件

1.单行文本组件：基础单行文本组件默认显示示例文本，双击即可直接进行编辑，修改相应文本，可以设置字体，大小，颜色等样式。

2.环形图组件:以环形图的方式来展示各地区的年产量占比，通过面积大小和比例来直观地展现各地区的数据情况。

3.数据表格组件：通过表格的形式来展示数据，本大屏中，大客户购买明细中的地区，购买量，订货时间，交货时间，货物情况使用多列数据表格同时呈现，并且能够上下滚动呈现，在节省大屏空间的同时能够展示更多数据。

4.分组柱状图组件：

分组柱状图能够在同一个轴上显示各个分类下不同的分组。

不同的组件适合于不同格式的数据，如果数据源格式不符合组件的要求，就无法正常显示内容。这种数据类型适用于柱子数量固定不变的情况。
这种数据类型是一个 X 轴字段（字符串类型）和多个 Y 轴字段（数字类型），一个 Y 轴字段对应一个柱子。下列的柱状图展示了各地区往年及今年的总销量对比，X轴是各地区，Y轴则是总销量，可以对轴线进行隐藏操作。