<!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格式返回即可。
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