Comment charger dynamiquement des graphiques linéaires via Ajax (tutoriel graphique)-js tutoriel-php.cn

Comment charger dynamiquement des graphiques linéaires via Ajax (tutoriel graphique)

亚连

Libérer： 2018-05-21 15:46:29

original

2568 Les gens l'ont consulté

Cet article présente principalement la méthode de chargement dynamique de graphiques linéaires via Ajax dans le didacticiel Echarts. Les amis dans le besoin peuvent s'y référer

Graphique GIF.

2. Code de la réception

// 调用方法 
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>

Copier après la connexion

3. Code backend

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

Copier après la connexion

Format des données :