阿里云 DataV 数据可视化 关注
手机版
  1. 云栖社区>
  2. 阿里云 DataV 数据可视化>
  3. 博客>
  4. 正文

DataV首次实战分享:教你30分钟创建汽车大屏

木酱 2016-07-18 21:16:05 浏览38351 评论24 发表于: 阿里云 DataV 数据可视化 >> 可视化

数据可视化 DataV

摘要: 我是一个技术男,同样也是个汽车爱好者,上个月买了辆的宝马,却发现路上的“宝马越来越多”(⊙﹏⊙)b ...... 我喜欢钻研技术,也喜欢钻研汽车,最近研究了一下数据可视化,发现用datav可以玩出一些花样,这次就分享一下我做汽车数据大屏的经验。

先看一下汽车大屏(手机流量慎点!):https://datav.aliyun.com/share/20acd88491367bf262fcb1e862ee8f1c

必备产品:DataV gif

4

我是一个技术男,同样也是个汽车爱好者,上个月买了辆的宝马,却发现路上的“宝马越来越多”(⊙﹏⊙)b ......
我喜欢钻研技术,也喜欢钻研汽车,最近研究了一下数据可视化,发现用datav可以玩出一些花样,这次就分享一下我做汽车数据大屏的经验。

没数据是不行的,首先七拼八凑了一些汽车数据,然后......

清洗数据

我找到的数据是这样的

尺寸 人数
4567mm*1786mm*1454mm 1
5300*1800*1600 1
长 4369mm 宽 1802mm \高1445mm 1
4670mm*1780mm*1435mm 1
4430*1793*1399 1
4671*1815*1478 1
4929mm*1898mm*1655mm 1
4430mm*1793mm*1399mm 1
4714*1810*1442 1
长4484mm 宽1798mm \高 1577mm 1
5090×1926×1900 1

看到这尺寸我就吐了…… 真是什么格式都有。

作为一个前端,用 javascript 简单的把他转化成了一个统一、干净的格式还是很容易的,相同尺寸的人数也统计(加)起来

var car = {};
require("tongji.txt")
.split("\n")
.forEach(function(v){
  var [size, num] = v.split("\t");
  size = size.replace(/^\D*(\d{4})\D*?(\d{4})\D*?(\d{4})\D*$/g, '$1*$2*$3')
  if (!car[size]) car[size] = 0;
  car[size] += num*1; 
});

/*
car = {
  4369*1802*1445: 1,
  4430*1793*1399: 2,
  4484*1798*1577: 1,
  4567*1786*1454: 1,
  4670*1780*1435: 1,
  4671*1815*1478: 1,
  4714*1810*1442: 1,
  4929*1898*1655: 1,
  5090*1926*1900: 1,
  5300*1800*1600: 1,
  //...
}
*/

清洗好的数据,就存入数据库

匹配车型

数据虽然干净了,但我还是有点不放心,通过车辆尺寸真的能找到车型?

找了一个车型库,简单写一个 SQL 测试一下

select 
  concat(`长度(mm)`, '*', `宽度(mm)`, '*', `高度(mm)`) as size, 
  count(distinct 车系) as cnt,
  group_concat(distinct 车系)
 from models 
group by size 
order by cnt desc 
limit 1000

得到的结果都是如下表一样,都是同品牌的相似车型,应该对结果不会有太大影响。
再连接上我的测试数据,结果几乎只是国产、进口的区别。

size cnt group_concat(distinct 车系)
4629*1880*1653 2 奥迪Q5,奥迪Q5(进口)
4638*1803*1598 2 英菲尼迪EX,英菲尼迪QX50(进口)
4624*1811*1460 2 宝马3系,宝马3系(进口)
4660*1852*1400 2 英菲尼迪G系,英菲尼迪Q60

为了计算方便,我再把 size 直接转化成了车型 id,这样数据就算准备好了。

DataV 上场

首先选了一个最顺眼的模板(技术男一般喜欢冷色,除非你心里住了一只小绵羊,才会选择“双11”的同款大屏)

1

我暂时没有什么地理数据,所以人人喜爱的地图,这次就删掉了,如果有人想看地图的操作分享,可以给我留言,我会再做异常关于地图可视化的分享。

r1

先把指标想好,把模块的标题改成想要的指标,不知道想看什么指标,就像我一样,神秘点——数据探索。

2

中间想要一个车系分布,这么大的区域可以列出很多车了。

添加一个饼图,调整好位置后直接选择到已经建好的数据库,

输入sql

select sum (l.num) as y, 车系 as x
  from stats as l
  left join models as c on c.id = l.car
 group by x order by y desc
 limit 30;

效果不满意,怎么办?再教你一招设计

r2d

然后再添加一些组件丰富一下

r3a

再增加几个个查询:

