|
|
@@ -37,7 +37,9 @@ function init(data) {
|
|
|
$('.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);
|
|
|
@@ -139,18 +141,29 @@ function geo(data) {
|
|
|
|
|
|
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();
|
|
|
- // });
|
|
|
+ $('.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.forEach(function(item) {
|
|
|
+ comjobs.hot.forEach(function(item) {
|
|
|
+ html += `<div class="row">`;
|
|
|
+ html += `<span class="col">${item.title}</span>`;
|
|
|
+ html += `<span class="col">${item.worker.ftitle}</span>`;
|
|
|
+ html += `<span class="col">${item.bwagall || '面谈'}</span>`;
|
|
|
+ html += `<span class="icon-dot"></span>`;
|
|
|
+ html += `</div>`;
|
|
|
+ });
|
|
|
+ //渲染
|
|
|
+ $('.monitor .marquee.hot').html(html);
|
|
|
+ html = '';
|
|
|
+ comjobs.new.forEach(function(item) {
|
|
|
html += `<div class="row">`;
|
|
|
html += `<span class="col">${item.title}</span>`;
|
|
|
html += `<span class="col">${item.company}</span>`;
|
|
|
@@ -159,7 +172,7 @@ function monitor(data) {
|
|
|
html += `</div>`;
|
|
|
});
|
|
|
//渲染
|
|
|
- $('.monitor .marquee').html(html);
|
|
|
+ $('.monitor .marquee.new').html(html);
|
|
|
//滚动
|
|
|
//原理：把marquee下面的子盒子都复制一遍 加入到marquee中
|
|
|
// 然后动画向上滚动，滚动到一半重新开始滚动
|
|
|
@@ -173,6 +186,62 @@ function monitor(data) {
|
|
|
|
|
|
}
|
|
|
|
|
|
+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);
|
|
|
+ } 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} <br/>{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']
|
|
|
+ };
|
|
|
+ myechartAge.setOption(option);
|
|
|
+}
|
|
|
function pie(data) {
|
|
|
let eduction = data.eduction;
|
|
|
let unknown = 0;
|
|
|
@@ -189,7 +258,7 @@ function pie(data) {
|
|
|
});
|
|
|
$('.edu-unknown').text(unknown);
|
|
|
$('.edu-total').text(total);
|
|
|
- var myechart = echarts.init($('.pie')[0]);
|
|
|
+ var myechart = echarts.init($('.pie.edu')[0]);
|
|
|
option = {
|
|
|
// 控制提示
|
|
|
tooltip: {
|
|
|
@@ -228,6 +297,164 @@ function pie(data) {
|
|
|
};
|
|
|
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;
|
|
|
@@ -375,7 +602,7 @@ function user(data) {
|
|
|
}
|
|
|
]
|
|
|
};
|
|
|
- var myechart = echarts.init($('.users .bar')[0]);
|
|
|
+ var myechart = echarts.init($('.users .bar.cate')[0]);
|
|
|
myechart.setOption(option);
|
|
|
}
|
|
|
|
jiangzixin