您的位置：首页 > 其它

echart折线堆叠图 Y轴数据不堆叠

2017-09-14 16:59 267 查看

<!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格式返回即可。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 折线 echart 堆叠图

相关文章推荐

新的分享

章节导航