Echarts堆叠折线图ajax获取数据展示

先看效果图，效果图如下。

html

<div class="row" >
<div id="main"></div>
</div>

js

// ajax加载数据
$.ajax({
    url : ROOT + "/index/count",
    async : false,
    type : 'GET',
    dataType : 'json',
    success : function(obj) {
        zFun(obj.echatX, obj.echatY, obj.echatY2, obj.echatY3);
        // xFun(obj.echatX, obj.echatY4);
    },
});

function zFun(x, y, y2, y3) {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    console.log(x);
    console.log(y);
    console.log(y2);
    console.log(y3);
    // 指定图表的配置项和数据
    myChart.setOption({
        title : {
            text : '统计'
        },
        tooltip : {
            trigger : 'axis',
            axisPointer : {
                type : 'cross',
                label : {
                    backgroundColor : '#6a7985'
                }
            }
        },
        legend : {
            data : [ '进厂', '服务', '离厂' ]
        },
        toolbox : {

        },
        grid : {
            left : '3%',
            right : '4%',
            bottom : '3%',
            containLabel : true
        },
        xAxis : [ {
            type : 'category',
            boundaryGap : false,
            data : x
        } ],
        yAxis : [ {
            type : 'value'
        } ],
        series : [ {
            name : '进厂',
            type : 'line',
            stack : '总量',
            itemStyle : {
                normal : {
                    color : '#a8bcd4'
                }
            },
            areaStyle : {
                normal : {}
            },
            data : y
        }, {
            name : '服务',
            type : 'line',
            stack : '总量',
            itemStyle : {
                normal : {
                    color : '#a8bcd4'
                }
            },
            areaStyle : {
                normal : {}
            },
            data : y3
        },

        {
            name : '离厂',
            type : 'line',
            stack : '总量',
            itemStyle : {
                normal : {
                    color : '#a8bcd4'
                }
            },
            label : {
                normal : {
                    show : true,
                    position : 'top'
                }
            },
            areaStyle : {
                normal : {}
            },
            data : y2
        } ]

    });
}

原文作者：祈澈姑娘 技术博客：https://www.jianshu.com/u/05f416aefbe1
90后前端妹子，爱编程，爱运营，文艺与代码齐飞，魅力与智慧共存的程序媛一枚。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，对于博客上面有不会的问题，可以加入qq技术交流群聊：649040560。