Echarts教程之如何通过Ajax实现动态加载折线图-创新互联

这篇文章主要介绍Echarts教程之如何通过Ajax实现动态加载折线图，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

十多年的楚雄州网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。成都全网营销的优势是能够根据用户设备显示端的尺寸不同，自动调整楚雄州建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。成都创新互联公司从事“楚雄州网站设计”,“楚雄州网站推广”以来，每个客户项目都认真落实执行。

一、GIF图

二、前台代码

// 调用方法 
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 = { 
      // 提示框组件，鼠标经过饼图时会出现提示框 
      tooltip: { 
        // 触发类型 
        // 坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。 
        trigger: 'axis' 
      }, 
      // 每条折线的颜色 
      color: ['#87CEFA', '#9AFF9A', '#C0FF3E','#DB7093'], 
      // 图例组件 
      legend: { 
        // 内容 
        data:['呼入', '呼出', '应答', '用户放弃'], 
        // 样式 
        textStyle:{ 
            fontSize:10, 
            color:'#66ffff' 
          }, 
        // 上距离，类似css中的margin 
        top:'5%' 
      }, 
      // 网格 
      grid: { 
        // 左距离 
        left: '7%', 
        right: '5%', 
        bottom: '10%', 
        top:'20%' 
      }, 
      // 横坐标 
      xAxis: { 
        // 类型 
        type: 'category', 
        // 刻度 
        data: ['08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00', '24:00'], 
        // 样式 
        axisLine:{ 
          // 横坐标线的颜色 
          lineStyle:{ 
            color:'#66ffff' 
          } 
        } 
      }, 
      yAxis: { 
        type: 'value', 
        name: '次数', 
        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:'应答', 
             type:'line', 
             data:res[1] 
           }, 
           { 
             name:'用户放弃', 
             type:'line', 
             data:res[0] 
           } 
        ], 
        // 文本标签 
        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">话务指标趋势图</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); 
}

数据格式：

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

什么是ajax

ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术，可以通过在后台与服务器进行少量数据交换，使网页实现异步更新。

以上是“Echarts教程之如何通过Ajax实现动态加载折线图”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！

网站标题：Echarts教程之如何通过Ajax实现动态加载折线图-创新互联
转载来于：https://www.cdcxhl.com/article26/dspscg.html

成都网站建设公司_创新互联，为您提供网站内链、网站收录、云服务器、网站排名、营销型网站建设、手机网站建设

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联