本文介绍了如何在Echarts中绘制标准折线图、堆积折线图以及阶梯图，并提供了相应的编程实例。详细讲解了每种图形的绘制步骤和代码实现，最后提出了编程要求和测试说明。
任务描述
本关任务：按照要求绘制阶梯图。
相关知识
本关将介绍Echart中折线图的绘制，包括标准折线图、堆积折线图等。
折线图有多个变种，包括堆积折线图、堆积面积图、阶梯图等。
学习本关之前，请按照顺序先学习Echarts系列的前两个实训。
标准折线图
标准折线图是最通用的一种折线图，如下所示是一个示例：
图 1 标准折线图
其中x轴表示数据项，因为折线图通常用来表示一个数据随时间的变化情况，所以x轴最常见的数据项是时间。
y轴用来表示数据的值。
如果你顺序学习过前面的教程，就会发现折线图的绘制和柱状图几乎一模一样，区别是series中的type属性的值是line，而柱状图是bar。
绘制最简单的标准折线图的代码如下所示：
<!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: '某商场一周客流人数的折线图' //柱状图标题},tooltip: {}, //工具框legend: {data:['客流量'] //图例},xAxis: {name: "时间",//x轴标题data: ["星期一","星期二","星期三","星期四","星期五","星期六", "星期日"]//x轴每一行的内容},yAxis: {name:"客流量"//y轴标题},series: [{//数据内容name: '销量',//数据名称type: 'line',//数据形式，line表示折线图data: [1150, 1220, 1226, 1410, 1960, 2940, 2820],//数据itemStyle: {normal: {// 拐点上显示数值label : {show: true},lineStyle:{// 设置线的颜色和透明度color: 'rgba(23,244,109,1)'}}}}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);</script></body></html>
上面的每一行代码都给出了注释，总的来说，绘制折线图分为如下几个步骤：
- 准备一个
dom元素用来放置柱状图； - 使用
Option设置折线图的内容； - 通过
setOption显示柱状图。
其中第二步是最核心的，在这一步中，我们通过设置折线图的横轴、纵轴、图例、数据内容等来绘制折线图。
最终绘制出的折线图如下所示：
图 2 标准折线图绘制结果
阶梯图
阶梯图是一种比较特殊的折线图，阶梯图使用间歇型跳跃的方式显示一种无规律的数据的变化。图像呈现阶梯状而不是折线。这种图像通常用于某些在经过一次变化之后会稳定一段时间的数据，比如汽油的价格。如下是一个阶梯图的例子：
图 3 阶梯图
阶梯图的画法和标准折线图几乎一模一样，唯一的区别是阶梯图在series中需要给每一列数据设置属性step，且属性的值需要从start、middle和end中选择一个，分别表示横轴每一项的中点在阶梯的开始、中间还是结尾处，如下是官网给出的示例图：
图 4 step的不同取值对应的阶梯图
所以，阶梯图的程序如下所示：
<!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: '国内油价走势图' //柱状图标题},tooltip: {}, //提示框legend: {data:['油价'] //图例},xAxis: {name: "时间",//x轴标题data: ["2012年3月","2012年4月","2012年5月","2012年6月","2012年7月","2012年8月", "2012年9月"]//x轴每一行的内容},yAxis: {name:"油价"//y轴标题},series: [{//数据内容name: '销量',//数据名称type: 'line',//数据形式，bar表示柱状图step: 'end',data: [7.1, 7.3, 7.3, 6.9, 7.2, 7.2, 7.5],//数据itemStyle: {normal: {// 拐点上显示数值label : {show: true},lineStyle:{// 设置线的颜色和透明度color: 'rgba(123,244,9,1)'}}}}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);</script></body></html>
这段程序最终的效果就是上面的图3，这里我不再重复的给出。
堆积折线图
堆积折线图和堆积柱状图一模一样，区别是series中的type需要从bar改成line，我们把柱状图实训的堆积柱状图程序搬运过来，改一下type参数即可，其程序如下所示：
<!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:'line',//表示柱状图stack: '总量',//数据系列的名字，stack相同的数据才会堆到一个柱子上itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},//柱子样式data:[37, 35, 38, 36, 37, 45, 48]//数据},{name:'2号线',type:'line',stack: '总量',itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},data:[47, 48, 47, 46, 48, 59, 57]},{name:'4号线',type:'line',stack: '总量',itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},data:[32, 33, 32, 34, 35, 40, 42]},{name:'5号线',type:'line',stack: '总量',itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},data:[61, 63, 61, 62, 63, 75, 76]}]});// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);</script></body></html>
画出来的堆积折线图如下所示：
图 5 堆积折线图
编程要求
根据提示，在右侧编辑器Begin和End之间补充代码，这段代码由上面的堆积折线图示例代码修改而来，你需要补充完这段代码，实现将所有的四条折线都改成阶梯图：其中地铁1号线和4号线需要改成横轴每一项的中点在阶梯的开始处，地铁2号线和5号线需要改成横轴每一项的中点在阶梯的结尾处。
测试说明
我们将调用浏览器接口，打开你修改的这段代码生成的网页，并截图获取其中的图像，和正确的图像进行对比，从而判断你补充的程序是否正确，正确将输出：“图像对比一致，恭喜通关！”
同时我们将展示你生成的图像和正确的图像，你可以通过观察图像的方式修改自己尚未通过的代码。
测试输入： 预期输出：图像对比一致，恭喜通关！
代码文件如下：
<!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:'line',//表示柱状图
stack: '总量',//数据系列的名字，stack相同的数据才会堆到一个柱子上
/********* Begin *********/
step:'start',
/********* End *********/
itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},//柱子样式
data:[37, 35, 38, 36, 37, 45, 48]//数据
},
{
name:'2号线',
type:'line',
stack: '总量',
/********* Begin *********/
step:'end',
/********* End *********/
itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
data:[47, 48, 47, 46, 48, 59, 57]
},
{
name:'4号线',
type:'line',
stack: '总量',
/********* Begin *********/
step:'start',
/********* End *********/
itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
data:[32, 33, 32, 34, 35, 40, 42]
},
{
name:'5号线',
type:'line',
stack: '总量',
/********* Begin *********/
step:'end',
/********* End *********/
itemStyle : { normal: {label : {show: true, position: 'insideRight'}}},
data:[61, 63, 61, 62, 63, 75, 76]
}
]
});
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
