点击Echarts仪表盘指针弹出展示列表
程序员文章站
2022-05-31 13:29:14
...
仪表盘数据展示
function depotmarkInfo(deptid)
{
var chart_01 = echarts.init(document.getElementById('charts_01'));
chart_01.on("click",function(params){
$("#checkModalLabel").html(params.data.name);
$("#checModalBody p .name").html(params.data.name+":");
if(params.data.name=="安全考核")
{
$("#checModalBody p .store").html(params.data.value+"分(安全问题满分80分，发现重大事故奖励20分)");
}
else if(params.data.name=="技术业务考核")
{
$("#checModalBody p .store").html(params.data.value+"分(技术业务培训满分100分，历史荣誉称号)");
}
else if(params.data.name=="两纪及作业标准")
{
$("#checModalBody p .store").html(params.data.value+"分(两纪及作业标准满分100分)");
}
else if(params.data.name=="工作量")
{
$("#checModalBody p .store").html(params.data.value+"分(工作量平均分)");
}
else if(params.data.name=="基本素质")
{
$("#checModalBody p .store").html(params.data.value+"(基本素质平均分)");
}
else if(params.data.name=="诚信管理")
{
$("#checModalBody p .store").html(params.data.value+"(诚信管理平均分)");
}
$("#check").show().addClass('in');
$("#checkModalClose").on("click",function(){
$("#check").hide().removeClass('in');
});
depotsafemarkInfo(params.data.name,1,order,sort,deptid,deptid);
});
$.ajax({
url: "../../security/base/peoplesafeoffice!officemarkInfoByAjax.action",
type: "post",
data:{//页面数据 传入站段信息
deptid:deptid
},
dataType: "json",
success: function (data) { //获取成功以后执行
//alert(JSON.Stringify(data));
var dataset=[];
$(data).each(function() {
dataset.push(this[0]);
});
//判断：工务处以下全叫“作业标准”,其它的叫“两纪及作业标准” lenian 2018 03 21
var depotName = data[1];
var twoBiaoPan;
if(depotName.indexOf("工务") != -1){
twoBiaoPan = "作业标准";
} else {
twoBiaoPan = "两纪及作业标准";
}
chart_01.setOption({
backgroundColor: "rgb(254, 248, 239)",
title: {
text: '综合评分:'+ dataset[0][4].toFixed(2),//数据,
left: 'center',
bottom: 'center',
textStyle: {
color: '#f00',
fontSize: 24,
}
},
tooltip : {
formatter: "{a} <br/>{c} {b}"
},
toolbox: {
show: true,
},
series : [
{
name: '安全考核',
type: 'gauge',
center: ['20%', '30%'], // 默认全局居中
radius: '42%',
min:0,
max:100,
splitNumber:10,
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
width: 8,
color: [[0.2, '#c23531'], [0.8, '#FFC125'], [1, 'green']]
}
},
axisTick: { // 坐标轴小标记
length:12, // 属性length控制线长
lineStyle: { // 属性lineStyle控制线条样式
color: 'auto'
}
},
splitLine: { // 分隔线
length:20, // 属性length控制线长
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
color: 'auto'
}
},
pointer: {
width:5
},
title: {
fontWeight: 'bolder',
offsetCenter: [0, '-30%'], // x, y，单位px
},
detail: {
// 其余属性默认使用全局文本样式，详见TEXTSTYLE
fontWeight: 'bolder',
color:'#63869E',
fontSize: '23'
},
// data:[{value: 96.5, name: '安全考核'}]
data:[{value: dataset[0][0].toFixed(2), name: '安全考核'}]
},
{
name: '技术业务考核',
type: 'gauge',
center: ['50%', '30%'], // 默认全局居中
radius: '42%',
min:0,
max:100,
splitNumber:10,
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
width: 8,
color: [[0.2, '#c23531'], [0.8, '#FFC125'], [1, 'green']]
}
},
axisTick: { // 坐标轴小标记
length:12, // 属性length控制线长
lineStyle: { // 属性lineStyle控制线条样式
color: 'auto'
}
},
splitLine: { // 分隔线
length:20, // 属性length控制线长
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
color: 'auto'
}
},
pointer: {
width:5
},
title: {
fontWeight: 'bolder',
offsetCenter: [0, '-30%'], // x, y，单位px
},
detail: {
// 其余属性默认使用全局文本样式，详见TEXTSTYLE
fontWeight: 'bolder',
color:'#63869E',
fontSize: '23'
},
// data:[{value: 85, name: '技术业务考核'}]
data:[{value: dataset[0][1].toFixed(2), name: '技术业务考核'}]
},
{
name: '两纪及作业标准',
type: 'gauge',
center: ['80%', '30%'], // 默认全局居中
radius: '42%',
min:0,
max:100,
splitNumber:10,
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
width: 8,
color: [[0.2, '#c23531'], [0.8, '#FFC125'], [1, 'green']]
}
},
axisTick: { // 坐标轴小标记
length:12, // 属性length控制线长
lineStyle: { // 属性lineStyle控制线条样式
color: 'auto'
}
},
splitLine: { // 分隔线
length:20, // 属性length控制线长
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
color: 'auto'
}
},
pointer: {
width:5
},
title: {
fontWeight: 'bolder',
offsetCenter: [0, '-30%'], // x, y，单位px
},
detail: {
// 其余属性默认使用全局文本样式，详见TEXTSTYLE
fontWeight: 'bolder',
color:'#63869E',
fontSize: '23'
},
// data:[{value:88, name: '两纪及作业标准'}]
// data:[{value: dataset[0][2].toFixed(2), name: '两纪及作业标准'}]
data:[{value: dataset[0][2].toFixed(2), name: twoBiaoPan}]
},
{
name: '基本素质',
type: 'gauge',
center: ['20%', '77%'], // 默认全局居中
radius: '42%',
min:0,
max:100,
splitNumber:10,
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
width: 8,
color: [[0.2, '#c23531'], [0.8, '#FFC125'], [1, 'green']]
}
},
axisTick: { // 坐标轴小标记
length:12, // 属性length控制线长
lineStyle: { // 属性lineStyle控制线条样式
color: 'auto'
}
},
splitLine: { // 分隔线
length:20, // 属性length控制线长
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
color: 'auto'
}
},
pointer: {
width:5
},
title: {
fontWeight: 'bolder',
offsetCenter: [0, '-30%'], // x, y，单位px
},
detail: {
// 其余属性默认使用全局文本样式，详见TEXTSTYLE
fontWeight: 'bolder',
color:'#63869E',
fontSize: '23',
formatter:'{value}'
},
// data:[{value:90, name: '业务量'}]
data:[{value: dataset[0][8].toFixed(2), name: '基本素质'}]
},
{
name: '工作量',
type: 'gauge',
center: ['50%', '77%'], // 默认全局居中
radius: '42%',
min:0,
max:100,
splitNumber:10,
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
width: 8,
color: [[0.2, '#c23531'], [0.8, '#FFC125'], [1, 'green']]
}
},
axisTick: { // 坐标轴小标记
length:12, // 属性length控制线长
lineStyle: { // 属性lineStyle控制线条样式
color: 'auto'
}
},
splitLine: { // 分隔线
length:20, // 属性length控制线长
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
color: 'auto'
}
},
pointer: {
width:5
},
title: {
fontWeight: 'bolder',
offsetCenter: [0, '-30%'], // x, y，单位px
},
detail: {
// 其余属性默认使用全局文本样式，详见TEXTSTYLE
fontWeight: 'bolder',
color:'#63869E',
fontSize: '23',
formatter:'{value}'
},
// data:[{value:90, name: '业务量'}]
data:[{value: dataset[0][3].toFixed(2), name: '工作量'}]
},
{
name: '诚信管理',
type: 'gauge',
center: ['80%', '77%'], // 默认全局居中
radius: '42%',
min:0,
max:100,
splitNumber:10,
axisLine: { // 坐标轴线
lineStyle: { // 属性lineStyle控制线条样式
width: 8,
color: [[0.2, '#c23531'], [0.8, '#FFC125'], [1, 'green']]
}
},
axisTick: { // 坐标轴小标记
length:12, // 属性length控制线长
lineStyle: { // 属性lineStyle控制线条样式
color: 'auto'
}
},
splitLine: { // 分隔线
length:20, // 属性length控制线长
lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式
color: 'auto'
}
},
pointer: {
width:5
},
title: {
fontWeight: 'bolder',
offsetCenter: [0, '-30%'], // x, y，单位px
},
detail: {
// 其余属性默认使用全局文本样式，详见TEXTSTYLE
fontWeight: 'bolder',
color:'#63869E',
fontSize: '23',
formatter:'{value}'
},
// data:[{value:90, name: '业务量'}]
data:[{value: 100, name: '诚信管理'}]
}
]
});
}
});
}指针点出事件
var order="asc";
var sort="asc";
function depotsafemarkInfo(typename,page,order,sort,deptid)
{
var Xtable = $("#Safetable");
var nextX= $("#nextSafe");
var preX= $("#preSafe");
var nickname;
if(typename == "安全考核")
{
nickname="sec";
}
else if(typename== "技术业务考核")
{
nickname="tec";
}
else if(typename== "两纪及作业标准")
{
nickname="two";
}
else if(typename== "基本素质")
{
nickname="calMultiScore";
}
else if(typename== "工作量")
{
nickname="work";
}
else if(typename== "诚信管理")
{
nickname="integrity";
}
$(".rt", Xtable).remove();
$(".hd", Xtable).remove();
var tablehead = $("<tr class='hd'></tr>");
Xtable.append(tablehead);
tablehead.append("<th>员工ID</th>");
tablehead.append("<th>姓名</th>");
if(typename == "安全考核")
{
tablehead.append("<th id='order'>安全考核分值</th>");
}
else if (typename== "技术业务考核")
{
tablehead.append("<th id='order'>技术业务考核分值</th>");
tablehead.append("<th id='sort'>荣誉称号分值</th>");
}
else if(typename== "两纪及作业标准")
{
tablehead.append("<th id='order'>两纪及作业标准</th>");
}
else if(typename== "基本素质")
{
tablehead.append("<th id='order'>基本素质</th>");
}
else if(typename== "工作量")
{
tablehead.append("<th id='order'>工作量</th>");
}
else if(typename== "诚信管理")
{
tablehead.append("<th id='order'>诚信管理</th>");
}
tablehead.append("<th>所属站段</th>");
tablehead.append("<th>画像详情</th>");
$.ajax({
url: "../../security/base/peoplesafeoffice!officesafemarkInfoByAjax.action",
type: "post",
data:{//页面数据 传入站段信息
pagenumsafe:page ,
typenickname:nickname,
order:order,
sort:sort,
deptid:deptid
},
dataType: "json",
success: function (data) { //获取成功以后执行
// alert(JSON.stringify(data));
var dataset=data;
var rstset=dataset[0].result;
var type_check_fix;
$("#order").on("click", function() {
if(order== "asc")
{
order="desc";
depotsafemarkInfo(typename, page,order,null,deptid);
}
else
{
order="asc";
depotsafemarkInfo(typename, page,order,null,deptid);
}
});
$("#sort").on("click", function() {
if(sort== "asc")
{
sort="desc";
depotsafemarkInfo(typename, page,null,sort,deptid);
}
else
{
sort="asc";
depotsafemarkInfo(typename, page,null,sort,deptid);
}
});
$(rstset).each(function(i,val) {
if(typename == "安全考核")
{
if(val.sec_check == null){
type_check_fix=0.00;
}else{
type_check_fix=(val.sec_check).toFixed(2);
}
}
else if (typename== "技术业务考核")
{
if(val.tec_check == null){
type_check_fix=0.00;
}else{
type_check_fix=(val.tec_check).toFixed(2);
}
}
else if(typename== "两纪及作业标准")
{
if(val.two_check == null){
type_check_fix=0.00;
}else{
type_check_fix=(val.two_check).toFixed(2);
}
}
else if(typename== "基本素质")
{
if(val.calMultiScore == null){
type_check_fix=0.00;
}else{
type_check_fix=(val.calMultiScore).toFixed(2);
}
}
else if(typename== "工作量")
{
if(val.work_check == null){
type_check_fix=0.00;
}else{
type_check_fix=(val.work_check).toFixed(2);
}
}
else if(typename== "诚信管理")
{
if(val.integrity == null){
type_check_fix=0.00;
}else{
type_check_fix=(val.integrity).toFixed(2);
}
}
var tablerow = $("<tr class='rt'></tr>");
Xtable.append(tablerow);
tablerow.append("<td>"+formatidcard(val.idcard_num)+"</td>");
tablerow.append("<td>"+val.name+"</td>");
tablerow.append("<td>"+type_check_fix+"</td>");
if(typename== "技术业务考核")
{
if(val.honorary_check == null){
tablerow.append("<td>0.00</td>");
}else{
tablerow.append("<td>"+val.honorary_check+"</td>");
}
}
tablerow.append("<td>"+val.depot+"</td>");
var td = $("<td></td>");
var a = $("<a>详情查看</a>");
a.on("click", function() {
gotohtml(val.idcard_num);
});
td.append(a);
tablerow.append(td);
});
$("#countnumSafe").html("第 " +dataset[0].pageNo+ " 页 / 共 "+dataset[0].totalPages+" 页");
$("#pageNoSafe").val(dataset[0].pageNo);
$("#gotoSafe").unbind("click", null);
$("#gotoSafe").on("click", function() {
if($("#pageNoSafe").val()<= data[0].totalPages)
{
depotsafemarkInfo(typename, $("#pageNoSafe").val(),order,sort,deptid);
$("#gotoSafe").css("next");
}
else
{
$("#gotoSafe").css("disabled");
}
});
$(nextX).unbind("click", null);
if(page<data[0].totalPages)
{
$(nextX).on("click", function() {
depotsafemarkInfo(typename,parseInt(page) + 1,order,sort,deptid);
});
$(nextX).css("next");
}
else
{
$(nextX).css("disabled");
}
$(preX).unbind("click", null);
if(page>1)
{
$(preX).on("click", function() {
depotsafemarkInfo(typename,page - 1,order,sort,deptid);
});
$(preX).css("previous");
}
else
{
$(preX).css("disabled");
}
}
});
}弹出的列表
<div class="modal fade" id="check" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document" style="width:60%;" >
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="checkModalLabel">Modal title</h4>
</div>
<div class="modal-body" id="checModalBody">
<p> <span class="name"> </span> <span class="store"></span> </p>
<table class="table table-bordered table-hover" id="Safetable">
<thead>
<!-- <tr> -->
<!-- <th>员工ID</th> -->
<!-- <th>姓名</th> -->
<!-- <th id="checktypename"></th> -->
<!-- <th>所属站段</th> -->
<!-- <th>画像详情</th> -->
<!-- </tr> -->
</thead>
<tbody>
</tbody>
</table>
<ul class="pager">
<li><a href="#" id="preSafe">上一页</a></li>
<li><a href="#" id="countnumSafe"> 第12页 / 共234页 </a></li>
<li><a href="#" id="nextSafe">下一页</a></li>
<li> 跳转到 <input type="text" id="pageNoSafe" class="g-input" style="width: 30px;" > 页 </li>
<li><a href="#" id="gotoSafe">跳转</a></li>
</ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" id="checkModalClose">返回</button>
</div>
</div>
</div>
</div> 展示图如下：
推荐阅读