这篇文章主要介绍了echarts教程之通过ajax实现动态加载折线图的方法，需要的朋友可以参考下
一、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);
});
}
<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>
三、后台代码
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实现动态加载折线图的方法（图文教程）的详细内容。