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

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

一.什么是大屏,它有什么作用?

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

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

二.如何设计可视化大屏?

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

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

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

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

常见的方案有:

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

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

(1)点击新建大屏

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

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

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

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

(2)添加相关组件

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

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

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

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

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

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

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

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

4.分组柱状图组件:

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

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

完成所有组件的设置和数据的导入后,这样一个销售数据统计大屏就完成了。

完成所有组件的设置和数据的导入后,这样一个销售数据统计大屏就完成了。

四.导出分享大屏

大屏设计完成后,需要及时保存,导出项目源文件或者部署文件,也支持发布Web链接的形式。

1.另存为bt形式的项目文件,后续可以使用软件中心重新打开进行编辑操作。

2.导出为部署文件,可以根据需要选择永久的最终部署或者有期限的临时部署,在上方的高级设置中可以对编辑权限,APP控制,云渲染等进行详细设计。

3.如果需要分享大屏的需求,也可以发布Web链接,成功发布后,复制相应的网址,可以在第三方浏览器中打开查看制作好的大屏。

以上就是用山海鲸可视化软件制作一个大屏的基本流程,大家可以根据自己需要制作想要的可视化大屏,更多具体操作可以在山海鲸可视化官网进行查看。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/26998.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

算法007:三数之和

. - 力扣(LeetCode). - 备战技术面试?力扣提供海量技术面试资源,帮助你高效提升编程技能,轻松拿下世界 IT 名企 Dream Offer。https://leetcode.cn/problems/3sum/ 这个题相较于前几个题来说比较难,思想是前面一个题目…

【智能家居控制系统项目】一、项目系统镜像烧录与系统登录

前言 完成本章节将可以获得本项目的系统UI界面功能。本章节主要介绍如何烧录项目系统镜像以及进入系统。配套的视频介绍可以点击跳转到智能家居项目复刻配套视频 1.系统功能页面介绍 完成本章全部步骤,我们将可使用以下项目系统功能界面。 1.1 家居总览界面 主界面…

【成品设计】基于STM32的单相瞬时值反馈逆变器

《基于STM32的单相瞬时值反馈逆变器》 整体功能: 图13 软件框图 如图13所示,由于本设计中需要通过定时器中断执行一些程序,故首先对中断进行初始化。中断初始化以后即为对串口进行初始化,总共初始化了两个串口,第一个…

SQL SERVER触发器记录指定的几笔资料更新记录

