文章目录
- jsp页面整合ECharts绘制折线图
- 先看效果图
- 前端代码
- 后端测试代码
jsp页面整合ECharts绘制折线图
官网上有demo可以直接调试样式。
话不多说, 直接上代码, 因为好久没写过jsp页面, 语法、用法啥的可能都比较糙, 主要参考整合ECharts的js代码部分, 我是为了方便调试, js直接放在了jsp页面中。
先看效果图
这个是下面 interval: 1 时的显示样式, x轴数据太多的话可以跳几个, 不全显示, 但是折线上会显示数据;
如果不需要跳, 不写或者写0。
前端代码
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" isELIgnored="false" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html style="overflow:scroll">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="${pageContext.request.contextPath}/app-resource/js/common/echarts.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/app-resource/js/common/jquery-3.3.1.min.js"></script>
<title>坐席监控报表</title>
<style type="text/css">
</style>
</head>
<body>
<div>
<h4>坐席监控报表</h4>
</div>
<div class="panel panel-default forie8"
style="width: 100%; margin-bottom: 0px;">
<div class="panel-body" style="padding-bottom: 0px;padding-top:10px">
<form class="form-inline">
<div class="form-group forie8" style="height: 50px;margin-left:28px">
<%--这里是一些查询条件省略了, 主要看下面折线图部分--%>
</div>
<br>
</form>
</div>
</div>
<%--折线图--%>
<div id="main" class="col-md-12" style="width: 1200px; height: 500px; margin-top: 10px"></div>
<script type="text/javascript">
// 注掉的部分是简单的理解和静态demo, 后面没注掉的部分是从后端动态获取数据展示
// // 我的理解是(不一定对): 下面myChart、option相当于一个类以及属性; 下面myChart.setOption(option); 则是创建了一个实例对象使用
// var myChart = echarts.init(document.getElementById('main'));
// var option = {
// title: {
// text: '坐席数',
// },
// tooltip: {
// // 折线图上: 鼠标移动到每个点都会显示文本数据
// trigger: 'axis'
// },
// legend: {
// data: ['登录坐席数', '外呼坐席数']
// },
// // 工具栏: 可以转换为柱状图等等
// /*toolbox: {
// show: true,
// feature: {
// dataZoom: {},
// dataView: {readOnly: false},
// magicType: {type: ['line', 'bar']},
// restore: {},
// saveAsImage: {}
// }
// },*/
// xAxis: {
// // type: 'category',
// // x轴坐标从0开始显示
// boundaryGap: false,
// axisLabel: {
// // x轴坐标中间隔一个显示, 0则不隔, 下例则X轴只显示09、11、13点, 但是折线图上数据也会显示5个点的数据
// interval: 1,
// // x 轴太长显示不下时, 可以斜着显示
// rotate: 40
// },
// data: ['09:00', '10:00', '11:00', '12:00', '13:00']
// },
// yAxis: {},
// series: [
// {
// name: '登录坐席数',
// type: 'line',
// data: [1, 2, 3, 4, 5]
// },
// {
// name: '外呼坐席数',
// type: 'line',
// data: [4, 5, 2, 4, 9]
// }
// ]
// };
// 使用刚指定的配置项和数据显示图表
// myChart.setOption(option);
var contextPath = "${pageContext.request.contextPath}";
// 下面是实际使用 queryData()方法调用时就可以显示折线图了
function queryData(timeType, startTime) {
$.ajax({
type: "post",
url: contextPath + "/report/agentMonitor/getAgentMonitorData",
data: {'timeType': timeType},
dataType: 'json',
success: function (data) {
//alert(JSON.stringify(data));
var xData = data.xData;
console.log("xData: " + xData);
var yDataLogin = data.yDataLogin;
console.log("yDataLogin: " + yDataLogin);
var yDataOut = data.yDataOut;
console.log("yDataOut: " + yDataOut);
// 每次请求都重新搞一次
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: '坐席数',
},
tooltip: {
// 折线图上: 鼠标移动到每个点都会显示文本数据
trigger: 'axis'
},
legend: {
data: ['登录坐席数', '外呼坐席数']
},
xAxis: {
// type: 'category',
// x轴坐标从0开始显示
boundaryGap: false,
axisLabel: {
// x轴坐标中间隔一个显示, 0则不隔
interval: timeType === "3" ? 1 : 0
},
// 后端返回的横坐标
data: xData,
},
yAxis: {},
series: [
{
name: '登录坐席数',
type: 'line',
// 后端返回的数据
data: yDataLogin
},
{
name: '外呼坐席数',
type: 'line',
data: yDataOut
}
]
};
// 展示
myChart.setOption(option);
// 下面这个应该是清除原数据吧...
window.onresize = function () {
myChart.resize();
};
},
error: function (data) {
//alert(data.status);
alert("error");
}
});
}
</script>
</body>
</html>后端测试代码
@ResponseBody
@RequestMapping("getAgentMonitorData")
public AgentMonitorPo getAgentMonitorData(String timeType, HttpServletRequest request, HttpServletResponse response) {
AgentMonitorPo po = new AgentMonitorPo();
if ("3".equals(timeType)) {
po.setxData(new String[]{"10:00", "11:00", "12:00", "13:00", "14:00"});
po.setyDataLogin(new int[]{8, 4, 7, 3, 6});
po.setyDataOut(new int[]{5, 2, 6, 1, 4});
} else {
po.setxData(new String[]{"03-07", "03-08", "03-09", "03-10", "03-11"});
po.setyDataLogin(new int[]{80, 40, 70, 30, 60});
po.setyDataOut(new int[]{5, 20, 60, 10, 40});
}
return po;
}
public class AgentMonitorPo {
// 折线图x轴坐标显示跨度
private int myInterval;
// x轴坐标显示
private String[] xData;
// y轴数据: 坐席登录数
private int[] yDataLogin;
// y轴数据: 坐席外呼数
private int[] yDataOut;
// 异常信息
private String errMsg;
....省略get、set方法
}
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
