echarts 柱狀圖,折線圖互轉例項(資料動態請求後臺)
阿新 • • 發佈:2018-12-29
function initDayChart(){ var myChart = echarts.init(document.getElementById('appLoginLogDayChart')); myChart.setOption({ title : { text : '每日活躍使用者總數分析', left : 'center', top : 20, textStyle : { color : '#555' } }, tooltip: {}, legend: {}, toolbox : { show : true, feature : { magicType : { show : true, type : [ 'line', 'bar' ] }, restore : { show : true }, saveAsImage : { show : true, title : '儲存為圖片', type : 'png', lang : [ '點選儲存' ] } } }, grid: { y2: 140 }, xAxis: { data: [] }, yAxis: [ { type : 'value', name: '人', splitArea : { show : true } } ], series: [{ name: '當日使用者總數', type: 'bar', data: [], barWidth : 30, }] }); myChart.showLoading(); var date=[]; var nums=[]; $.ajax({ url : "indexController/process/getLoginLogData/sumDay", type : 'post', async : true, data : {"startDate":$("#startDate").val(),"endDate":$("#endDate").val()}, success : function(data) { var rows = data.result; for (var i = rows.length-1; i >= 0; i--) { date.push(rows[i].date); } for (var i = rows.length-1; i >= 0; i--) { nums.push(rows[i].countNum); } myChart.hideLoading(); myChart.setOption({ //載入資料圖表 xAxis: { name: '日', data: date, type : 'category', axisLabel:{ interval:0,//橫軸資訊全部顯示 rotate:-45,//-30度角傾斜顯示 }, }, series: [{ data: nums }] }); }, error : function(){ myChart.hideLoading(); } }); }