Echarts教程之通過Ajax實現(xiàn)動態(tài)加載折線圖的方法
更新時間:2018年04月11日 10:00:23 作者:alex_fung
這篇文章主要介紹了Echarts教程之通過Ajax實現(xiàn)動態(tài)加載折線圖的方法,需要的朋友可以參考下
一、GIF圖
二、前臺代碼
// 調用方法 hotlineLine(); // 定時刷新 setInterval(function () { hotlineLine(); },5000); function hotlineLine(){ // 初始化圖表元素 var hotlineLine = echarts.init(document.getElementById('hotlineLine_id')); $.get('${pageContext.request.getContextPath()}/m/hotline.do', function (res) { var option = { // 提示框組件,鼠標經過餅圖時會出現(xiàn)提示框 tooltip: { // 觸發(fā)類型 // 坐標軸觸發(fā),主要在柱狀圖,折線圖等會使用類目軸的圖表中使用。 trigger: 'axis' }, // 每條折線的顏色 color: ['#87CEFA', '#9AFF9A', '#C0FF3E','#DB7093'], // 圖例組件 legend: { // 內容 data:['呼入', '呼出', '應答', '用戶放棄'], // 樣式 textStyle:{ fontSize:10, color:'#66ffff' }, // 上距離,類似css中的margin top:'5%' }, // 網格 grid: { // 左距離 left: '7%', right: '5%', bottom: '10%', top:'20%' }, // 橫坐標 xAxis: { // 類型 type: 'category', // 刻度 data: ['08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00', '24:00'], // 樣式 axisLine:{ // 橫坐標線的顏色 lineStyle:{ color:'#66ffff' } } }, yAxis: { type: 'value', name: '次數(shù)', axisLabel: { formatter: '{value}' }, axisLine:{ lineStyle:{ color:'#66ffff' } }, splitLine:{ show: true, lineStyle:{ color:'#66ffff' } } }, series: [ { name:'呼入', type:'line', data:res[3] }, { name:'呼出', type:'line', data:res[2] }, { name:'應答', type:'line', data:res[1] }, { name:'用戶放棄', type:'line', data:res[0] } ], // 文本標簽 label: { //是否展示 show: true, position: 'top', textStyle: { fontWeight:'bolder', fontSize : '12', fontFamily : '微軟雅黑', color:defaultColor } } }; hotlineLine.setOption(option); }); } <div class="rightMain01-sub03 box-border"> <div class="box-title">話務指標趨勢圖</div> <div class="rightMain01-sub03-data"> <div id="hotlineLine_id" style="height:340px;"></div> </div> </div>
三、后臺代碼
List<List<Integer>> hotlineList = new ArrayList<List<Integer>>(); @RequestMapping("/m/hotline.do") @ResponseBody public JSONArray hotline() { List<List<Integer>> returnList = new ArrayList<List<Integer>>(); if (hotlineList.size() == 0 || hotlineList.get(0).size() >= 9) { hotlineList.clear(); for (int i = 0; i < 4; i++) { List<Integer> l = new ArrayList<Integer>(); l.add(i * 5 + AlexUtils.getRandomInteger(0, 5)); hotlineList.add(l); } } for (int i = 0; i < hotlineList.size(); i++) { List<Integer> list = hotlineList.get(i); int thisSize = list.size(); if (thisSize < 5) { list.add(list.get(thisSize - 1) + AlexUtils.getRandomInteger(1, 5)); } else { list.add(list.get(thisSize - 1) - AlexUtils.getRandomInteger(1, 5)); } returnList.add(list); } hotlineList = returnList; return JSONArray.fromObject(returnList); } public static int getRandomInteger(int min, int max) { int diff = max - min; return min + new Random().nextInt(diff); }
數(shù)據格式:
1.[[1,3,4,5,7],[6,9,11,12,13],[10,11,12,13,16],[16,19,21,22,24]]
總結
以上所述是小編給大家介紹的Echarts教程之通過Ajax實現(xiàn)動態(tài)加載折線圖的方法,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持!
相關文章
空格或者空白字符導致$.ajax()報parseerror錯誤小結
這篇文章主要介紹了空格或者空白字符導致$.ajax()報parseerror錯誤,需要的朋友可以參考下2014-04-04jQuery Ajax 實例詳解 ($.ajax、$.post、$.get)
本文給大家分享jquery ajax實例文章,由于jquery在異步提交方面封裝的非常好,直接用ajax非常麻煩,jquery大大簡化了我們的操作,不用考慮瀏覽器的問題了。對jquery ajax實例相關介紹感興趣的朋友一起學習吧2015-11-11讓ajax更加友好的實現(xiàn)方法(實時顯示后臺處理進度。)
我們能否讓ajax更加友好點,實時顯示服務器處理的進度了?這在一些長時間的請求中尤其重要,比如上傳文件、發(fā)送郵件、批量處理數(shù)據。2010-06-06