堆积折线图的作用是用于显示每一数据所占大小随时间或有序类别而变化的趋势，展示的是部分与整体的关系。 堆积面积图是在折线图中添加面积图，属于组合图形中的一种。堆积面积图又被称为堆积区域图，它强调数量随时间而变化的趋势，用于引起人们对总值趋势的注意。与堆积折线图不同，堆积面积图可以更好地显示有很多类别或数值近似的数据。 在ECharts中，实现堆积的重要参数为stack。只要将stack的值设置为相同，两组就会堆积；相反，若将stack的值设置为不相同，则不会堆积。
利用某商城一周内电子产品的销量数据绘制堆积面积图，如图所示。 由堆积面积图可知，从下往上看，第2条线的数值=本身的数值+第1条线的数值，第3条线的数值=第2条线图上的数值+本身的数值，依此类推。以周三的数据为例，堆叠面积图实际显示的是：手机=456，冰箱=456+391=847，空调=847+331=1178，电视=1178+333=1511，其他=1511+432=1943。
如果需要实现堆积折线图（Stacked Line Chart），那么只需要在堆积面积图代码中，注释掉series中的每组数据中areaStyle所在的代码行即可，如//areaStyle:{}。堆积折线图的效果如图所示。
源代码如下：
<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: 20, //设置适当调整工具框的left位置
top: 3 //设置适当调整工具框的top位置
},
tooltip: { //配置提示框组件
trigger: 'axis'
},
legend: { //配置图例组件
data: ['手机', '冰箱', '空调', '电视', '其他'],
left: 160, //设置适当调整工具框的left位置
top: 3 //设置适当调整工具框的top位置
},
toolbox: { //配置工具箱组件
show: true,
orient: 'vertical',
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
restore: { show: true },
saveAsImage: { show: true }
},
top: 52, //设置适当调整工具框的top位置
left: 550 //设置适当调整工具框的left位置
},
calculable: true,
xAxis: [ //配置X轴坐标系
{
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
}
],
yAxis: [ //配置Y轴坐标系
{
type: 'value'
}
],
series: [ //配置数据系列
{
name: '手机',
type: 'line', //设置指定显示为折线
stack: '总量', //smooth:true,
color: 'rgb(0,0,0)',
itemStyle: {
normal:
{
//areaStyle: { type: 'default', color: 'rgb(174,221,139)' }
}
},
data: [434, 345, 456, 222, 333, 444, 432]
},
{
name: '冰箱',
type: 'line', //设置指定显示为折线
stack: '总量', //设置堆积
color: 'blue',
itemStyle: {
normal: {
//areaStyle: { type: 'default', color: 'rgb(107,194,53)' }
}
},
data: [420, 282, 391, 344, 390, 530, 410]
},
{
name: '空调',
type: 'line', //设置指定显示为折线
stack: '总量', //设置堆积
color: 'red',
itemStyle: {
normal: {
//areaStyle: { type: 'default', color: 'rgb(6,128,67)' }
}
},
data: [350, 332, 331, 334, 390, 320, 340]
},
{
name: '电视',
type: 'line', //设置指定显示为折线
stack: '总量', //设置堆积
color: 'green',
itemStyle: {
normal: {
//areaStyle: { type: 'default', color: 'grey' }
}
},
data: [420, 222, 333, 442, 230, 430, 430]
},
{
name: '其他',
type: 'line', //设置指定显示为折线
stack: '总量', //设置堆积
color: '#FA8072',
itemStyle: {
normal: {
//areaStyle: { type: 'default', color: 'rgb(38,157,128)' }
}
},
data: [330, 442, 432, 555, 456, 666, 877]
}
]
};
//使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>
