继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

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

大吉大利今晚学习
关注TA
已关注
手记 265
粉丝 36
获赞 142

         

<!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>&nbsp;刷新        </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格式返回即可。

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP