利用框架绘图
一、前言
本篇开发环境
1、操作系统： windows 10 x64
2、编辑器：VS Code
二、实验内容
1. 实验准备
熟悉界面设计的原则；
学习前端的作图工具，比如eCharts https://ecomfe.github.io/echarts-doc/public/en/index.html、P5.js https://p5js.org/、D3.js https://d3js.org/
熟悉javascript的语法和编程；
数据下载地址：见本文附件，或者Tianchi:Data sets
商品表格字段：
user_id:用户身份信息
auction_id:购买行为编号
cat_id:商品种类序列号
cat:商品序列号
property:商品属性
buy_mount:购买数量
day:购买时间
婴儿信息表格字段：
birthday:出生日期
gender:性别（0 male；1 female）
https://tianchi.aliyun.com/dataset/dataDetail?dataId=45
2. 任务
给定数据集，通过echarts绘制图片，对该数据集进行描述和趋势分析；
三、实验步骤
1.处理excel数据:
表格一：年份，性别
表格二：年份，购买人数，购买数量
2.学习echarts绘制柱形图的方法
https://www.cnblogs.com/jylee/p/9359363.html
3.扒下来的示例代码
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts-demo-柱形图</title>
<script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="height: 400px"></div>
<!-- ECharts单文件引入 -->
<script type="text/javascript">
// 基于准备好的dom，初始化echarts图表
var myChart = echarts.init(document.getElementById('main'));
var option = {
tooltip : {
show : true
},
legend : {
data : [ '销量' ]
},
xAxis : [ {
type : 'category',
data : [ "衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子" ]
} ],
yAxis : [ {
type : 'value'
} ],
series : [ {
"name" : "销量",
"type" : "bar",
"data" : [ 5, 20, 40, 10, 10, 20 ]
} ]
};
// 为echarts对象加载数据
myChart.setOption(option);
</script>
</body>
4.完整代码
<!DOCTYPE html>
<head>
<title>ECharts-demo-柱形图</title>
<script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="baby" style="height: 300px"></div>
<div id="goods" style="height: 300px"></div>
<div style="padding:0 10px;position:relative; width:520px; height:90px; border:1px solid rgb(20, 78, 167); left:490px">
<p>我国近年女婴总数基本多于男婴，婴儿总数逐年增长，但在14年有小下跌</p>
<p>电商领域发展迅猛，消费者每年成倍数增长，并且人均购买数量也在增长</p>
</div>
<!-- ECharts单文件引入 -->
<script type="text/javascript">
// 基于准备好的dom，初始化echarts图表
var myChart = echarts.init(document.getElementById('baby'));
var option = {
tooltip : {
show : true
},
legend : {
data : [ '男婴','女婴','未知性别' ]
},
xAxis : [ {
type : 'category',
data : [ "2002", "2003", "2004", "2005", "2006", "2007","2008","2009","2010","2011","2012","2013","2014"]
} ],
yAxis : [ {
type : 'value'
} ],
series : [ {
name : '男婴',
type : 'line',
data : [ 0,0,1,1,6,6,11,22,38,64,89,101,85 ]
},
{
name : '女婴',
type : 'line',
data : [ 1,3,3,2,4,14,25,29,46,82,94,100,78 ]
},
{
name : '未知性别',
type : 'bar',
data : [ 0,0,0,0,0,0,0,0,0,0,0,18,7 ]
},
]
};
// 为echarts对象加载数据
myChart.setOption(option);
var myChart2 = echarts.init(document.getElementById('goods'));
var option2 = {
tooltip : {
show : true
},
legend : {
data : [ '消费者数','商品销量' ]
},
xAxis : [ {
type : 'category',
data : [ "2012","2013","2014" ]
} ],
yAxis : [ {
type : 'value'
} ],
series : [ {
name : '消费者数',
type : 'line',
data : [ 3594,9753,15024],
},
{
name : '商品销量',
type : 'line',
data : [ 6923,22813,42241]
}
],
};
myChart2.setOption(option2);
</script>
</body>
网友评论