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.songma.com/u/05f416aefbe1
90后前台妹子，爱编程，爱经营，文艺与代码齐飞，魅力与智慧共存的程序媛一枚。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，对于博客上面有不会的问题，可以加入qq技术交流群聊：649040560。

上一篇 目录 下一篇