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

為薛城等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計(jì)制作服務(wù)，及薛城網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為成都網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)、薛城網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！

一、GIF圖

二、前臺(tái)代碼

// 調(diào)用方法 
hotlineLine(); 
// 定時(shí)刷新 
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)過餅圖時(shí)會(huì)出現(xiàn)提示框 
      tooltip: { 
        // 觸發(fā)類型 
        // 坐標(biāo)軸觸發(fā)，主要在柱狀圖，折線圖等會(huì)使用類目軸的圖表中使用。 
        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); 
  }); 
} 
 
  話務(wù)指標(biāo)趨勢(shì)圖