ECharts 傳值改變圖表
阿新 • • 發佈：2018-11-19
使用echarts 外掛，選擇月份改變圖表資料
效果圖：
預設顯示
選擇月份顯示：
js部分程式碼
<body> <div> <div class="text-c"> <span class="select-box inline"> <select name="type_month" id="type_month" class="select" onchange="echartsdate()"> </select> </span> </div> <div class="count"> <div id="main1" class="main1"></div> </div> </div> <script type="text/javascript"> $(function(){ realSysTime(); echartsdate(0);//預設載入當前月 }) function realSysTime(){ var data =datayear(); $("#type_month").append("<option value=\"0\">"+data[0]+"</option>") $("#type_month").append("<option value=\"1\">"+data[1]+"</option>") $("#type_month").append("<option value=\"2\">"+data[2]+"</option>") $("#type_month").append("<option value=\"3\">"+data[3]+"</option>") $("#type_month").append("<option value=\"4\">"+data[4]+"</option>") $("#type_month").append("<option value=\"5\">"+data[5]+"</option>") } function datayear(){ //建立現在的時間 var data=new Date(); //獲取年 var year=data.getFullYear(); //獲取月 var mon=data.getMonth()+2; var arry=new Array(); for(var i=0;i<6;i++){ mon=mon-1; if(mon<=0){ year=year-1; mon=mon+12; } if(mon<10){ mon="0"+mon; } arry[i]=year+"-"+mon; } return arry; } </script> <script type="text/javascript"> // 基於準備好的dom，初始化echarts例項 function echartsdate(month){ month = $('#type_month').val(); var myChart = echarts.init(document.getElementById('main1')); myChart.showLoading(); //資料載入完之前先顯示一段簡單的loading動畫 var days=[]; //類別陣列（實際用來盛放X軸座標值） var nums=[]; //銷量陣列（實際用來盛放Y座標值） var loseorder=[];//未接 var getorder=[];//完成 $.ajax({ type : "post", async : false, //非同步請求（同步請求將會鎖住瀏覽器，使用者其他操作必須等待請求完成才可以執行） url : "<%=basePath%>timeOrderbymonth.action?method=timeOrderListbyMonth&month="+month, dataType : "json", //返回資料形式為json success : function(result) { //請求成功時執行該函式內容，result即為伺服器返回的json物件 if (result) { for(var i=0;i<result.length;i++){ days.push(result[i].month); //挨個取出日期並填入日期陣列 } for(var i=0;i<result.length;i++){ nums.push(result[i].count); //挨個取出輸了並填入數量陣列 } for(var i=0;i<result.length;i++){ loseorder.push(result[i].loseorder); //挨個取出未接並填入未接陣列 } for(var i=0;i<result.length;i++){ getorder.push(result[i].getorder); //挨個取出完成並填入完成陣列 } myChart.hideLoading(); //隱藏載入動畫 myChart.setOption({ //載入資料圖表 tooltip: { trigger: 'axis', axisPointer: { type: 'cross', crossStyle: { color: '#999' } } }, toolbox: { feature: { dataView: {show: true, readOnly: false}, magicType: {show: true, type: ['line', 'bar']}, restore: {show: true}, saveAsImage: {show: true} } }, legend: { data:['已取消','已完成','總訂單數'] }, xAxis: [ { type: 'category', data: days, axisPointer: { type: 'shadow' } } ], yAxis: [ { type: 'value', name: '取消/完成訂單數', axisLabel: { formatter: '{value}' } }, { type: 'value', name: '總訂單數', axisLabel: { formatter: '{value}' } } ], series: [ { name:'已取消', type:'bar', data:loseorder }, { name:'已完成', type:'bar', data:getorder }, { name:'總訂單數', type:'line', yAxisIndex: 1, data:nums } ] }); } }, error : function(errorMsg) { //請求失敗時執行該函式 alert("圖表請求資料失敗!"); myChart.hideLoading(); } }); } </script> </body>