echarts ajax 動態獲取資料
阿新 • • 發佈:2019-01-06
keys 和 values 都是動態資料 注意如果資料是{value:335, name:'直接訪問'}這種格式 需要使用eval('(' + strtojson + ')') 轉一下
//載入圖表 start $(function(){ $.ajax({ //提交資料的型別 POST GET type:"POST", //提交的網址 //url:"http://localhost:8080/lightmanger/filemanager/fileDownload/fileDownloadPie", url:"<%=request.getContextPath()%>/filemanager/fileDownload/fileDownloadPie", //提交的資料 data:{}, //返回資料的格式 datatype: "html",//"xml", "html", "script", "json", "jsonp", "text". //在請求之前呼叫的函式 beforeSend:function(){$("#msg").html("lodding");}, //成功返回之後呼叫的函式 success:function(result){ result = $.parseJSON(result); var keys=[]; //類別陣列(實際用來盛放X軸座標值) var values=[]; //銷量陣列(實際用來盛放Y座標值 var keysArray= new Array(); keysArray=result.key.split("#"); //字元分割 for (var i=0;i<keysArray.length ;i++ ) { keys.push(keysArray[i]); } var valuesArray= new Array(); valuesArray=result.value.split("#"); //字元分割 for (var i=0;i<valuesArray.length ;i++ ) { values.push(eval('(' + valuesArray[i] + ')')); } var myChart = echarts.init(document.getElementById('mainPie')); option = { title : { text: '自升級使用者訪下載量', subtext: 'apk下載量', x:'center' }, tooltip : { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, legend: { orient: 'vertical', left: 'left', //data:['直接訪問','郵件營銷','聯盟廣告','視訊廣告','搜尋引擎'] data:keys }, series : [ { name: '下載次數', type: 'pie', radius : '55%', center: ['50%', '60%'], data:values, /* [ {value:335, name:'直接訪問'}, {value:310, name:'郵件營銷'}, {value:234, name:'聯盟廣告'}, {value:135, name:'視訊廣告'}, {value:1548, name:'搜尋引擎'} ], */ itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' } } } ] }; myChart.setOption(option); } , //呼叫執行後呼叫的函式 complete: function(XMLHttpRequest, textStatus){ //alert(XMLHttpRequest.responseText); //alert(textStatus); }, //調用出錯執行的函式 error: function(){ //請求出錯處理 } }); }); //載入圖表 end