一、前言
1、实验目的：
- 熟悉界面设计的原则；
- 学习前端的作图工具，比如eCharts https://ecomfe.github.io/echarts-doc/public/en/index.html、
P5.js https://p5js.org/、
D3.js https://d3js.org/ - 熟悉javascript的语法和编程；
2、实验内容：
- 对数据进行预处理、聚集的该操作；做成方便显示的输入格式；
- 给定数据集，通过echarts绘制图片，对该数据集进行描述和趋势分析；
二、环境
- 操作系统： Windows 10 X64
- 工具：VsCode
三、实验步骤
-
在eCharts上下载eCharts.min,js脚本；新建的一个HTML文件，命名为“可视化网站”；然后将这两个文件放到一个文件夹中，如下图所示
1.png
2.接下来就是对HTML文件进行编写了：
首先是head标签，需要加注第一句话，以防中文乱码，另外注意引用脚本。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src="echarts.min.js"></script>
<title>人机交互实验9</title>
</head>
3.在style标签中写入CSS来代码定义每块的样式。我定义了九个id选择器，分别是header，text 1, div 1, photo 1, div 2, photo 2, div 3, photo 3, div 4。header和text 1 是对网站最顶端的区域的一些样式描述定义，其他的分别是婴儿的性别分布，商品销售情况以及商品种类分布的对应区域的样式定义，div 4 是结论区。（详见代码注释！）
<style>
#header
{
text-align: center; /*对齐方式：居中对齐*/
position: absolute;top: 5%;/*块的位置*/
width: 100%; /*宽度比例，100%*/
font-size: 35px; /*字体大小*/
}
#text1
{
text-indent: 2em; /*首行缩进*/
width: 70%;
font-size: 20px;
position: absolute;top:12%;left:15%;
}
#div1
{
text-indent: 2em;
width: 20%;
position: absolute;top:450px;left:15%;
}
#photo1
{
width: 28%;
position: absolute;top:40%;left:40%;
}
#div2
{
text-indent: 2em;
width:20%;
position :absolute;top:960px;left:15%;
}
#photo2
{
width: 28%;
position: absolute;top:880px;left:40%;
}
#div3
{
text-indent: 2em;
width:20%;
position: absolute;top:1470px;left: 15%;
}
#photo3
{
width: 28%;
position: absolute;top:1380px;left:40%;
}
#div4
{
text-indent: 2em;
text-align: center;
width:60%;
position:absolute;top:1880px;left:20%;
}
</style>
4.在body标签中来填充文字及图表的具体内容信息。一共分为一个头部文字区，三个文字加图表区，一个结论文字区共五个模块，我把他们称为A,B,C,D,E五块。下面是A块。
<div id='header'>
<head>电商婴儿用品分析</head>
</div>
<div id='text1'>
<p>随着“全面二孩”政策落地、居民可支配收入稳步增加等因素的刺激，中国的母婴消费市场正迎来黄金时代。与此同时，随着国民消费升级90后宝爸、宝妈人数剧增，消费需求与消费理念都发生了巨大的变化。
据罗兰贝格最新公布的报告预计，已经经过了16个年头发展的母婴行业，到2020年，整体规模将达到3.6万亿元，2016-2020年复合增速高达17%,行业前景看起来一片光明。
</br>
数据集：天池数据集</p>
</div>
它在网页中呈现的效果和位置如下图：
A.png
- B,C,D块是相同的，以B块为例：先是div 1 ，用文字总结一下婴儿性别表所显示的信息，然后在photo 1中用echarts画图。
<div id='div1'>
<header style="font-size:30px">1.婴儿的性别分布</header>
<p style="font-size:17px;">收集的婴儿总数为926，其中男孩为488名，女孩为438名;男孩占53%，女孩占47%</p>
</div>
<div id='photo1'style='width:800px;height: 400px;'></div>
<script type="text/javascript">
var mycharts=echarts.init(document.getElementById('photo1'))
var option={
title:{
text:'婴儿性别分布表',
x:'center',
},
tooltip:{
trigger:'axis',
formatter: "{a} <br/>{b} : {c}",
},
xAxis:[{
type:'category',
axisLabel:{
boundaryGap:true,
color:'#AAAAAA',
interval:0,
formatter:function(value){
return value.split("").join("\n");
}
},
data:['male','female'],
}],
yAxis:{},
series:[
{
name:'性别',
type:'bar',
barWidth:50,
data:[488,438],
itemStyle:{
emphasis:{
shadowBlur:10,
shadowOffsetX:0,
shadowColor:'rgba(0,0,0,0.5)'
},
normal:{
color:'#6495ED'
}
}
}
]
}
mycharts.setOption(option);
</script>
呈现的效果如下图：
B.png
6.同样道理，C和D块也是这样：
<div id='div2'>
<header style="font-size:30px;">2.商品销售情况</header>
<p style="font-size:17px;"> 从商品种类中选出部分种类进行数据统计比较，可见ID为50013636的商品销售数据最高，最受消费者的喜爱。而ID为50014866，50012461，50013874等几种商品销售量较低，不受消费者喜欢。</p>
</div>
<div id='photo2'style='width:800px;height: 400px;'></div>
<script type="text/javascript">
var mycharts=echarts.init(document.getElementById('photo2'))
var option={
title:{
text:'商品种类数据表'
},
tooltip:{
trigger:'axis',
axisPointer:{
type:'shadow'
}
},
grid:{left:'5%',right:'5%',bottom:'20%',containlabel:true},
xAxis:[{
type:'category',
axisLabel:{
boundaryGap:true,
color:'#AAAAAA',
interval:0,
formatter:function(value){
return value.split("").join("\n");
}
},
data:['50014866','50011993','50012461','50018831','50013636','121394024',
'50010557','50010542','50013874','203527','50018202','50012365',
'50015841','50013711','50012359','50010544','50009540','50013207',
'50024147','50018860','211122','121434042','50006520','50010555'],
}
],
yAxis:{},
series:[{
name:'商品种类数据表',
type:'bar',
barWidth:8,
zlevel: 0,
data:['20','864','32','718','2066','301','414','207','24','46'
,'25','390','79','432','554','331','205','1148','37','43','502','43','63','522'],
itemStyle:{
normal:{
color: '#6495ED'
},
},
}]
}
mycharts.setOption(option);
</script>
<div id='div3'>
<header style="font-size:30px;">3.商品种类分布</header>
<p style="font-size:17px;">商品描述：</br>商品种类有六大类，其中类别ID为"50008168"的商品有12494种，种类最多。类别ID为'38'的商品则有1203，种类最少。</p>
</div>
<div id='photo3'style='width:800px;height:400px;'></div>
<script type="text/javascript">
var mycharts=echarts.init(document.getElementById('photo3'))
var option={
title:{
text:'商品购买数据'
},
tooltip:{
trigger:'axis',
axisPointer:{
type:'shadow'
}
},
grid:{left:'5%',right:'5%',bottom:'20%',containlabel:true},
xAxis:[{
type:'category',
axisLabel:{
boundaryGap:true,
color:'#AAAAAA',
interval:0,
formatter:function(value){
return value.split("").join("\n");
}
},
data:[50022520,28,50014815,50008168,38,122650008],
}
],
yAxis:{},
series:[{
name:'商品购买数据',
type:'bar',
barWidth:30,
zlevel: 0,
data:[2368,6966,4834,12494,1205,2110],
itemStyle:{
normal:{
color: '#6495ED'
},
},
}]
}
mycharts.setOption(option);
</script>
效果如下：
C.png
D.png
- 最后是E块，为总结部分，只需写入文字即可，代码如下：
<div id='div4'>
<header style="font-size:30px">4.分析结论及建议</header>
<p style="font-size:17px">1.由性别分布表可以分析得知，男婴比女婴比例高，商家可以多准备一些男婴用的商品，可以在数量或者种类上进行优先选择以及着重准备。</br>
2.在婴儿6个月-3岁这个阶段是母婴产品消费的高峰期，毕竟纸尿裤，衣服，奶粉都是必需品。</br>
其次月份等因素因为会影响女性怀孕，也间接影响到了母婴产品的销量。</br>
3.商家可以根据消费者购买某类商品的种类以及商品销售数量多少进行备货。</p>
</div>
效果截图：
E.png
四、总结
- 有关可视化的东西还需要多多学习多多接触！
