先看效果图,效果图如下。
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 } ] }); }