/* 总价值 */
select sum(num * price)*10000 as value from stats as l 
left join models as c on c.id = l.car;
/* 车辆总数 */
select sum(num) as value from stats
/* 平均车价 */
select sum(num*price)/sum(num) as value from stats
left join models as car on car.id = stats.car;
/* 排量分布 */
select sum(l.num) as y, `排量(L)` as x
from stats as l 
left join models as c on c.id = l.car 
group by `排量(L)` 
order by x asc
limit 20
/* 60万以内的价格分布 */
select sum(l.num) as y, concat(ceil(price/5)*5,"万") as x
from stats as l 
left join models as c on c.id = l.car 
where price < 60
group by FLOOR(price/5)
order by FLOOR(price/5) asc

这样就完成了中部的开发。

3

同样的方法给左侧添加数据,上面两个组件并不是我的style。先换掉,注意换掉组件的时候,数据源要重新选择一次。

r5a

右边也就以此类推啦,其实不一定要等想好了所有指标才动手。在做这个屏的时候,当数据输出成图表的瞬间,我经常会得到更有意思的想法。这个时候动手改改sql,也许更棒的指标就出来了。

做大屏重要的就是设计和数据:

设计方面:

如果你像我一样,是位个人爱好者,可以多去看看好莱坞大片,提升下数据审美。

如果你在一家有设计资源的企业,那就让他帮你做个视觉定位。一般是中间指标最关键,然后左边一栏指标是一条业务线,右边一栏指标是一条业务线,方便解读。

数据方面:

如果是个人学习,就到网上找点公开数据,或者直接在页面编辑静态数据。

如果是企业,那就按照企业的要求指标计算好,然后从数据读实时来读,DataV 的数据一栏中可以设置多久读一次库。

除此之外,我其实还是个数据分析师,如果你有数据不知道怎么分析,也可以留言给我,我可以帮你用 DataV 深入分析下。记住,汽车数据优先哦!

给DataV留个传送门,还没买的人可以看下,1块钱3个月,一般人我不告诉他。

下期分享:《你留言,我来写》-> -> 再见!

本文为云栖社区原创内容,未经允许不得转载,如需转载请发送邮件至yqeditor@list.alibaba-inc.com;如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:yqgroup@service.aliyun.com 进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。

用云栖社区APP,舒服~

【云栖快讯】首届阿里巴巴中间件技术峰会,揭秘阿里10年分布式技术沉淀!阿里高可用体系核心缔造者、全链路压测创始人,DRDS与TDDL负责人等大咖出场,干货分享,不可错过!  详情请点击

网友评论

1F
怀听

不错,有时间试试。

2F
theseue

好上手!

3F
数屏

这数据是乐佳车位里面提取的吧。。。

木酱

不是

评论
4F
淘天后

喔,不错

(来自社区APP)
5F
菜鸟的春天

学习了

(来自社区APP)
6F
利艾

我表示我也可以做出来的

木酱

赞赞赞,DataV 就是要让每个人都能做出来。

评论
7F
法兰

很厉害的赶脚

8F
ccitv

看着还可以

(来自社区APP)
9F
混子裴

看着好厉害的样子

10F
ryanl

期待地图LBS的实战教程

木酱

会有的,关注我吧

评论
11F
御皇大帝

这篇大致看得明白,虽然我完全不技术,可惜题主是个男的。我说,我不是技术男 我不喜欢绿色所以我自己经常会用到绿色。题主怎么理解?不会欺负我吧。好吧,我为了不被题主欺负就说明因为我不喜欢绿色所以我不喜欢的绿色对我特别扎眼,所以我绿色分辨度相对较高,于是就用多了。

(来自社区APP)
12F
xubincc

数据库怎么连得?本地的么?

13F
西大大

不会代码能做吗。。。

14F
nyby

用什么软件做的,ecplise可以做吗,什么时候有实战教程,我也想学着弄出来

15F
妄言

发现了错别字 哈哈

16F
叼叼叼

数据库怎么连的,大神

17F
大宝1234

能不能做个傻瓜教程。。。。欧巴

18F
iptv分析师

女生,不懂编程,如何插入省级地图呢?

19F
还阔以

有联系方式吗,请教几个问题

20F
游刃友鱼

可以提供代码包吗

专精于业务数据与地理信息融合的大数据可视化,通过图形界面轻松搭建专业的可视化应用, 满足您日常业务监控、调度、会...

支持以数据库为核心的结构化存储产品之间的数据传输。 它是一种集数据迁移、数据订阅及数据实时同步于一体的数据传输服...

是解决用户结构化数据搜索需求的托管服务,支持数据结构、搜索排序、数据处理自由定制。 为您的网站或应用程序提供简单...

为您提供简单高效、处理能力可弹性伸缩的计算服务,帮助您快速构建更稳定、安全的应用,提升运维效率,降低 IT 成本...