一、GIF图

二、前台代码

//调用方法热线电话/定时刷新setInterval()函数(){ hotlineLine},5000);函数热线电话初始化图表元素var热线=echart。init(文档。getelementbyid('热线_ id ')；$.get(' $ { page context。请求。getcontext path()}/m/热线。do '，function (res) { var option={ //提示框组件，鼠标经过饼图时会出现提示框tooltip: { //触发类型//坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用trigger: 'axis' }，//每条折线的颜色color :[' # 87 cef '，' #9AFF9A '，' #C0FF3E '，' #DB7093']，//图例组件legend: { //内容data:['呼入', '呼出', '应答', '用户放弃'], //样式textStyle:{ fontSize:10，color:'#66ffff' }，//上距离，类似钢性铸铁中的页边距top:'5%' }，//网格grid: { //左距离左侧： '7% ',右侧： '5% ',底部： '10% ',顶部：'20%' },//横坐标xaxis 3360 {//类型：型类别",//刻度data: ['08:00 '，' 10:00 '，' 12:00 '，' 14:00 '，' 16:00 '，' 183:00 '，' 20:00 '，' 2233:00 '， //样式axis lene : {//横坐标线的颜色linestyle : { color : ' # 66 ffff ' } } }，yAxis: { type: 'value '，name: '次数，坐标轴标签:{格式化程序："{ value }"}，坐标轴线条： {线型： {颜色： ' # 66 ffff ' } }，分割线： {显示： true，线型： {颜色： ' # 66 ffff ' } } }，系列3360[{名称： '呼入，键入：“行”，数据：res[3] }，名称：呼出，键入：“线路”，数据：res[2] }，名称：应答，键入：“线路”，数据：res[1] }，名称：用户放弃，键入：'line '，data:res[0] } ]，//文本标签标签: { //是否展示show: true，position: 'top '，text style : { font weights : ' bold er '，fontSize : '12 '，fontFamily : '微软雅黑，color : defaultcolor } } } hotline . setoption(选项); });} div class='rightMain01-sub03框-边框div class='box-title '话务指标趋势图/div class=' right main 01-sub 03-data ' div id=' HeLp _ id ' style=' height :340 px；'/div /div /div三、后台代码

ListListInteger hotlineList=new arraylistineger()；@请求映射('/m/热线。do’)@响应体公共JSONArray热线(){ ListListInteger返回列表=new arraylistinetger()；if(hotlinelist。size()==0 | | hotlinelist。获取(0).size()=9){ hotlinelist。clear()；for(int I=0；i4；I){ list integer l=new arraylistegeer()；l . add(I * 5 Alexutils。getrandonmeger(0，5))；热门名单。添加(l)；} } for(int I=0；我非常好奇。size()；I){ list integer list=hotlinelist。得到(我)；int thisSize=list。SiZe()；if(thisSize 5){ list。添加(列表。获取(thisSize-1)Alexutils。getrandomnteger(1，5))；} else { list。添加(列表。get(thisSize-1)-Alexutils。getrandomnteger(1，5))；}退货清单。添加(列表)；}活动列表=返回列表返回jsonarray。从对象(返回列表)；} public static int getrandonteger(int min，int max){ int diff=max-min；返回最小新随机数()。nextInt(diff)；} 数据格式：

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

总结

以上所述是小编给大家介绍的展示教程之通过埃阿斯实现动态加载折线图的方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！