Echarts教程之如何通過Ajax實現(xiàn)動態(tài)加載折線圖-創(chuàng)新互聯(lián)

這篇文章主要介紹Echarts教程之如何通過Ajax實現(xiàn)動態(tài)加載折線圖，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

十多年的楚雄州網(wǎng)站建設(shè)經(jīng)驗，針對設(shè)計、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時及時工作處理。成都全網(wǎng)營銷的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動調(diào)整楚雄州建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計，從而大程度地提升瀏覽體驗。成都創(chuàng)新互聯(lián)公司從事“楚雄州網(wǎng)站設(shè)計”,“楚雄州網(wǎng)站推廣”以來，每個客戶項目都認真落實執(zhí)行。

一、GIF圖

Echarts教程之如何通過Ajax實現(xiàn)動態(tài)加載折線圖

二、前臺代碼

// 調(diào)用方法 
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 = { 
      // 提示框組件，鼠標(biāo)經(jīng)過餅圖時會出現(xiàn)提示框 
      tooltip: { 
        // 觸發(fā)類型 
        // 坐標(biāo)軸觸發(fā)，主要在柱狀圖，折線圖等會使用類目軸的圖表中使用。 
        trigger: 'axis' 
      }, 
      // 每條折線的顏色 
      color: ['#87CEFA', '#9AFF9A', '#C0FF3E','#DB7093'], 
      // 圖例組件 
      legend: { 
        // 內(nèi)容 
        data:['呼入', '呼出', '應(yīng)答', '用戶放棄'], 
        // 樣式 
        textStyle:{ 
            fontSize:10, 
            color:'#66ffff' 
          }, 
        // 上距離，類似css中的margin 
        top:'5%' 
      }, 
      // 網(wǎng)格 
      grid: { 
        // 左距離 
        left: '7%', 
        right: '5%', 
        bottom: '10%', 
        top:'20%' 
      }, 
      // 橫坐標(biāo) 
      xAxis: { 
        // 類型 
        type: 'category', 
        // 刻度 
        data: ['08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00', '24:00'], 
        // 樣式 
        axisLine:{ 
          // 橫坐標(biāo)線的顏色 
          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:'應(yīng)答', 
             type:'line', 
             data:res[1] 
           }, 
           { 
             name:'用戶放棄', 
             type:'line', 
             data:res[0] 
           } 
        ], 
        // 文本標(biāo)簽 
        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">話務(wù)指標(biāo)趨勢圖</div> 
  <div class="rightMain01-sub03-data"> 
    <div id="hotlineLine_id" ></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ù)據(jù)格式：

1.[[1,3,4,5,7],[6,9,11,12,13],[10,11,12,13,16],[16,19,21,22,24]]


什么是ajax

ajax是一種在無需重新加載整個網(wǎng)頁的情況下，能夠更新部分網(wǎng)頁的技術(shù)，可以通過在后臺與服務(wù)器進行少量數(shù)據(jù)交換，使網(wǎng)頁實現(xiàn)異步更新。

以上是“Echarts教程之如何通過Ajax實現(xiàn)動態(tài)加載折線圖”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站標(biāo)題：Echarts教程之如何通過Ajax實現(xiàn)動態(tài)加載折線圖-創(chuàng)新互聯(lián)
轉(zhuǎn)載來于：http://muchs.cn/article26/dspscg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、網(wǎng)站收錄、云服務(wù)器、網(wǎng)站排名、營銷型網(wǎng)站建設(shè)、手機網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

h5響應(yīng)式網(wǎng)站建設(shè)