折线图（Line）也是最为常用的图表之一，核心思想是趋势变化。 折线图是点、线连在一起的图表，可反映事物的发展趋势和分布情况，适合在单个数据点不那么重要的情况下表现变化趋势、增长幅度。 为了更直观地查看商品销售数据和名胜风景区的门票价格数据，需要在ECharts中绘制不同的折线图进行展示，如标准折线图、堆积面积图、堆积折线图和堆积面积折线图。
标准折线图是指由x轴与y轴组成区域内的一些点、线，以及这些点、线或坐标轴的文字描述，常用于显示数据随时间或有序类别而变化的趋势，可以很好地表现出数据是递增还是递减、增减的速率、增减的规律（周期性、螺旋性等）、峰值等特征。在折线图中，通常沿横轴标记类别，沿纵轴标记数值。 利用某都市一周内的人流量统计数据绘制标准折线图，如图所示。 由图可知，图形为标准的折线图，其中只包含一条折线、数据网格、标题、图例、x轴、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 = {
backgroundColor: '#eee',
title: { //配置标题组件
text: "某都市的人流统计", //设置主标题
textStyle: { //设置主标题文字样式
color: 'red',
},
x: 'center'
},
tooltip: { //配置提示框组件
trigger: 'axis'
},
legend: {
data: ['人流量'],
left: 'right'
},
xAxis: [ //配置X轴坐标轴
{
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
}
],
yAxis: [ //配置Y轴坐标轴
{
type: 'value'
}
],
series: [ //配置数据系列
{
name: '人流量',
type: 'line', //设置指定显示为折线
data: [80, 125, 160, 140, 200, 245, 155],
smooth: true
},
]
};
//使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>
