집 > 기사 > 웹 프론트엔드 > Ajax를 통해 꺾은선형 차트를 동적으로 로드하는 방법(그래픽 튜토리얼)

Ajax를 통해 꺾은선형 차트를 동적으로 로드하는 방법(그래픽 튜토리얼)

亚连원래의: 2018-05-21 15:46:292619검색

이 글에서는 주로 Echarts 튜토리얼에서 Ajax를 통해 꺾은선형 차트를 동적으로 로딩하는 방법을 소개하고 있습니다. 필요하신 분들은 참고하시면 됩니다.

1. GIF 차트

2. 전면- 종료 코드

// 调用方法 
hotlineLine(); 
// 定时刷新 
setInterval(function () { 
  hotlineLine(); 
},5000); 
function hotlineLine(){ 
  // 初始化图表元素 
  var hotlineLine = echarts.init(document.getElementById(&#39;hotlineLine_id&#39;)); 
  $.get(&#39;${pageContext.request.getContextPath()}/m/hotline.do&#39;, function (res) { 
    var option = { 
      // 提示框组件，鼠标经过饼图时会出现提示框 
      tooltip: { 
        // 触发类型 
        // 坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。 
        trigger: &#39;axis&#39; 
      }, 
      // 每条折线的颜色 
      color: [&#39;#87CEFA&#39;, &#39;#9AFF9A&#39;, &#39;#C0FF3E&#39;,&#39;#DB7093&#39;], 
      // 图例组件 
      legend: { 
        // 内容 
        data:[&#39;呼入&#39;, &#39;呼出&#39;, &#39;应答&#39;, &#39;用户放弃&#39;], 
        // 样式 
        textStyle:{ 
            fontSize:10, 
            color:&#39;#66ffff&#39; 
          }, 
        // 上距离，类似css中的margin 
        top:&#39;5%&#39; 
      }, 
      // 网格 
      grid: { 
        // 左距离 
        left: &#39;7%&#39;, 
        right: &#39;5%&#39;, 
        bottom: &#39;10%&#39;, 
        top:&#39;20%&#39; 
      }, 
      // 横坐标 
      xAxis: { 
        // 类型 
        type: &#39;category&#39;, 
        // 刻度 
        data: [&#39;08:00&#39;, &#39;10:00&#39;, &#39;12:00&#39;, &#39;14:00&#39;, &#39;16:00&#39;, &#39;18:00&#39;, &#39;20:00&#39;, &#39;22:00&#39;, &#39;24:00&#39;], 
        // 样式 
        axisLine:{ 
          // 横坐标线的颜色 
          lineStyle:{ 
            color:&#39;#66ffff&#39; 
          } 
        } 
      }, 
      yAxis: { 
        type: &#39;value&#39;, 
        name: &#39;次数&#39;, 
        axisLabel: { 
          formatter: &#39;{value}&#39; 
        }, 
        axisLine:{ 
          lineStyle:{ 
            color:&#39;#66ffff&#39; 
          } 
        }, 
        splitLine:{ 
          show: true, 
          lineStyle:{ 
            color:&#39;#66ffff&#39; 
          } 
        } 
      }, 
      series: [ 
           { 
             name:&#39;呼入&#39;, 
             type:&#39;line&#39;, 
             data:res[3] 
           }, 
           { 
             name:&#39;呼出&#39;, 
             type:&#39;line&#39;, 
             data:res[2] 
           }, 
           { 
             name:&#39;应答&#39;, 
             type:&#39;line&#39;, 
             data:res[1] 
           }, 
           { 
             name:&#39;用户放弃&#39;, 
             type:&#39;line&#39;, 
             data:res[0] 
           } 
        ], 
        // 文本标签 
        label: {  
          //是否展示  
          show: true, 
          position: &#39;top&#39;, 
          textStyle: {  
            fontWeight:&#39;bolder&#39;,  
            fontSize : &#39;12&#39;,  
            fontFamily : &#39;微软雅黑&#39;,  
            color:defaultColor 
          }  
        } 
    }; 
    hotlineLine.setOption(option); 
  }); 
} 
<p class="rightMain01-sub03 box-border"> 
  <p class="box-title">话务指标趋势图</p> 
  <p class="rightMain01-sub03-data"> 
    <p id="hotlineLine_id" style="height:340px;"></p> 
  </p> 
</p>

3. 백엔드 코드

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); 
}

데이터 형식:

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

위 내용은 제가 모든 사람을 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

Ajax를 통해 꺾은선형 차트를 동적으로 로드하는 방법(그래픽 튜토리얼)

관련 기사