html 部分
<div class="swiper-container swiper2" style="height:265px;overflow:hidden">
<div class="swiper-list">
<!-- <div id="main021" style="width:100%;height:45px"></div>
<div id="main022" style="width:100%;height:45px"></div>
<div id="main023" style="width:100%;height:45px"></div>
<div id="main024" style="width:100%;height:45px"></div>
<div id="main025" style="width:100%;height:45px"></div>
<div id="main026" style="width:100%;height:45px"></div>
<div id="main027" style="width:100%;height:45px"></div> -->
</div>
<div class="swiper-list">
<!-- <div id="main031" style="width:100%;height:45px"></div>
<div id="main032" style="width:100%;height:45px"></div>
<div id="main033" style="width:100%;height:45px"></div>
<div id="main034" style="width:100%;height:45px"></div>
<div id="main035" style="width:100%;height:45px"></div>
<div id="main036" style="width:100%;height:45px"></div>
<div id="main037" style="width:100%;height:45px"></div> -->
</div>
</div>
js部分
$.ajax({
url: humanData,
type: "post",
dataType: "json",
data: {
province: shen,
city: shi,
area: qu,
},
success: function(data) {
if(data.status==1){
// console.log(data);
var zhiwei = {
kefu: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3FpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0MmVkYThkZS1kNmRlLTE3NDAtODk0MC02ZDRlYjk1Y2Q0NDciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NkMwQjM1RjVDQjg5MTFFODk2RUJENENBNkM1OTMyODUiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NkMwQjM1RjRDQjg5MTFFODk2RUJENENBNkM1OTMyODUiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOmY0MTY3MzZlLTNjYTEtYjQ0Mi1hMGEyLTM4YmY4MDhkZjk3NSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0MmVkYThkZS1kNmRlLTE3NDAtODk0MC02ZDRlYjk1Y2Q0NDciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7yorvrAAAB+ElEQVR42pyUTUgVURTHZwZ7ySt0YSDuNGnlRnltFaRALfoEEQRxoYKBJG0Eexg8DMSla10ILUSJWjyjWpSiiS60NmKQiBtJRHhoKCoh4+/AGbmOd4ZXF36cmXPP/d9zz/1wfd93wq2ic6UQ0wcNcB2S4MKh8gWGN8dSB+GxblgQsRcqtgWf4Cv8AgmshDvQCOUwguhQpCBiWc2qjcBJJ6YR+xjzBpaJrb8kSMA05i7cMJeCX7K6DTUwQN9fo68AswNr+GvPBel4LulDIhiAz8O8hSdGYhswAz3EnRjCvk722uPnqoo9MGenVYXEHK1hJ1SH/HUwiFaxZJGWoiM2Hd6wmBL+MX8YO49ZhYwISnFtG1AaI2ibbFR2XwSlsB8tAS9jBKcsPjleCRG8oucs3GZjBBctvm048TT9S9eFumQwWcvAD/R1Wfyi4Yqg7OzNiExa4ac5DzRHxJYGS/b1djiWLOWAvzdcM/iOIgTl6Jx6el9bIq7XfbmGhqsJ3yO4ZgmX8znnlncsF/GxDylm/06wLPOhXrfKiGxysA5L+pCUwG8oC67eK366YRz6nX9rC3ALxkgobT4O7yxXLd/2LXgcPGMDnmIm/kNsKhC7IKiiUr9nsJuH0B70MqYl9sXW5ctGtcM9fQeT2nUMP+Cz1BuxXHjsmQADAPbvtOLedTbgAAAAAElFTkSuQmCC",
zhuanjia: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3FpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0MmVkYThkZS1kNmRlLTE3NDAtODk0MC02ZDRlYjk1Y2Q0NDciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6M0ZGMkExQTRDQjg5MTFFODk1MDFCODdFNTMyNTY5MjciIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6M0ZGMkExQTNDQjg5MTFFODk1MDFCODdFNTMyNTY5MjciIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOmY0MTY3MzZlLTNjYTEtYjQ0Mi1hMGEyLTM4YmY4MDhkZjk3NSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0MmVkYThkZS1kNmRlLTE3NDAtODk0MC02ZDRlYjk1Y2Q0NDciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7xXa4EAAAB/UlEQVR42pyUTUhUURTH33vYGGPUwmBwFw6u2iS1TRCD1OjDQAaEaGFBUSRuAh0MhoJwKeiqCYIW0SC2mJF0oRN9kIuwTRQU0SaKCAYVRQeR5+/AeXF9c99j8sKP8+655/7veffec13f951wezzlHMTchbNwCJLgwoayAOODt5z18Fw3LIjYsIr9hDlYhK8ggWnogm44BhOIPowURKyoWV0h8LkT04i9hHkKH4jtrBEkoIQ5A0fNX8EvWZ2CdhhjbNsYa8D8gc/4T/8TZOCOpA+JYAI+DzMNfUZi36EMt4mrGsK+LvbAo9OoYufN1WnHQ2KO7uE1OBHyd8B9tI5IFlnZdMRK4QOL2cI1s8PcN5hPkBNB2VzbAaRiBG2LPZLTF0HZ2JeWgNEYwYLFJ9crIYIH9J6F26sYwfcW32+oepp+TbmwLzlM0TJxlrHrFr9ouCIoJ9sakckAfDH6P6A/IjYV/LKv1eFYspQL/sJwlfFtRgjK1dnxtF4zEeV1TsrQcPXguwhNlnC5n6/d/KR/mI9VOMnqywTLb17QcktHZFOBb7CkD0kz/IKWoPTu0bkBT2DE+b/2DtogT0JZ83GYsZRave1t8Dh4xgFcxjzbh1ghENsjqKKyfzfhbx1CKzDEnEzsi62/Lwd1FXr1HUzq0BZ8hHnZb8Qq4bm7AgwAKxKdgrHI3FYAAAAASUVORK5CYII="
}
var zhuzhuantu = [];
for(var i = 0; i < data.result.length; i++) {
if(data.result[i].u_rolename == "客服") {
zhuzhuantu.push({
value: data.result[i].login_time,
name: data.result[i].u_realname,
value2: data.result[i].count,
img: zhiwei.kefu
}, )
} else {
zhuzhuantu.push({
value: data.result[i].login_time,
name: data.result[i].u_realname,
value2: data.result[i].count,
img: zhiwei.zhuanjia
}, )
}
}
// 在线时长/累计接听
var option = {
grid: {
left: '16%',
right: '20%',
top: '0%',
bottom: '0%',
},
color: ['#1c8efe', '#9977e4'],
xAxis: [{
type: 'value',
show: false,
function(value) {
return value.max / 1000;
}
}],
yAxis: [{
type: 'category',
show: false,
axisLabel: {
interval: 0,
margin: 95,
textStyle: {
align: 'left',
baseline: 'middle'
}
},
},
{
type: 'category',
axisLine: {
show: false
},
axisTick: {
show: false
},
axisLabel: {
color: '#88ceed',
fontSize: 12,
interval: 0,
margin: 0,
},
data: ['8974/2589']
}
],
series: [{
type: 'bar',
stack: '性别比例',
barWidth: 10,
// barCategoryGap:'10%',
label: {
normal: {
show: true,
position: 'left',
}
},
data: [{
name: '客服',
value: '200',
label: {
position: 'left',
normal: {
formatter: [
'{Female|} 赵鑫'
].join('\n'),
rich: {
Female: {
height: 20,
align: 'left',
backgroundColor: {
image: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3FpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0MmVkYThkZS1kNmRlLTE3NDAtODk0MC02ZDRlYjk1Y2Q0NDciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6M0ZGMkExQTRDQjg5MTFFODk1MDFCODdFNTMyNTY5MjciIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6M0ZGMkExQTNDQjg5MTFFODk1MDFCODdFNTMyNTY5MjciIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOmY0MTY3MzZlLTNjYTEtYjQ0Mi1hMGEyLTM4YmY4MDhkZjk3NSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0MmVkYThkZS1kNmRlLTE3NDAtODk0MC02ZDRlYjk1Y2Q0NDciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7xXa4EAAAB/UlEQVR42pyUTUhUURTH33vYGGPUwmBwFw6u2iS1TRCD1OjDQAaEaGFBUSRuAh0MhoJwKeiqCYIW0SC2mJF0oRN9kIuwTRQU0SaKCAYVRQeR5+/AeXF9c99j8sKP8+655/7veffec13f951wezzlHMTchbNwCJLgwoayAOODt5z18Fw3LIjYsIr9hDlYhK8ggWnogm44BhOIPowURKyoWV0h8LkT04i9hHkKH4jtrBEkoIQ5A0fNX8EvWZ2CdhhjbNsYa8D8gc/4T/8TZOCOpA+JYAI+DzMNfUZi36EMt4mrGsK+LvbAo9OoYufN1WnHQ2KO7uE1OBHyd8B9tI5IFlnZdMRK4QOL2cI1s8PcN5hPkBNB2VzbAaRiBG2LPZLTF0HZ2JeWgNEYwYLFJ9crIYIH9J6F26sYwfcW32+oepp+TbmwLzlM0TJxlrHrFr9ouCIoJ9sakckAfDH6P6A/IjYV/LKv1eFYspQL/sJwlfFtRgjK1dnxtF4zEeV1TsrQcPXguwhNlnC5n6/d/KR/mI9VOMnqywTLb17QcktHZFOBb7CkD0kz/IKWoPTu0bkBT2DE+b/2DtogT0JZ83GYsZRave1t8Dh4xgFcxjzbh1ghENsjqKKyfzfhbx1CKzDEnEzsi62/Lwd1FXr1HUzq0BZ8hHnZb8Qq4bm7AgwAKxKdgrHI3FYAAAAASUVORK5CYII=',
}
}
}
}
}
}]
},
{
type: 'bar',
stack: '性别比例',
barWidth: 10,
// barCategoryGap:'10%',
label: {
normal: {
show: true,
position: 'right'
}
},
data: [{
name: '男',
value: '100',
label: {
normal: {
formatter: [
].join('\n'),
}
}
}]
}
]
};
var data = zhuzhuantu
chartList("main02", "0")
function chartList(id, ind) {
// 计算在线时长+累计接听 最大值
var arr = [];
for(var i = 0; i < data.length - 1; i++) {
arr.push(parseFloat(data[i].value) + parseFloat(data[i].value2));
}
var max = Math.max.apply(null, arr);
for(var i = 0; i < data.length; i++) {
id = id + i
$('.swiper-list:eq(' + ind + ')').append('<div id="' + id + '" style="width:100%;height:45px"></div>');
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById(id));
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
myChart.setOption({
xAxis: [{
max: max
}],
yAxis: [{},
{
data: [data[i].value + "/" + data[i].value2],
}
],
series: [{
data: [{
value: data[i].value,
label: {
position: 'left',
normal: {
alige: 'left',
formatter: [
'{Female|} ' + data[i].name
].join('\n'),
align: 'left',
padding: -61,
rich: {
Female: {
height: 20,
align: 'left',
backgroundColor: {
image: data[i].img
}
}
}
}
}
}]
},
{
data: [{
value: data[i].value2,
label: {
normal: {
formatter: [
].join('\n'),
}
}
}]
}
]
})
}
}
}else{
// console.log(data.msg)
}
},
error: function(err) {
console.log("网络故障，请检查1");
}
});
scroll_list()
function scroll_list() {
var list_con_h = $('.swiper2').height();
var table_h = $('.swiper-list').height();
if(table_h > list_con_h) {
chartList("main03", "1")
zblistscroll(table_h)
}
}
var zbh_time;
function zblistscroll(h) {
var _con = $('.swiper-list');
var i = 0;
var _conUp = $('.swiper-list div').eq(0).height();
var _temp = _conUp;
zbh_time = setTimeout(interval, 2000)
function interval() {
if(zbh_time) {
clearTimeout(zbh_time)
}
$('.swiper-list:eq(0)').animate({
marginTop: '-' + _conUp
})
if(h == _conUp) {
$('.swiper-list:eq(0)').animate({
marginTop: '-' + _conUp
}, "normal", over)
} else {
i = i + 1;
_conUp += $('.swiper-list:eq(0) div').eq(i).height();
}
function over() {
$('.swiper-list:eq(0)').attr('style', 'margin-top:0');
i = 0;
_conUp = _temp;
}
zbh_time = setTimeout(interval, 2000)
}
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
