欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Echarts教程之通过Ajax实现动态加载折线图的方法

程序员文章站 2022-07-06 16:50:31
一、gif图 二、前台代码 // 调用方法 hotlineline(); // 定时刷新 setinterval(function () {...

一、gif图

Echarts教程之通过Ajax实现动态加载折线图的方法

二、前台代码

// 调用方法 
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" style="height:340px;"></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]] 

总结

以上所述是小编给大家介绍的echarts教程之通过ajax实现动态加载折线图的方法,希望对大家有所帮助