Echart页面赋值
来源：互联网 发布：电脑阅读软件 编辑：程序博客网 时间：2024/06/05 00:46
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<c:set var="ctx" value="${pageContext.request.contextPath }" />
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>座席呼入统计表（按日/月）</title>
<link href="${ctx}/bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="${ctx}/style/Style.css" rel="stylesheet">
<link href="${ctx}/bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
<link rel="stylesheet" href="${ctx}/css/bootstrap-responsive.min.css" />
<link rel="stylesheet" href="${ctx}/css/jquery-ui.css" />
<link rel="stylesheet" href="${ctx}/css/uniform.css" />
<link rel="stylesheet" href="${ctx}/css/select2.css" />
<link rel="stylesheet" href="${ctx}/css/unicorn.main.css" />
<link rel="stylesheet" href="${ctx}/css/common.css" />
<link rel="stylesheet" type="text/css" href="${ctx}/css/easyui/easyui.css">
<link rel="stylesheet" type="text/css" href="${ctx}/css/easyui/icon.css">
<script src="${ctx}/js/jquery-1.9.0.js"></script>
<script src="${ctx}/js/My97DatePicker/WdatePicker.js"></script>
<script src="${ctx}/js/exportTable.js"></script>
<script src="${ctx}/js/jquery-1.8.0.min.js"></script>
<script src="${ctx}/js/echart/echart.js" charset="UTF-8"></script>
<script src="${ctx}/js/jquery.easyui.min.js"></script>
<script type="text/javascript">
function chaxun(){
//String jgname=document.getElementById("jgname").value;
//document.form1.action = "${ctx}/cxbb/cxbbs?jgname="+jgname;
var value = document.getElementById("ksdismantleTime").value;
if(value==''){
alert("请输入查询月份！");
return;
}
var box=document.getElementById("showbox");
box.innerText="正在获取数据请等候...";
document.call_form.action = "${ctx}/bbgl_s/callin_month";
document.call_form.submit();
}
function qk(){
document.getElementById("ksdismantleTime").value="";
}
function showPie(){
var tableData = new Array();
$("#callin_month_s tr").each(function(trindex,tritem){
tableData[trindex]=new Array();
$(tritem).find("td").each(function(tdindex,tditem){
tableData[trindex][tdindex]=$(tditem).text();
});
});
var titles = new Array();
var k=0;
for(i = 1;i<tableData[0].length-1;i=i+1){
titles[k++] = tableData[0][i];
}
var cityName = new Array();
var cityData = new Array();
var dataLine = new Array();
var series = [];
k=0;
/* for(i=1;i<tableData.length-1;i++){
cityData = [];
for(j = 1;j<tableData[i].length-1;j=j+1){
cityData.push(parseInt(tableData[i][j]));
}
series[k] = createObject2(cityData,tableData[i][0]);
k++;
} */
cityData=[];
for(j = 1;j<tableData.length-1;j=j+1){
cityData.push(parseInt(tableData[j][1]));
}
series[0] = createObject2(cityData,'座席呼入总量');
cityData=[];
for(j = 1;j<tableData.length-1;j=j+1){
cityData.push(parseInt(tableData[j][2]));
}
series[1] = createObject2(cityData,'接通量');
for(j = 1;j<tableData.length-1;j=j+1){
cityName.push(tableData[j][0]);
}
cityName.push('座席呼入总量');
cityName.push('接通量');
for(j = 1;j<tableData.length-1;j=j+1){
dataLine.push(tableData[j][0]);
}
option = {
backgroundColor: '#ffffff',//背景色
color: [
'#A5CD39', '#4BB4E4', '#C0E5F7', '#86b379'
],
tooltip : {
trigger: 'axis'
},
legend: {
y:'8%',
data : cityName
},
toolbox: {
show : true,
feature : {
dataZoom : {show: true},
mark : {show: true},
dataView : {show: true, readOnly: true},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
/* xAxis : [
{
type : 'category',
data : dataLine
}
], */
xAxis : [
{
type : 'category',
axisLabel:{
interval:0,
rotate:45,
margin:2,
textStyle:{
color:"#222"
}
},
data : dataLine
}
],
yAxis : [
{
type : 'value'
}
],
series : series
};
var myChart2 = echarts.init(document.getElementById('graphAllDiv'));
myChart2.setOption(option);
$("#graphAllDiv").dialog('open');
}
function createObject2(value,name){
var o = {};
o.data = value;
o.name = name;
o.type='bar';
return o;
}
function createObject(value,name){
var o = {};
o.value = value;
o.name = name;
return o;
}
function closeDiv(){
$("#graphDiv").dialog('close');
$("#graphDiv").dialog('clear');
}
function closeGraphAllDiv(){
$("#graphAllDiv").dialog('close');
$("#graphAllDiv").dialog('clear');
}
document.styleSheets[0].cssText="body{font-size:9px}";
</script>
<style type='text/css'>
body{
font-size:14px;
background-color:FFFFFF;
}
.table tr td{ border:1px #ff000 solid}
.divcss5_2{text-decoration:underline}
</style>
</head>
<body>
<div style="margin-left:20px">
<h3 align="center">座席呼入统计表（按日/月）</h3>
<form action="${ctx }/bbgl_s/callin_month" name="call_form" method="post">
<table>
<tr>
<th>月份</th><td><input class="Wdate" name="day" type="text" id="ksdismantleTime" readonly
value="${day}" onClick="WdatePicker({dateFmt:'yyyy-MM',maxDate:'%y-%M'})" size="5" style="width:150px;height:15px;" ></td>
<td></td><td></td><td></td><td></td><td></td><td></td><th>
<input type="button" name="button" id="button" value="查 询" onclick="chaxun();" class="button_Css" />
<input type="button" value="清 空" onclick="qk();" class="button_Css" />
<input type="button" value="图表展示" onclick="showPie();" class="button_Css" />
<input type="button" value="导 出" onclick="getXlsFromTbl('callin_month_s', '','呼入量对比表（按月）');" class="button_Css" />
</th></tr>
</table>
<input type="hidden" name="area" value="${area}">
</form>
<div align="center" class="divcss5_2" ><h3><font color="blue" id="showbox" ></font> </h3></div>
<table id="callin_month_s" class="gridview_CssClass" cellspacing="0" border="1"
style="background-color:White;border-color:#A8C7CE;width:100%;border-collapse:collapse;">
<tr class="gridview_Header" align="center" valign="middle"
onmouseover="currentcolor=this.style.backgroundColor;this.style.backgroundColor='#edf3fe'"
onmouseout="this.style.backgroundColor=currentcolor" style="word-break:break-all;word-wrap:break-word">
<th>日期</th>
<th>座席呼入总量</th>
<th>接通量</th>
<th>座席忙次数</th>
<th>无座席在线次数</th>
<th>座席无应答次数</th>
<th>用户放弃次数</th>
<th>等待时长</th>
<th>振铃时长</th>
<th>通话时长</th>
<th>放弃率(%)</th>
<th>平均排队时长</th>
<th>平均通话时长</th>
<th>平均振铃时长</th>
<th>接通率(%)</th>
</tr>
<c:forEach var="list1" items="${agentList}" varStatus="status" >
<tr align="center">
<td>${list1.id }</td>
<td>${list1.day }</td>
<td>${list1.city1 }</td>
<td>${list1.city2 }</td>
<td>${list1.city3 }</td>
<td>${list1.city4 }</td>
<td>${list1.city5 }</td>
<td>${list1.city6 }</td>
<td>${list1.city7 }</td>
<td>${list1.city8 }</td>
<td>${list1.city9 }</td>
<td>${list1.city10 }</td>
<td>${list1.city11 }</td>
<td>${list1.city12 }</td>
<td>${list1.city13 }</td>
</tr>
</c:forEach>
<!-- </tr> -->
</table>
</div>
<div id="graphDiv" class="easyui-dialog" title=" " style="width: 800px;height:400px;diaplay:none"
data-options="resizable:true,modal:true,closed:true" ondblclick="closeDiv()">
</div>
<div id="graphAllDiv" class="easyui-dialog" title=" " style="width: 870px;height:400px;diaplay:none"
data-options="resizable:true,modal:true,closed:true" ondblclick="closeGraphAllDiv()">
</div>
</body>
</html>
pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<c:set var="ctx" value="${pageContext.request.contextPath }" />
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>座席呼入统计表（按日/月）</title>
<link href="${ctx}/bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="${ctx}/style/Style.css" rel="stylesheet">
<link href="${ctx}/bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
<link rel="stylesheet" href="${ctx}/css/bootstrap-responsive.min.css" />
<link rel="stylesheet" href="${ctx}/css/jquery-ui.css" />
<link rel="stylesheet" href="${ctx}/css/uniform.css" />
<link rel="stylesheet" href="${ctx}/css/select2.css" />
<link rel="stylesheet" href="${ctx}/css/unicorn.main.css" />
<link rel="stylesheet" href="${ctx}/css/common.css" />
<link rel="stylesheet" type="text/css" href="${ctx}/css/easyui/easyui.css">
<link rel="stylesheet" type="text/css" href="${ctx}/css/easyui/icon.css">
<script src="${ctx}/js/jquery-1.9.0.js"></script>
<script src="${ctx}/js/My97DatePicker/WdatePicker.js"></script>
<script src="${ctx}/js/exportTable.js"></script>
<script src="${ctx}/js/jquery-1.8.0.min.js"></script>
<script src="${ctx}/js/echart/echart.js" charset="UTF-8"></script>
<script src="${ctx}/js/jquery.easyui.min.js"></script>
<script type="text/javascript">
function chaxun(){
//String jgname=document.getElementById("jgname").value;
//document.form1.action = "${ctx}/cxbb/cxbbs?jgname="+jgname;
var value = document.getElementById("ksdismantleTime").value;
if(value==''){
alert("请输入查询月份！");
return;
}
var box=document.getElementById("showbox");
box.innerText="正在获取数据请等候...";
document.call_form.action = "${ctx}/bbgl_s/callin_month";
document.call_form.submit();
}
function qk(){
document.getElementById("ksdismantleTime").value="";
}
function showPie(){
var tableData = new Array();
$("#callin_month_s tr").each(function(trindex,tritem){
tableData[trindex]=new Array();
$(tritem).find("td").each(function(tdindex,tditem){
tableData[trindex][tdindex]=$(tditem).text();
});
});
var titles = new Array();
var k=0;
for(i = 1;i<tableData[0].length-1;i=i+1){
titles[k++] = tableData[0][i];
}
var cityName = new Array();
var cityData = new Array();
var dataLine = new Array();
var series = [];
k=0;
/* for(i=1;i<tableData.length-1;i++){
cityData = [];
for(j = 1;j<tableData[i].length-1;j=j+1){
cityData.push(parseInt(tableData[i][j]));
}
series[k] = createObject2(cityData,tableData[i][0]);
k++;
} */
cityData=[];
for(j = 1;j<tableData.length-1;j=j+1){
cityData.push(parseInt(tableData[j][1]));
}
series[0] = createObject2(cityData,'座席呼入总量');
cityData=[];
for(j = 1;j<tableData.length-1;j=j+1){
cityData.push(parseInt(tableData[j][2]));
}
series[1] = createObject2(cityData,'接通量');
for(j = 1;j<tableData.length-1;j=j+1){
cityName.push(tableData[j][0]);
}
cityName.push('座席呼入总量');
cityName.push('接通量');
for(j = 1;j<tableData.length-1;j=j+1){
dataLine.push(tableData[j][0]);
}
option = {
backgroundColor: '#ffffff',//背景色
color: [
'#A5CD39', '#4BB4E4', '#C0E5F7', '#86b379'
],
tooltip : {
trigger: 'axis'
},
legend: {
y:'8%',
data : cityName
},
toolbox: {
show : true,
feature : {
dataZoom : {show: true},
mark : {show: true},
dataView : {show: true, readOnly: true},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
/* xAxis : [
{
type : 'category',
data : dataLine
}
], */
xAxis : [
{
type : 'category',
axisLabel:{
interval:0,
rotate:45,
margin:2,
textStyle:{
color:"#222"
}
},
data : dataLine
}
],
yAxis : [
{
type : 'value'
}
],
series : series
};
var myChart2 = echarts.init(document.getElementById('graphAllDiv'));
myChart2.setOption(option);
$("#graphAllDiv").dialog('open');
}
function createObject2(value,name){
var o = {};
o.data = value;
o.name = name;
o.type='bar';
return o;
}
function createObject(value,name){
var o = {};
o.value = value;
o.name = name;
return o;
}
function closeDiv(){
$("#graphDiv").dialog('close');
$("#graphDiv").dialog('clear');
}
function closeGraphAllDiv(){
$("#graphAllDiv").dialog('close');
$("#graphAllDiv").dialog('clear');
}
document.styleSheets[0].cssText="body{font-size:9px}";
</script>
<style type='text/css'>
body{
font-size:14px;
background-color:FFFFFF;
}
.table tr td{ border:1px #ff000 solid}
.divcss5_2{text-decoration:underline}
</style>
</head>
<body>
<div style="margin-left:20px">
<h3 align="center">座席呼入统计表（按日/月）</h3>
<form action="${ctx }/bbgl_s/callin_month" name="call_form" method="post">
<table>
<tr>
<th>月份</th><td><input class="Wdate" name="day" type="text" id="ksdismantleTime" readonly
value="${day}" onClick="WdatePicker({dateFmt:'yyyy-MM',maxDate:'%y-%M'})" size="5" style="width:150px;height:15px;" ></td>
<td></td><td></td><td></td><td></td><td></td><td></td><th>
<input type="button" name="button" id="button" value="查 询" onclick="chaxun();" class="button_Css" />
<input type="button" value="清 空" onclick="qk();" class="button_Css" />
<input type="button" value="图表展示" onclick="showPie();" class="button_Css" />
<input type="button" value="导 出" onclick="getXlsFromTbl('callin_month_s', '','呼入量对比表（按月）');" class="button_Css" />
</th></tr>
</table>
<input type="hidden" name="area" value="${area}">
</form>
<div align="center" class="divcss5_2" ><h3><font color="blue" id="showbox" ></font> </h3></div>
<table id="callin_month_s" class="gridview_CssClass" cellspacing="0" border="1"
style="background-color:White;border-color:#A8C7CE;width:100%;border-collapse:collapse;">
<tr class="gridview_Header" align="center" valign="middle"
onmouseover="currentcolor=this.style.backgroundColor;this.style.backgroundColor='#edf3fe'"
onmouseout="this.style.backgroundColor=currentcolor" style="word-break:break-all;word-wrap:break-word">
<th>日期</th>
<th>座席呼入总量</th>
<th>接通量</th>
<th>座席忙次数</th>
<th>无座席在线次数</th>
<th>座席无应答次数</th>
<th>用户放弃次数</th>
<th>等待时长</th>
<th>振铃时长</th>
<th>通话时长</th>
<th>放弃率(%)</th>
<th>平均排队时长</th>
<th>平均通话时长</th>
<th>平均振铃时长</th>
<th>接通率(%)</th>
</tr>
<c:forEach var="list1" items="${agentList}" varStatus="status" >
<tr align="center">
<td>${list1.id }</td>
<td>${list1.day }</td>
<td>${list1.city1 }</td>
<td>${list1.city2 }</td>
<td>${list1.city3 }</td>
<td>${list1.city4 }</td>
<td>${list1.city5 }</td>
<td>${list1.city6 }</td>
<td>${list1.city7 }</td>
<td>${list1.city8 }</td>
<td>${list1.city9 }</td>
<td>${list1.city10 }</td>
<td>${list1.city11 }</td>
<td>${list1.city12 }</td>
<td>${list1.city13 }</td>
</tr>
</c:forEach>
<!-- </tr> -->
</table>
</div>
<div id="graphDiv" class="easyui-dialog" title=" " style="width: 800px;height:400px;diaplay:none"
data-options="resizable:true,modal:true,closed:true" ondblclick="closeDiv()">
</div>
<div id="graphAllDiv" class="easyui-dialog" title=" " style="width: 870px;height:400px;diaplay:none"
data-options="resizable:true,modal:true,closed:true" ondblclick="closeGraphAllDiv()">
</div>
</body>
</html>
0 0
- Echart页面赋值
- echart
- Echart
- echart
- EChart
- Echart
- Echart
- EChart
- echart同一个页面，多个图表宽高自适应
- echart同一个页面，多个图表宽高自适应
- 使用echart从后台获取数据动态显示到页面
- VUE 单页面使用 echart 窗口变化时的使用
- echart 饼图处理 数据格式化 option动态赋值 点击事件处理
- FckEditor Ext JSON 页面赋值
- Jsp页面取值赋值
- 父页面如何给子页面赋值
- 第一次使用echart从后台获取数据动态显示到页面
- 第一次使用echart从后台获取数据动态显示到页面
- Android APK反编译就这么简单 详解（附图）
- Adapter两种适配及其他
- java线程知识总结
- c++ stl 五种迭代器
- 通过Html网页调用本地安卓app
- Echart页面赋值
- android三种动画
- Memcache内存管理
- 【bzoj2882】工艺
- I/O流（一）
- [better practice系列]Android中更舒服的使用log
- DDK翻译:IOCTL指令简介
- WINDOWS SERVER 2008学习纪录
- shell 脚本获取本地ip地址方法
