//自调用函数
(function() {
// 1、页面一加载就要知道页面宽度计算
var setFont = function() {
// 因为要定义变量可能和别的变量相互冲突，污染，所有用自调用函数
var html = document.documentElement; // 获取html
// 获取宽度
var width = html.clientWidth;
// 判断
if (width < 1024) width = 1024
if (width > 1920) width = 1920
// 设置html的基准值
var fontSize = width / 80 + 'px';
// 设置给html
html.style.fontSize = fontSize;
}
setFont();
// 2、页面改变的时候也需要设置
// 尺寸改变事件
window.onresize = function() {
setFont();
}
})();
$.get('https://linggong.jinjianghc.com/mainapp.php/screen/index', (res) => {
init(res.data)
})
$.get('https://aggadmin.jucai.gov.cn/admin/api/odd_job_other', (res) => {
init_other(res)
})
function init(data) {
$('.broker_total').text(data.broker_total);
$('.comjobs_total').text(data.comjobs_total);
$('.company_total').text(data.company_total);
$('.people_man').text(data.people_man);
$('.people_total').text(data.people_total);
$('.people_woman').text(data.people_woman);
$('.train').text(data.train);
$('.train_join').text(data.train_join);
this.geo(data);
this.monitor(data);
this.pieAge(data);
this.pie(data);
this.userType(data);
this.user(data);
this.order(data);
this.sale(data);
this.gauge(data);
this.province(data);
}
function init_other(data) {
$('.obb_job_deal_num').text(data.obb_job_deal_num);
$('.obb_job_deal_money').text(data.obb_job_deal_money);
$('.obb_job_service_num').text(data.obb_job_service_num);
}
function geo(data) {
let community = data.community;
let other = 0;
let max = 0; //最大人数
community = community.map((item) => {
if (item.name == '其他') {
other += item.count;
} else if (item.count > max) {
max = item.count;
}
return {
name: item.name,
value: item.count
};
});
community.push({
name: '泉州出口加工区',
value: 0
});
community.push({
name: '安平开发区',
value: 0
});
var myecharts = echarts.init($('.map .geo')[0])
// $.get('https://geo.datav.aliyun.com/areas_v3/bound/350582.json', result => {
$.get('js/350582.json', result => {
// 注册 echarts 地图
echarts.registerMap('jinjiang', result);
var option = {
backgroundColor: '#080a20',
title: {
text: '其他地区：' + other + ' (人)',
// subtext: '其他地区：' + community[community.length - 1].count,
left: 'left',
textStyle: {
color: '#ffffff'
}
},
tooltip: {
trigger: 'item',
formatter: '{b}
{c} (人)'
},
visualMap: {
min: 0,
max: max,
text: ['多', '少'],
realtime: true,
calculable: true,
color: '#fff',
inRange: {
color: ['#142957', '#0b1c2d']
},
textStyle: {
color: '#fff'
}
},
series: [{
type: 'map',
map: 'jinjiang',
zoom: 1.2,
roam: true,
coordinateSystem: 'geo',
// rippleEffect: {
// brushType: 'stroke'
// },
symbolSize: function(val, params) {
return 8;
},
label: {
show: true,
color: '#fff'
},
itemStyle: {
normal: {
areaColor: '#142957',
borderColor: '#0692a4'
}
},
emphasis: {
areaColor: '#0b1c2d'
},
data: community,
nameMap: {
'晋江市经济开发区': '经济开发区'
}
}]
};
myecharts.setOption(option);
})
}
function monitor(data) {
//事件委托
$('.monitor').on('click', ' a', function () {
//点击当前的a 加类名 active 他的兄弟删除类名
$(this).addClass('active').siblings().removeClass('active');
//获取一一对应的下标
var index = $(this).index();
//选取content 然后狗日对应下标的 显示 当前的兄弟.content隐藏
$('.content').eq(index).show().siblings('.content').hide();
});
//填充数据
let comjobs = data.comjobs;
var html = '';
comjobs.hot.forEach(function(item) {
html += ``;
html += `${item.title}`;
html += `${item.worker.ftitle}`;
html += `${item.bwagall || '面谈'}`;
html += ``;
html += `
`;
});
//渲染
$('.monitor .marquee.hot').html(html);
html = '';
comjobs.new.forEach(function(item) {
html += ``;
html += `${item.title}`;
html += `${item.company}`;
html += `${item.salary || '面谈'}`;
html += ``;
html += `
`;
});
//渲染
$('.monitor .marquee.new').html(html);
//滚动
//原理：把marquee下面的子盒子都复制一遍 加入到marquee中
// 然后动画向上滚动，滚动到一半重新开始滚动
//因为选取的是两个marquee 所以要遍历
// $('.monitor .marquee').each(function (index, dom) {
// //将每个 的所有子级都复制一遍
// var rows = $(dom).children().clone();
// //再将新的到的加入原来的
// $(dom).append(rows);
// });
}
function pieAge(data) {
let eduction = data.user_age;
let unknown = 0;
let total = 0;
eduction.map((item, index) => {
if (item.name == '其他') {
unknown += item.count;
// eduction.splice(index, 1);
//其他数据
item.value = item.count;
} else {
total += item.count;
item.value = item.count;
}
return item;
});
console.log(eduction)
$('.age-unknown').text(unknown);
$('.age-total').text(total);
var myechartAge = echarts.init($('.pie.age')[0]);
option = {
// 控制提示
tooltip: {
// 非轴图形，使用item的意思是放到数据对应图形上触发提示
trigger: 'item',
// 格式化提示内容：
// a 代表图表名称 b 代表数据名称 c 代表数据 d代表 当前数据/总数据的比例
formatter: "{a}
{b} : {c} ({d}%)"
},
// 控制图表
series: [{
// 图表名称
name: '年龄',
// 图表类型
type: 'pie',
// 南丁格尔玫瑰图 有两个圆 内圆半径10% 外圆半径70%
// 百分比基于 图表DOM容器的半径
radius: ['10%', '70%'],
// 图表中心位置 left 50% top 50% 距离图表DOM容器
center: ['50%', '50%'],
// 半径模式，另外一种是 area 面积模式
roseType: 'radius',
// 数据集 value 数据的值 name 数据的名称
data: eduction,
//文字调整
label: {
fontSize: 10
},
//引导线
labelLine: {
length: 8,
length2: 10
}
}],
color: ['#006cff', '#9fe6b8', '#32c5e9', '#1d9dff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff']
};
myechartAge.setOption(option);
}
function pie(data) {
let eduction = data.eduction;
let unknown = 0;
let total = 0;
eduction.map((item, index) => {
if (item.name == '未知') {
unknown += item.count;
eduction.splice(index, 1);
} else {
total += item.count;
item.value = item.count;
}
return item;
});
$('.edu-unknown').text(unknown);
$('.edu-total').text(total);
var myechart = echarts.init($('.pie.edu')[0]);
option = {
// 控制提示
tooltip: {
// 非轴图形，使用item的意思是放到数据对应图形上触发提示
trigger: 'item',
// 格式化提示内容：
// a 代表图表名称 b 代表数据名称 c 代表数据 d代表 当前数据/总数据的比例
formatter: "{a}
{b} : {c} ({d}%)"
},
// 控制图表
series: [{
// 图表名称
name: '学历',
// 图表类型
type: 'pie',
// 南丁格尔玫瑰图 有两个圆 内圆半径10% 外圆半径70%
// 百分比基于 图表DOM容器的半径
radius: ['10%', '70%'],
// 图表中心位置 left 50% top 50% 距离图表DOM容器
center: ['50%', '50%'],
// 半径模式，另外一种是 area 面积模式
roseType: 'radius',
// 数据集 value 数据的值 name 数据的名称
data: eduction,
//文字调整
label: {
fontSize: 10
},
//引导线
labelLine: {
length: 8,
length2: 10
}
}],
color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff']
};
myechart.setOption(option);
}
// 用户
function userType(data) {
let cate = data.type;
let titleArr = [];
let countArr = [];
let total = 0;
let count = cate.length;
// 中间省略的数据 准备三项
var hiddenItem = {
name: '',
value: 10,
// 柱子颜色
itemStyle: {
color: '#254065'
},
// 鼠标经过柱子颜色
emphasis: {
itemStyle: {
color: '#254065'
}
},
// 工具提示隐藏
tooltip: {
extraCssText: 'opacity:0'
}
};
let titleAttr = {
1: '按月',
2: '按时',
3: '按件',
4: '按项目',
5: '其他',
}
cate.forEach((item, index) => {
if (index < 5 || index + 5 >= count) {
titleArr.push(titleAttr[item.wtype])
countArr.push(item.count)
} else if (count > 10 && index == 5) {
//随机三个
let arr = []
for (let i = 5; i < count - 5; i++) {
arr.push(i)
}
let randomArr = [];
while (randomArr.length < 3) {
let temp = (Math.random() * arr.length) >> 0;
randomArr.push(arr.splice(temp, 1)[0]);
}
randomArr.forEach((randomIndex) => {
titleArr.push(titleAttr[cate[randomIndex].wtype])
countArr.push(cate[randomIndex].count)
})
}
total += item.count
});
$('.type-count').text(count)
$('.type-total').text(total)
option = {
// 工具提示
tooltip: {
// 触发类型 经过轴触发axis 经过轴触发item
trigger: 'item',
// 轴触发提示才有效
axisPointer: {
// 默认为直线，可选为：'line' 线效果 | 'shadow' 阴影效果
type: 'shadow'
}
},
// 图表边界控制
grid: {
// 距离 上右下左 的距离
left: '0',
right: '3%',
bottom: '3%',
top: '5%',
// 大小是否包含文本【类似于boxsizing】
containLabel: true,
//显示边框
show: true,
//边框颜色
borderColor: 'rgba(0, 240, 255, 0.3)'
},
// 控制x轴
xAxis: [{
// 使用类目，必须有data属性
type: 'category',
// 使用 data 中的数据设为刻度文字
data: titleArr,
// 刻度设置
axisTick: {
// true意思：图形在刻度中间
// false意思：图形在刻度之间
alignWithLabel: false,
show: false
},
//文字
axisLabel: {
color: '#4c9bfd'
}
}],
// 控制y轴
yAxis: [{
// 使用数据的值设为刻度文字
type: 'value',
axisTick: {
// true意思：图形在刻度中间
// false意思：图形在刻度之间
alignWithLabel: false,
show: false
},
//文字
axisLabel: {
color: '#4c9bfd'
},
splitLine: {
lineStyle: {
color: 'rgba(0, 240, 255, 0.3)'
}
},
}],
// 控制x轴
series: [
{
// series配置
// 颜色
itemStyle: {
// 提供的工具函数生成渐变颜色
color: new echarts.graphic.LinearGradient(
// (x1,y2) 点到点 (x2,y2) 之间进行渐变
0, 0, 0, 1,
[{
offset: 0,
color: '#00fffb'
}, // 0 起始颜色
{
offset: 1,
color: '#0061ce'
} // 1 结束颜色
]
)
},
// 图表数据名称
name: '岗位统计',
// 图表类型
type: 'bar',
// 柱子宽度
barWidth: '60%',
// 数据
data: countArr
}
]
};
var myechart = echarts.init($('.users .bar.type')[0]);
myechart.setOption(option);
}
// 用户
function user(data) {
let cate = data.cate;
let titleArr = [];
let countArr = [];
let total = 0;
let count = cate.length;
// 中间省略的数据 准备三项
var hiddenItem = {
name: '',
value: 10,
// 柱子颜色
itemStyle: {
color: '#254065'
},
// 鼠标经过柱子颜色
emphasis: {
itemStyle: {
color: '#254065'
}
},
// 工具提示隐藏
tooltip: {
extraCssText: 'opacity:0'
}
};
cate.forEach((item, index) => {
if (index < 5 || index + 5 >= count) {
titleArr.push(item.title)
countArr.push(item.count)
} else if (count > 10 && index == 5) {
//随机三个
let arr = []
for (let i = 5; i < count - 5; i++) {
arr.push(i)
}
let randomArr = [];
while (randomArr.length < 3) {
let temp = (Math.random() * arr.length) >> 0;
randomArr.push(arr.splice(temp, 1)[0]);
}
randomArr.forEach((randomIndex) => {
titleArr.push(cate[randomIndex].title)
countArr.push(cate[randomIndex].count)
})
}
total += item.count
});
$('.cate-count').text(count)
$('.cate-total').text(total)
option = {
// 工具提示
tooltip: {
// 触发类型 经过轴触发axis 经过轴触发item
trigger: 'item',
// 轴触发提示才有效
axisPointer: {
// 默认为直线，可选为：'line' 线效果 | 'shadow' 阴影效果
type: 'shadow'
}
},
// 图表边界控制
grid: {
// 距离 上右下左 的距离
left: '0',
right: '3%',
bottom: '3%',
top: '5%',
// 大小是否包含文本【类似于boxsizing】
containLabel: true,
//显示边框
show: true,
//边框颜色
borderColor: 'rgba(0, 240, 255, 0.3)'
},
// 控制x轴
xAxis: [{
// 使用类目，必须有data属性
type: 'category',
// 使用 data 中的数据设为刻度文字
data: titleArr,
// 刻度设置
axisTick: {
// true意思：图形在刻度中间
// false意思：图形在刻度之间
alignWithLabel: false,
show: false
},
//文字
axisLabel: {
color: '#4c9bfd'
}
}],
// 控制y轴
yAxis: [{
// 使用数据的值设为刻度文字
type: 'value',
axisTick: {
// true意思：图形在刻度中间
// false意思：图形在刻度之间
alignWithLabel: false,
show: false
},
//文字
axisLabel: {
color: '#4c9bfd'
},
splitLine: {
lineStyle: {
color: 'rgba(0, 240, 255, 0.3)'
}
},
}],
// 控制x轴
series: [
{
// series配置
// 颜色
itemStyle: {
// 提供的工具函数生成渐变颜色
color: new echarts.graphic.LinearGradient(
// (x1,y2) 点到点 (x2,y2) 之间进行渐变
0, 0, 0, 1,
[{
offset: 0,
color: '#00fffb'
}, // 0 起始颜色
{
offset: 1,
color: '#0061ce'
} // 1 结束颜色
]
)
},
// 图表数据名称
name: '岗位统计',
// 图表类型
type: 'bar',
// 柱子宽度
barWidth: '60%',
// 数据
data: countArr
}
]
};
var myechart = echarts.init($('.users .bar.cate')[0]);
myechart.setOption(option);
}
//订单
function order(data) {
var data = {
day365: {
orders: '20,301,987',
amount: '99834'
},
day90: {
orders: '301,987',
amount: '9834'
},
day30: {
orders: '1,987',
amount: '3834'
},
day1: {
orders: '987',
amount: '834'
}
}
//点击事件
$('.order').on('click', '.filter a', function() {
//点击之后加类名
$(this).addClass('active').siblings().removeClass('active');
// 先获取点击a的 data-key自定义属性
var key = $(this).attr('data-key');
//获取自定义属性
// data{}==>data.shuxing data['shuxing]
key = data[key]; //
$('.order .item h4:eq(0)').text(key.orders);
$('.order .item h4:eq(1)').text(key.amount);
});
//定时器
var index = 0;
var aclick = $('.order a');
setInterval(function() {
index++;
if (index > 3) {
index = 0;
}
//每san秒调用点击事件
aclick.eq(index).click();
}, 3000);
}
//销售
function sale(data) {
let user_month = data.user_month;
let titleArr = [];
let countArr = [];
user_month.forEach((item, index) => {
titleArr.push(item.name)
countArr.push(item.count)
});
var option = {
//鼠标提示工具
tooltip: {
trigger: 'axis'
},
xAxis: {
// 类目类型
type: 'category',
// x轴刻度文字
data: titleArr,
axisTick: {
show: false //去除刻度线
},
axisLabel: {
color: '#4c9bfd' //文本颜色
},
axisLine: {
show: false //去除轴线
},
boundaryGap: false //去除轴内间距
},
yAxis: {
// 数据作为刻度文字
type: 'value',
axisTick: {
show: false //去除刻度线
},
axisLabel: {
color: '#4c9bfd' //文本颜色
},
axisLine: {
show: false //去除轴线
},
boundaryGap: false //去除轴内间距
},
//图例组件
legend: {
textStyle: {
color: '#4c9bfd' // 图例文字颜色
},
right: '10%' //距离右边10%
},
// 设置网格样式
grid: {
show: true, // 显示边框
top: '20%',
left: '3%',
right: '4%',
bottom: '3%',
borderColor: '#012f4a', // 边框颜色
containLabel: true // 包含刻度文字在内
},
series: [{
name: '注册用户',
// 数据
data: countArr,
// 图表类型
type: 'line',
// 圆滑连接
smooth: true,
itemStyle: {
color: '#00f2f1' // 线颜色
}
}]
};
var myechart = echarts.init($('.line')[0]);
myechart.setOption(option);
//点击效果
var data = {
year: [
[24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
[40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
],
quarter: [
[23, 75, 12, 97, 21, 67, 98, 21, 43, 64, 76, 38],
[43, 31, 65, 23, 78, 21, 82, 64, 43, 60, 19, 34]
],
month: [
[34, 87, 32, 76, 98, 12, 32, 87, 39, 36, 29, 36],
[56, 43, 98, 21, 56, 87, 43, 12, 43, 54, 12, 98]
],
week: [
[43, 73, 62, 54, 91, 54, 84, 43, 86, 43, 54, 53],
[32, 54, 34, 87, 32, 45, 62, 68, 93, 54, 54, 24]
]
}
$('.sales ').on('click', '.caption a', function() {
$(this).addClass('active').siblings('a').removeClass('active');
//option series data
//获取自定义属性值
var key = $(this).attr('data-type');
//取出对应的值
key = data[key];
//将值设置到 图表中
option.series[0].data = key[0];
option.series[1].data = key[1];
//再次调用才能在页面显示
myechart.setOption(option);
});
//定时器
var index = 0;
var timer = setInterval(function() {
index++;
if (index > 4) {
index = 0;
};
$('.sales .caption a').eq(index).click();
}, 2000);
}
function gauge(data) {
var option = {
series: [{
type: 'pie',
radius: ['130%', '150%'], // 放大图形
center: ['50%', '80%'], // 往下移动 套住75%文字
label: {
show: false,
},
startAngle: 180,
hoverOffset: 0, // 鼠标经过不变大
data: [{
value: 100,
itemStyle: { // 颜色渐变#00c9e0->#005fc1
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0,
color: '#00c9e0'
},
{
offset: 1,
color: '#005fc1'
}
]
}
}
},
{
value: 100,
itemStyle: {
color: '#12274d'
}
}, // 颜色#12274d
{
value: 200,
itemStyle: {
color: 'transparent'
}
} // 透明隐藏第三块区域
]
}]
};
var myechart = echarts.init($('.gauge')[0]);
myechart.setOption(option);
}
function province(data) {
var data = [{
name: '可爱多',
num: '9,086'
},
{
name: '娃哈哈',
num: '8,341'
},
{
name: '喜之郎',
num: '7,407'
},
{
name: '八喜',
num: '6,080'
},
{
name: '小洋人',
num: '6,724'
},
{
name: '好多鱼',
num: '2,170'
},
]
$('.inner').on('mouseenter', '.sup li', function() {
$(this).addClass('active').siblings().removeClass('active');
//获取随机的值 sort方法 是给数组排序 a-b是从小到大
//.5-随机0-1的数 可能为正可能为负 排序就会随机
var radomData = data.sort(function(a, b) {
return 0.5 - Math.random()
});
var html = '';
radomData.forEach(function(item) {
html +=
`${item.name}${item.num}