使⽤DataV制作实时销售数据可视化⼤屏（实验篇）课时1：背景介绍
任务说明
ABC是⼀家销售公司，其客户可以通过⽹站下单订购该公司经营范围内的商品，并使⽤信⽤卡、银⾏卡、转账等⽅式付费。付费成功后，ABC公司会根据客户地址依据就近原则选择⾃⼰的货仓，指派合适的快递⼈员配送商品
公司在作战室安置了⼀个16:9的物理⼤屏，想把公司实时销售相关的数据通过⼤屏展现出来，供公司中⾼层了解实时情况做决策⽤。希望展现效果要好，能突出公司实施销售的关键信息，并且由于管理层并⾮全部懂技术，要求⼤屏能更直观、易懂
作品效果
课时2：思路与流程
分析公司的要求，可以得出该⼤屏以展⽰业务实时销售概况以及分析结果为主，并通过分析结果给出优化⽅案，以达到实时监控及调度的⽬的
整个⼤屏设计、实施的步骤主要如下：
搜集信息点=>了解物理⼤屏=>整理加⼯信息点=>信息点可视化=>数据预研=>绘制原型稿=>绘制视觉稿
看上去整个流程难度还是⽐较⾼的，对设计、实施的⼈员既有业务能⼒、技术能⼒的要求，⼜需要有设计⽅⾯的能⼒。
好的是，阿⾥云可视化⼤屏⼯具DataV可以帮新⼿快速克服以上难题，具备上述基本能⼒。由于我们分析出该⼤屏主要⽤户实时信息监控，我们可以直接使⽤DataV提供的实施销售的模板（有⼏个模板均可以⽀持，选定⼀个更适合当前场景以及展现效果更贴近⾃⼰预想的即可）：
该⼤屏为通⽤类的实施销售监控屏，我们先分析⼀下该屏的组成：
具体内容如下：
如果没有特殊的需求，可以直接按照这个框架组织内容。实际上该模板已经规定了需要展⽰⼤概哪些内容，即已经帮助我们进⾏了信息点加⼯、可视化、草稿等⼏步的⼯作，我们需要做的是整理数据，提取类似指标，并将指标摆放到⼤屏中：
我们把数据需求提交给数据部门的同事，让他们按照上⾯梳理的指标帮我们完成数据清洗和整理，我们要做的就是使⽤该模板，把相关的指标对应的数据和可视化组件对接起来，调整视觉效果，完成⼤屏设计和开发。
最终数据同学提供了⼏张表，⽤来⽀持⼤屏⽣成，具体情况如下：
实时订单表：orders
每⽇统计表：st_orders_daily
实时城市排名表：city_ranking
实时时段排名表：hour_ranking
实时产品排名表：product_ranking
实时⾏业统计表：st_customers_job
核⼼指标表：st_kpi_daily
网站制作公司获取客户由于本课程的重点是⼤屏设计与实现，对于⽣成指标的简单SQL我们会给出，感兴趣的同学也可以去学习⼀下基本的SQL，对我们以后做可视化会有帮助课时3：准备⼯作：准备模拟数据
本部分⽤户需要通过配置⼀个云数据库（RDS for MySQL），创建⼀个数据库abc_datav，然后使⽤该库模拟业务系统，即将附件中提供的7张表上传到该库中去。（）
具体步骤如下：
1. 使⽤chrome浏览器登陆阿⾥云官⽹，依次填⼊对应的阿⾥云账号信息，点击登录，进⼊阿⾥云官⽹的管理控制台
2. 点击产品与服务，在下来菜单中选中全部，在下⼀集菜单中点击云数据库RDS版，进⼊RDS管理控制台⾸页
3. 点击云数据库RDS，进⼊实例管理界⾯，切换⾄地域华东2，点击创建实例：
（提⽰：按量付费创建RDS实例账户余额需⼤于等于100元才能购买，实验结束后可提现余额，因RDS实例按量付费，建议实验结束后及时释放）
4. 选择按量付费，配置实例规格：
华东2
MySQL
5.6
⾼可⽤版
经典⽹络
1核1GB
5. 返回管理控制台后，在华东2区域到对应的实例，点击其后的管理：
6.进⼊基本信息页⾯，打开左侧导航栏中的数据安全性，即可看到⽩名单设置，点开右侧添加⽩名单分组
7.填写分组名称，在组内⽩名单中添加IP地址，然后点击确定
IP地址如下：
（139.224.92.81/24,139.224.92.22/24,139.224.92.35/24,139.224.4.30/24,139.224.92.102/24,139.224.4.48/24,139.224.4.104/24,139.224.92.11/24,139.224.4.60/24,139.224.92.52/24,139.224.4.26/
8.添加成功后可以在⽩名单设置中看到对应的IP
9. 左侧导航栏中点击数据库管理，⽬前数据库列表为空，点击右侧的按钮创建数据库
10. 输⼊数据库(DB)名称为abc_datav，点击确定，开始创建数据库，期间可以通过点击右上⽅的刷新按钮查看实时状态
11. 点击左侧导航栏的账号管理，进⼊账号管理界⾯，点击创建账号
12. 填写账号配置信息，包括数据库账号为abc_user，密码为Abc_user123，重复输⼊⼀次确认密码，同时将数据库abc_datav的读写权限授权给该⽤户，点击确定，开始创建
⽤户
13. 点击登录数据库，在DMS（数据库管理⼯具）页⾯填写相关登录信息后登陆数据库
⾸先RDS实例的基本信息页获取数据库的信息：
填写DMS页的登录信息，其数据库信息为：IP地址加上端⼝。点击登录，进⼊数据库的管理页⾯
14. 点击SQL操作，选中SQL窗⼝，打开SQL操作窗⼝
15. 将下载的⽂件crt_src_tbl.sql中的内容复制到SQL窗⼝，点击执⾏（或者使⽤快捷键F8），完成表的创建
16. 点击数据⽅案，选中导⼊，打开数据导⼊页⾯
17. 在导⼊页中点击新增任务，点击选中⽂件，选中从附件中下载的⽂件orders_dyn.sql，点击开始加载数据
导⼊完成后，点击关闭按钮，关闭弹窗
18. 完成后回到SQL窗⼝，输⼊ select * from orders; 查看结果，查看的主要项为：该表中是否已有数据，在显⽰的前100条记录中，是否有空值（null）等
19. 重复17、18两步，将剩余的7个⽂件逐个上传到该数据库中，包括：
city_ranking.sql
hour_ranking.sql
map_data.sql
product_ranking_dyn.sql
st_customers_job_dyn.sql
st_kpi_daily_dyn.sql
st_orders_daily_dyn.sql
【注意】本实验中将会使⽤该数据库中的表作为⼤屏展⽰的数据源，请务必完成此准备⼯作，⽅可进⾏后续步骤
课时4：实战开发第1步：开通服务
本部分⽤户需要使⽤实名认证过的阿⾥云官⽹账号登陆阿⾥云管理控制台，开通DataV服务。
1. 打开浏览器，输⼊阿⾥云官⽹地址
2. 使⽤⾃⼰的阿⾥云官⽹账号登陆控制台：
3. 进⼊控制台，点击产品与服务，选择全部，点击DataV数据可视化：
4. 如尚未开通该服务，需要购买开通，点击⽴即购买：
5. 在购买详情页，点击⽴即购买，在⽀付页⾯点击⽴即⽀付：（注：学⽣认证⽤户购买：9.9/年）
5. ⽀付成功后，点击管理控制台，进⼊DataV产品⾸页
6. 也可以通过点击控制台左侧导航栏中的⼤数据（数加）下的DataV数据可视化进⼊
7. ⾸页⾯如下：
⾄此，服务开通完成，⽤户可以通过导航栏中的优秀案例和教程，了解、学习DataV的相关知识课时5：实战开发第2步：配置数据集
1. 点击DataV产品⾸页的左侧导航栏中的我的数据
2. 点击添加数据
3. 在弹出新建数据的窗⼝中，填写相关配置信息（根据⾃⼰之前配置的RDS信息，填写该部分内容）
4. 点击测试连接，成功后点击完成
5. 添加后的数据源如下
⾄此，数据源添加已经完成，本case中⽤到的所有数据，均从此RDS for MySQL数据库中获取课时6：实战开发第3步：⼤屏开发
本部分将使⽤模板，基于业务系统的数据，设计、开发⼀个可视化⼤屏，其最终效果如下：
我们会把⼤屏分割成⼏个部分，每个部分依次完成。具体的模块如下图标注：
准备⼯作：
⾸先，进⼊DataV⾸页，点击我的可视化，点击右侧⾯板中的新建可视化：
在左侧模板中，点击销售实时监控：
点击创建⼤屏：
在弹出窗⼝中指定名字为ABC实时销售监控⼤屏，点击创建：
进⼊⼤屏设计页⾯：
在⼤屏的设计过程中，DataV会⾃动保存⼤屏。如果需要查看效果，可点击右上⽅的预览按钮
⼀、设定⼤屏标题
①点击设计⾯板中的标题，点击页⾯设置中的数据tab页，将标题对应的value取值修改为ABC实时销售⼤盘：
②（可选）标题下的背景装饰动画变化幅度太⼤，容易分散注意⼒，将其修改⼀个变化更轻微的装饰图⽚。点击标题下的装饰，在样式页中，装饰元素选择gif6：
⾄此，⼤屏的标题修改完成
⼆、修改公司logo
①点击左下⾓的企业logo图⽚，在右侧样式页中，点击背景图中的企业logo图⽚
在弹出窗⼝中选择需要上传的图标⽂件，点击确定：
②如果企业logo图标⼤⼩不合适的话，可以通过⿏标拖拽单张图⽚控件的边缘调整⼤⼩（【注意】其他控件⼤⼩也可以通过类似⽅法调整，后不赘述）
三、销售额按省区排名
①在DataV设计页，点击左侧上⽅的通⽤标题栏，在右侧数据页将value对应的值改为销售额分省排名：
③点击轮播列表柱状图（在英⽂标题下），右侧数据页中可以看到，⽬前demo图形中使⽤的是静态数据：
④点击数据页中的数据源类型后的输⼊框，在下拉框中选中数据库：
⑤点击输⼊框中的选择数据库，选中abc_datav：
【注意】③、④、⑤三步介绍了如何将数据源设置为数据库，后续实验步骤中会反复⽤到，再次⽤到的时候，将直接说：将数据源设置为abc_datav数据库
⑥将下述SQL语句，复制到SQL框中：
⑦将⿏标移出SQL框，在数据页其他空⽩处点击⼀下，此时DataV会开始匹配SQL结果和该控件所需字段，并将结果显⽰在屏幕上
【注意】此步操作会频繁出现在后续配置中，⼿册中直接描述为：匹配数据
⑧可点击数据页最下⽅的查看数据响应结果按钮，查看该SQL返回的数据：
⑨设置刷新频率。勾选数据页⾯下⽅的⾃动更新，并将更新时间间隔设置为300秒：
⾄此，模块销售额按省区排名设计完成，可通过点击右上⾓的预览按钮查看效果
四、本⽉销售模块
①在DataV设计页，点击本⽉销售模块通⽤标题栏，在右侧数据页将value对应的值改为本⽉销售进度：
②点击通⽤标题栏，该标题栏在①中标题栏的下⽅，在右侧数据页将value对应的值改为Monthly sales progress；
③选中单值百分⽐饼图，在右侧数据页将数据源选择为数据库abc_datav，在SQL框中输⼊下列SQL语句，移动并点击⿏标，匹配数据：
④选中左侧的数字翻牌器，在右侧数据页将数据源选择为数据库abc_datav，在SQL框中输⼊下列SQL语句，移动并点击⿏标，匹配数据：
⑤选中右侧的数字翻牌器，在右侧数据页将数据源选择为数据库abc_datav，在SQL框中输⼊下列SQL语句，移动并点击⿏标，匹配数据：
⑥点击样式页⾯，向下滑动⿏标，到翻牌器，将前缀内容中的+号删除，同时将数字的字体颜⾊改为⽩⾊（#FFFFFF）：
⾄此，模块本⽉销售设计完成，可通过点击右上⾓的预览按钮查看效果
五、今⽇城市模块
①在DataV设计页，点击今⽇城市模块通⽤标题栏，在右侧数据页将value对应的值改为今⽇城市销售额排名：
②点击通⽤标题栏，该标题栏在①中标题栏的下⽅，在右侧数据页将value对应的值改为Sales city ranking；
③选中基本柱图，在右侧数据页将数据源选择为数据库abc_datav，在SQL框中输⼊下列SQL语句，移动并点击⿏标，匹配数据：
select city as x,
round(amt/10000,2) as y,
1 as s
from city_ranking
order by amt desc
limit 5;
④设置更新频率。在数据页中勾选⾃动更新，设置更新时间间隔为180秒：
⑤选中下⽅的通⽤标题，将数据页的value设置为销售额今⽇增速最快：
⑥选中下⽅的数字翻牌器，在右侧数据页将数据源选择为数据库abc_datav，在SQL框中输⼊下列SQL语句，移动并点击⿏标，匹配数据：select city as name,
fast_amt/avg_amt*100 as value
from (select city, amt as fast_amt
from city_ranking
order by amt desc limit 1) t1,
(select round(sum(amt)/count(distinct city),2) as avg_amt
from orders) t2
⑦设置更新频率。在数据页中勾选⾃动更新，设置更新时间间隔为200秒：
⑧点击样式页⾯，向下滑动⿏标，到翻牌器，将前缀内容中的+号删除，同时将数字的字体颜⾊改为⽩⾊（#FFFFFF）：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。