ECharts多個折線圖動態獲取json資料
阿新 • • 發佈:2019-02-10
ECharts 多個折線圖動態獲取json資料
效果圖如下:
一.html部分
<p id="TwoLineChart" style="width:100%; height:400px;"></p>
二.js部分
<script type="text/JavaScript"> function loadTwoLine() { var myChart = echarts.init(document.getElementById('TwoLineChart')); // 顯示標題,圖例和空的座標軸 myChart.setOption({ title: { text: '非同步資料載入示例' }, tooltip: { trigger: 'axis' }, legend: { data: ['進件', '辦結'] }, toolbox: { show: true, feature: { mark: { show: true }, dataView: { show: true, readOnly: false }, magicType: { show: true, type: ['line', 'bar'] }, restore: { show: true }, saveAsImage: { show: true } } }, calculable: true, xAxis: { type: 'category', boundaryGap: false, //取消左側的間距 data: [] }, yAxis: { type: 'value', splitLine: { show: false },//去除網格線 name: '' }, series: [{ name: '進件', type: 'line', symbol: 'emptydiamond', //設定折線圖中表示每個座標點的符號 emptycircle:空心圓;emptyrect:空心矩形;circle:實心圓;emptydiamond:菱形 data: [] }, { name: '辦結', type: 'line', symbol: 'emptydiamond', //設定折線圖中表示每個座標點的符號 emptycircle:空心圓;emptyrect:空心矩形;circle:實心圓;emptydiamond:菱形 data: [] }] }); myChart.showLoading(); //資料載入完之前先顯示一段簡單的loading動畫 var names = []; //類別陣列(實際用來盛放X軸座標值) var series1 = []; var series2 = []; $.ajax({ type: 'get', url: 'json/echarts/line/lineTwo.txt',//請求資料的地址 dataType: "json", //返回資料形式為json success: function (result) { //請求成功時執行該函式內容,result即為伺服器返回的json物件 $.each(result.jinJian, function (index, item) { names.push(item.AREA); //挨個取出類別並填入類別陣列 series1.push(item.LANDNUM); }); $.each(result.banJie, function (index, item) { series2.push(item.LANDNUM); }); myChart.hideLoading(); //隱藏載入動畫 myChart.setOption({ //載入資料圖表 xAxis: { data: names }, series: [{ data: series1 }, { data: series2 }] }); }, error: function (errorMsg) { //請求失敗時執行該函式 alert("圖表請求資料失敗!"); myChart.hideLoading(); } }); }; loadTwoLine(); </script>
三.json格式如下:
{"jinJian":[{"AREA":"選址階段","LANDNUM":190},{"AREA":"用地階段","LANDNUM":200},{"AREA":"設計方案","LANDNUM":310},{"AREA":"工程規劃","LANDNUM":290},{"AREA":"施工許可","LANDNUM":260},{"AREA":"銷售許可","LANDNUM":300},{"AREA":"規劃驗收","LANDNUM":320},{"AREA":"綜合驗收","LANDNUM":290},{"AREA":"檔案驗收","LANDNUM":280}],"banJie":[{"AREA":"選址階段","LANDNUM":100},{"AREA":"用地階段","LANDNUM":120},{"AREA":"設計方案","LANDNUM":140},{"AREA":"工程規劃","LANDNUM":160},{"AREA":"施工許可","LANDNUM":180},{"AREA":"銷售許可","LANDNUM":200},{"AREA":"規劃驗收","LANDNUM":220},{"AREA":"綜合驗收","LANDNUM":240},{"AREA":"檔案驗收","LANDNUM":250}]}