1.目的 为了记录数据库表中资料数据动态的变更,实时动态且方便调整记录的范围。 2.分析 需求:记录UPDATE 修改的记录 if exists(select 1 from inserted) and exists(select 1 from deleted) :修改if (exists (select 1 from inserted) and n…

Unity 设置窗口置顶超级详解版

目录 前言 一、user32.dll 1.什么是user32.dll 2.如何使用user32.dll 二、句柄Handle 1.句柄 2.句柄的功能 3.拿句柄的方法 三、窗口置顶 1.窗口置顶的方法 2.参数说明 3.使用方法 四、作者的碎碎念 前言 up依旧挑战全网讲解最详细版本~~ 本篇文章讲解的是unity…

基于软件在环的飞控机建模仿真

安全关键系统(Safety-Critical System,SCS)是指由于某些行为或组合行为能够引发整体系统失效,继而导致财物损失、人员受伤等严重影响的系统,诸多安全关键领域如航空航天、核电系统、医疗设备、交通运输等领域的系统都属…

网络编程---Java飞机大战联机

解析服务器端代码 代码是放在app/lib下的src下的main/java,而与之前放在app/src/main下路径不同 Main函数 Main函数里只放着创建MyServer类的一行 public static void main(String args[]){new MyServer();} MyServer构造函数 1.获取本机IP地址 //获取本机IP地…

捋清UITableView展示不同类型数据的差异

背景: UITableView可以展示分组数据和单组数据,一般这两种数据有4种情况: 单组数据的简单类型,本身为字典数组,内部字典key对应的value全为基本数据类型。(如lol英雄展示案例,不分组且组内信息…

一五零、MAC 安装mysql可视化工具连接

mysql安装,按照网上教程一步步安装(官网下载安装包->解压->完成安装),最后在「系统偏好设置」无法启动mysql。 原因:下载的版本是8.0最新版本,MAC上这种方法无法启动成功。 解决方法 换低版本的mys…

C#版 iText7——画发票PDF(完整)

显示描述&#xff1a; 1、每页显示必须带有发票头、“销售方和购买方信息” 2、明细填充为&#xff1a;当n≤8 行时&#xff0c;发票总高度140mm&#xff0c;每条发票明细行款高度4.375mm&#xff1b; 当8<n≤12行时&#xff0c;发票高度增加17.5mm&#xff0c;不换页&#…

我们一起聊聊 Go 性能工具

从开发到部署的整个过程都离不开基本的负载测试和性能剖析。利用 Go 的 pprof 和跟踪工具&#xff0c;开发人员可以深入了解性能瓶颈、CPU 使用率和内存分配情况。 在开发过程中&#xff0c;从一开始到应用程序的推出都充满了挑战&#xff0c;而负载测试则是其中至关重要的一项…

Kettle 数据抽取工具使用教程:从入门到实战

一、简介 Kettle 是 Pentaho Data Integration (PDI) 的一个组成部分&#xff0c;是一个开源的数据集成工具。它被广泛用于数据的抽取、转换和加载 (ETL) 过程。Kettle 提供了一个易于使用的图形界面&#xff0c;可以轻松设计和执行 ETL 流程。 github 源码地址&#xff1a;ht…

postman教程-19-mock测试

上一小节我们学习了Postman接口参数化方法&#xff0c;本小节我们讲解一下Postman mock测试的方法。 一、什么叫mock测试 mock测试就是在测试过程中&#xff0c;对某些不容易构造或者不容易获取的对象&#xff0c;用一个虚拟的对象来创建以便于测试的一种测试方法&#xff0c…

chatgpt 生成的 左侧导航功能的网页

目录 一、左侧导航 1、效果如下&#xff1a; 2、代码如下&#xff1a; 3、技术点&#xff1a; 1)、箭头居中 2)、导航区域 3)、导航隐藏时&#xff0c;正文重新居中 4)、设置视口高度 这是用chatgpt生成的网页&#xff0c;其实&#xff0c;不是一下子就生成了满足需求的…

Syncovery:跨平台高效文件备份与同步的得力助手

在数字化时代&#xff0c;数据安全与文件同步已成为个人及企业不可或缺的需求。Syncovery作为一款专为Mac和Windows用户设计的文件备份和同步工具&#xff0c;凭借其高效、安全和易用的特点&#xff0c;赢得了广泛赞誉。 一、强大备份功能 Syncovery支持多种备份方案和数据格…

LeetCode 119.杨辉三角 II

1.题目要求如图所示: 示例 1:输入: rowIndex 3 输出: [1,3,3,1]示例 2:输入: rowIndex 0 输出: [1]示例 3:输入: rowIndex 1 输出: [1,1]先用malloc函数创造一个二维数组&#xff0c;变成杨辉三角&#xff0c;然后再用一维数组找到所指的那一行: /*** Note: The returned…

java使用多线程导出数据至excel

大量数据导出 问题 如果数据量较大&#xff0c;那么使用 Apache POI 导出数据可能会导致OOM或者到处时间较长。 解决方案 使用多线程同时导出多个excel&#xff0c;缩短接口响应时间 代码示例 public void test () {List<Test> tests testMapper.selectAll(); // 查…

labelme安装(通过anaconda)

1.下载安装anaconda 2.安装完成后打开&#xff0c;在环境页里面创建环境 选择3.6.13版本&#xff0c;然后运行 3.安装labelme pip install labelme -i https://pypi.tuna.tsinghua.edu.cn/simple 使用上面命令加速一下 4.labelme打开并标注 总结&#xff1a;现在版本越来越多…

中小学一级教师相当于什么级别的职称

你知道吗&#xff1f;当你一步步攀登职称的阶梯&#xff0c;达到中小学一级教师的荣誉时&#xff0c;你究竟站在了哪个高度&#xff1f;一级教师不仅是一个职称的标签&#xff0c;更是对你专业能力的认可。 中小学教师的职称体系&#xff0c;就像一幅层次分明的画卷&#xff0c…

Blender:渲染输出

渲染输出界面 渲染设置界面&#xff1a; 输出设置界面&#xff1a; 输出文件格式 【文档】 视频导出格式&#xff1a; AVI JPEG 使用JPEG压缩的AVI。有损&#xff0c;能得到更小的文件&#xff0c;但大小无法与编解码器的压缩算法得到的文件相比。JPEG 压缩也是数字摄像机使用…