<!DOCTYPE html>
<html>
<head></head>
<body>
<div class="row form-inline form-ranking">
<div class="form-group">
<label class="control-label">店鋪：</label>
<select class="form-control" tabindex="-1" aria-hidden="true" name="last_day" id="time_slot">
<option value="7">最近7天</option>
<option value="15">最近15天</option>
<option value="30">最近30天</option>
<option value="self">自定義</option>
</select>
</div>
<div class="form-group" style="display: none;" id="selfDefined">
<label class="control-label">記錄時間：</label>
<input class="form-control datepicker" name="recordStartLine" type="text">
<span class="add-on control-label">至</span>
<input class="form-control datepicker" name="recordEndLine" type="text">
<button class="btn btn-primary btn-search-line mr10" type="submit">
<i class="fa fa-search"></i> 刷新
</button>
</div>
<div id="linechartmain" style="height: 400px; background: transparent;">
//折線堆疊圖
var lineChart = echarts.init(document.getElementById('linechartmain'));
function buildLineChart(){
var slot = $('#time_slot').val();
var start = $("input[name='recordStartLine']").val();
var end = $("input[name='recordEndLine']").val();
if(slot == 'self'){
var diff = DateDiff(end,start);
if(start == "" || end == ""){
alert("請選擇開始時間和結束時間!");return false;
}
if(diff < 0 || diff > 29){
alert("請選擇爭取的時間區間.不能超過30天!");return false;
}
}
$.ajax({
url: 'url',
type: 'POST',
data: {slot:slot,_token: g._token,start:start,end:end},
success: function(res){
var result = JSON.parse(res);
// console.log(res);
option = {
title: {
text: '折線圖堆疊',
subtext : '單位:元'
},
tooltip: {
trigger: 'axis'
},
legend: {
data:['京東店', '旗艦店','合計']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: result['x']
},
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value} 元'
}
},
series: [
{
name:'京東店',
type:'line',
stack: '總量2',
itemStyle : {
normal : {
color:'#228B22',
lineStyle:{
color:'#228B22'
}
}
},
data:result[2]
},
{
name:'旗艦店',
type:'line',
stack: '總量4',
itemStyle : {
normal : {
color:'#DC143C',
lineStyle:{
color:'#DC143C'
}
}
},
data:result[4]
},{
name:'合計',
type:'line',
stack: '總量t',
data:result['t']
},
]
};
lineChart.setOption(option);
}
});
}
buildLineChart();
</body>
</html>其中 stack 取不同的值，Y軸的數據就不會疊加在一起；如果是相同的值，則會疊加在一起。
PS：PHP接口返回的數據格式，如$a = [1,2,4,6,7,8]，然後直接變成json格式返回即可。