阶梯图为折线图的一种类型。与折线图不同的是，阶梯图是使用间歇型跳跃的方式显示一种无规律数据的变化，用于显示某变量随时间的变化模式是上升还是下降。在现实生活中，无规律的数据有很多，例如：公共汽车票价一般会保持几个月到几年不变，然后某天突然加价或降价；名胜风景区的门票价格也会在一段时间内维持在同一价格。诸如此类的还有不少，如油价、税率、邮票价、某些商品价格等。 利用某风景名胜区门票价格数据绘制阶梯图，如图所示。
由图可知，图形显示的是景区A、景区B和景区C三种不同旅游景区门票在一段时期内的价格波动。不过门票的价格波动不像一般的商品，波动不是连续平滑的，而是一种阶梯状、锯齿状。 由前面介绍的3种折线图可知，折线图是点、线连在一起的图表，可反映事物的发展趋势和分布情况，适合在单个数据点不那么重要的情况下表现数据的变化趋势、增长幅度。如果一定要展示多条折线，那么最好不要同时展示超过5条。如果一定要用双Y轴，那么必须确保这两个指标是有关系的。
源代码如下：
<html>
<head>
<meta charset="utf-8">
<!--引入ECharts脚本-->
<script src="js/echarts.js"></script>
</head>
<body>
<!---为ECharts准备一个具备大小（宽高）的DOM-->
<div id="main" style="width: 600px; height: 400px"></div>
<script type="text/javascript">
//基于准备好的DOM，初始化ECharts图表
var myChart = echarts.init(document.getElementById("main"));
//指定图表的配置项和数据
var option = {
title: { //配置标题组件
text: "风景名胜区门票价格", //设置主标题
textStyle: { //设置主标题文字样式
color: 'green',
},
left: 15, //适当调整标题的lef位置
top: 0 //适当调整标题的topt位置
},
tooltip: { //配置提示框组件
trigger: 'axis'
},
legend: { //配置图例组件
data: ['景区A', '景区B', '景区C'],
left: 260, //适当调整工具框的left位置
top: 3 //适当调整工具框的top位置
},
grid: { //配置网格组件
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: { //配置工具箱组件
feature: {
saveAsImage: {}
}
},
xAxis: { //配置X轴坐标系
type: 'category',
data: ['2013年', '2014年', '2015年', '2016年', '2017年', '2018年', '2019年']
},
yAxis: { //配置Y轴坐标系
type: 'value'
},
series: [ //配置数据系列
{
name: '景区A',
type: 'line', //设置指定显示为折线
step: 'start', //设置指定折线的显示样式
data: [120, 140, 120, 160, 250, 280, 240]
},
{
name: '景区B',
type: 'line', //设置指定显示为折线
step: 'middle', //设置指定折线的显示样式
data: [220, 280, 300, 350, 320, 380, 350]
},
{
name: '景区C',
type: 'line', //设置指定显示为折线
step: 'end', //设置指定折线的显示样式
data: [400, 480, 540, 450, 580, 750, 650]
}
]
};
//使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>
