任务描述
本关任务:按照要求绘制堆积柱状图。
相关知识
本关将介绍Echart
中柱状图的绘制,包括标准柱状图、堆积柱状图等。
本关以及后面所有Echars
的课程都使用Html
和JavaScript
开发,所需要的开发环境仅仅是一个文本编辑器(推荐sublime
)和一个浏览器(推荐Google Chrome
)。
标准柱状图
标准柱状图就是最常见的一种柱状图,如下所示:
图 1 标准柱状图
其中x
轴表示数据项,比如上面的x
轴表示服装的种类。y
轴用来表示数据的值。
使用Echarts
绘图采用的编程语言是JavaScript
,我们把程序放在一个Html
文件中。
绘制最简单的标准柱状图的代码如下所示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script type="text/JavaScript" src="../static/echarts.min.js"></script>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<!-- 绘制柱状图的javascript代码 -->
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'ECharts 入门示例' //柱状图标题
},
tooltip: {}, //提示框
legend: {
data:['销量'] //图例
},
xAxis: {
name: "鞋服种类",//x轴标题
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]//x轴每一行的内容
},
yAxis: {
name:"销量"//y轴标题
},
series: [{//数据内容
name: '销量',//数据名称
type: 'bar',//数据形式,bar表示柱状图
data: [5, 20, 36, 10, 10, 20]//数据
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
上面的每一行代码都给出了注释,总的来说,绘制柱状图分为如下几个步骤:
- 准备一个
dom
元素用来放置柱状图; - 使用
Option
设置柱状图的内容; - 通过
setOption
显示柱状图。
其中第二步是最核心的,在这一步中,我们通过设置柱状图的横轴、纵轴、图例、数据内容等来绘制柱状图。
最终绘制出的柱状图如下所示:
图 2 标准柱状图绘制结果
堆积柱状图
什么是堆积柱状图,就是标准柱状图的每一个柱子由几根小的柱子上下堆叠组成,如下是一个例子:
图 3 堆积柱状图
堆积柱状图的程序和标准柱状图差不多,区别是其中的series
有好几段数据组成,如下的程序就是实现上面的堆积柱状图的:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script type="text/JavaScript" src="../static/echarts.min.js"></script>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
myChart.setOption({
title : {
text : "杭州地铁客流情况"//标题
},
tooltip : {
},
legend: {
data:['1号线', '2号线','4号线','5号线']//图例
},
xAxis : [
{
type : 'category',//表示x轴的每一项由几组数据组成
data : ['周一','周二','周三','周四','周五','周六','周日']//x轴标题
}
],
yAxis : [
{
type : 'value'//每一项都是数据
}
],
series : [
{
name:'1号线',//数据的名字
type:'bar',//表示柱状图
stack: '总量',//数据系列的名字,stack相同的数据才会堆到一个柱子上
itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},//柱子样式
data:[37, 35, 38, 36, 37, 45, 48]//数据
},
{
name:'2号线',
type:'bar',
stack: '总量',
itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
data:[47, 48, 47, 46, 48, 59, 57]
},
{
name:'4号线',
type:'bar',
stack: '总量',
itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
data:[32, 33, 32, 34, 35, 40, 42]
},
{
name:'5号线',
type:'bar',
stack: '总量',
itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
data:[61, 63, 61, 62, 63, 75, 76]
}
]
});
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
上面的注释已经很详细了,唯一需要提醒的是,只有当stack
的值相同时,数据才会堆到同一个柱子上。比如当我们把1
号线的stack
改为“总量2”时,表示1
号线客流的柱子就会单独被拎出来,如下:
图 3 stack值不同时,单独被拎出来的1号线
编程要求
根据提示,在右侧编辑器Begin
和End
之间补充代码,将如下所示的数据绘制为柱状图:
港口名\集装箱吞吐量 | 周一 | 周二 | 周三 | 周四 | 周五 |
---|---|---|---|---|---|
A港口 | 37 | 35 | 38 | 36 | 37 |
B港口 | 47 | 48 | 47 | 46 | 48 |
C港口 | 32 | 33 | 32 | 34 | 35 |
D港口 | 61 | 63 | 61 | 62 | 63 |
数据地址为:http://127.0.0.1:8080/static/data.txt
绘制出来的图需要和如下的相同:
图 4 结果图
要点(以图片为准,这里仅为提示作用):
- 标题为“港口集装箱吞吐量”;
- 港口
A
和港口B
在一个柱子上,港口C
和港口D
分别为一个柱子; - 柱子的样式(
itemStyle
)为:{ normal: {label : {show: true, position: 'insideRight'}}}
测试说明
我们将调用浏览器接口,打开你修改的这段代码生成的网页,并截图获取其中的图像,和正确的图像进行对比,从而判断你补充的程序是否正确,正确将输出:“图像对比一致,恭喜通关!”
同时我们将展示你生成的图像和正确的图像,你可以通过观察图像的方式修改自己尚未通过的代码。
测试输入: 预期输出:图像对比一致,恭喜通关
代码文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script type="text/JavaScript" src="../static/jquery.min.js"></script>
<script type="text/JavaScript" src="../static/echarts.min.js"></script>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
url = "http://127.0.0.1:8080/static/data.txt";
/********* Begin *********/
myChart.setOption({
title : {
text : "港口集装箱吞吐量"//标题
},
tooltip : {
},
legend: {
data:['A港口', 'B港口','C港口','D港口']//图例
},
xAxis : [
{
type : 'category',//表示x轴的每一项由几组数据组成
data : ['周一','周二','周三','周四','周五']//x轴标题
}
],
yAxis : [
{
type : 'value'//每一项都是数据
}
],
series : [
{
name:'A港口',//数据的名字
type:'bar',//表示柱状图
stack: '总量',//数据系列的名字,stack相同的数据才会堆到一个柱子上
itemStyle : { normal: {show: true, position: 'insideRight'}},//柱子样式
data:[37, 35, 38, 36, 37]//数据
},
{
name:'B港口',
type:'bar',
stack: '总量',
itemStyle : { normal: {show: true, position: 'insideRight'}},
data:[47, 48, 47, 46, 48]
},
{
name:'C港口',
type:'bar',
stack: '总量2',
itemStyle : { normal: {show: true, position: 'insideRight'}},
data:[32, 33, 32, 34, 35]
},
{
name:'D港口',
type:'bar',
stack: '总量3',
itemStyle : { normal: {show: true, position: 'insideRight'}},
data:[61, 63, 61, 62, 63]
}
]
});
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
/********* End *********/
</script>
</body>
</html>