当前位置:Gxlcms > JavaScript > 通过Ajax实现动态加载折线图的方法(图文教程)

通过Ajax实现动态加载折线图的方法(图文教程)

时间:2021-07-01 10:21:17 帮助过:4人阅读

这篇文章主要介绍了Echarts教程之通过Ajax实现动态加载折线图的方法,需要的朋友可以参考下

一、GIF图

二、前台代码

三、后台代码

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的概念和优势

ajax的三种实现方式

关于AJAX ASP/PHP 请求实例的相关知识

以上就是通过Ajax实现动态加载折线图的方法(图文教程)的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行