Tenlion/crpm-proj-code-set
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改

Browse Source
This commit is contained in:
lyp 2025-07-03 17:06:54 +08:00
commit 71ee67d75c
19 changed files with 8364 additions and 2361 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -39,4 +39,4 @@ mvnw*
/src/main/resources/ftl/crpm/code/frontend-generate/
/src/main/resources/ftl/crpm/code/generate/
db/
/db/**

BIN
gcckglxt/db/aimzdb.mv.db Normal file
View File

Binary file not shown.

BIN
gcsbyxjkglxt/db/aimzdb.mv.db Normal file
View File

Binary file not shown.

1444
gcsbyxjkglxt/src/main/resources/static/route/pages/index.html
View File

File diff suppressed because it is too large Load Diff

BIN
gcscsbsjcjyjkxt/db/aimzdb.mv.db Normal file
View File

Binary file not shown.

1517
gcscsbsjcjyjkxt/src/main/resources/static/route/pages/index.html
View File

File diff suppressed because it is too large Load Diff

6
gcxxfbglxt/src/main/resources/static/assets/crpm/index/index2/index2.css
View File

@ -295,11 +295,9 @@
.homepage{
background:#f5f4f9;
height: calc(100vh - 100px);
padding-left:10px;
padding-right:10px;
padding-bottom:10px;
padding: 10px;
box-sizing:border-box;
overflow: auto;
}
.homepage-top{
padding-top:10px;

1564
gcxxfbglxt/src/main/resources/static/route/pages/index.html
View File

File diff suppressed because it is too large Load Diff

1146
hlwdxyjrpt/src/main/resources/static/route/pages/index.html
View File

File diff suppressed because it is too large Load Diff

4
jyrycljcspglxt/src/main/resources/static/assets/crpm/index/index4/index4.css
View File

@ -287,8 +287,8 @@
padding-right:10px;
padding-bottom:10px;
box-sizing:border-box;
border-radius:20px
border-radius:20px;
overflow: auto;
}
.homepage-top{
padding-top:10px;

1169
jyrycljcspglxt/src/main/resources/static/route/pages/index.html
View File

File diff suppressed because it is too large Load Diff

BIN
qysczyjhxt/db/aimzdb.mv.db Normal file
View File

Binary file not shown.

1215
qysczyjhxt/src/main/resources/static/route/pages/index.html
View File

File diff suppressed because it is too large Load Diff

274
rjdmaiznscxt/src/main/resources/static/route/pages/index.html
View File

@ -83,15 +83,21 @@
<div class="bottom">
<div class="content">
<div class='homepage' id="homepage">
<div class='homepage-top' >
<div id="barChartOne" class='barChartOne' ></div>
<div class='pieChart' id="pieChart"></div>
<div class="layui-row layui-col-space15">
<div class="layui-col-md6">
<div id="codeGenChart" style="width:100%;height:400px;"></div>
</div>
<div class="layui-col-md6">
<div id="errorTypeChart" style="width:100%;height:400px;"></div>
</div>
</div>
<div class="layui-row layui-col-space15" style="margin-top:15px;">
<div class="layui-col-md6">
<div id="testTrendChart" style="width:100%;height:400px;"></div>
</div>
<div class="layui-col-md6">
<div id="deployChart" style="width:100%;height:400px;"></div>
</div>
<div class='homepage-bot' >
<div id="barChartTwo" class='barChartTwo' ></div>
<div id="barChartThree" class='barChartThree' ></div>
</div>
</div>
<iframe class="page-iframe" id="pageIframe" src="" style="display: none;"></iframe>
@ -100,10 +106,10 @@
</div>
</div>
</div>
<script src="assets/crpm/js/layui/layui.js"></script>
<script src="assets/crpm/js/echarts/echarts.min.js"></script>
<script src="assets/crpm/js/layui/layui.js"></script>
<script src="assets/crpm/js/echarts/echarts.min.js"></script>
<script>
<script>
layui.use(['element', 'layer', 'util'], function () {
var element = layui.element;
var layer = layui.layer;
@ -129,69 +135,122 @@
homepage.style.display = 'none';
});
});
//柱状图1
var barChartOne = echarts.init(document.getElementById('barChartOne'));
var optionBarOne = {
animation: false,
// 代码生成项目状态分布饼图
var codeGenChart = echarts.init(document.getElementById('codeGenChart'));
var codeGenOption = {
title: {
//text: '业务核心数据'//
},
tooltip: {},
legend: {
//data: ['收入', '支出'] ,//
data: ['data1', 'data2'] ,
left: 'right'
},
xAxis: {
data: ['一月', '二月', '三月', '四月', '五月','六月','七月','八月','九月','十月','十一月','十二月',]
},
yAxis: {},
series: [{
name: 'data1',
type: 'bar',
data: [5, 20, 36, 10, 10,15,16,20,12,13,35,12] // 第一条柱状图的数据
}, {
name: 'data2',
type: 'bar',
data: [15, 10, 25, 8, 15,8,30,12,11,18,25,12] // 第二条柱状图的数据
}]
};
barChartOne.setOption(optionBarOne);
// 饼状图
var pieChart = echarts.init(document.getElementById('pieChart'));
var optionPie = {
animation: false,
title: {
//text: '业务核心数据',//
left: 'left'
text: '代码生成项目状态分布',
left: 'center'
},
tooltip: {
trigger: 'item'
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 'right'
left: 'left'
},
series: [{
//name: '嘻嘻',//
name: '项目状态',
type: 'pie',
radius: ['50%', '70%'],
radius: '50%',
data: [
{value: 150, name: 'data1'},
{value: 274, name: 'data2'},
{value: 310, name: 'data3'},
{value: 335, name: 'data4'},
{value: 400, name: 'data5'}
]
{value: 10, name: '成功'},
{value: 0, name: '失败'}
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
};
pieChart.setOption(optionPie);
//柱状图2
var barChartTwo = echarts.init(document.getElementById('barChartTwo'));
var optionBarTwo = {
animation: false,
codeGenChart.setOption(codeGenOption);
// 错误类型分布柱状图
var errorTypeChart = echarts.init(document.getElementById('errorTypeChart'));
var errorTypeOption = {
title: {
//text: '业务核心数据'//
text: '错误类型分布统计',
left: 'center'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
xAxis: {
type: 'category',
data: ['运行时异常', '数据库异常', 'IO异常', '网络异常', '编译时异常'],
axisLabel: {
rotate: 45
}
},
yAxis: {
type: 'value'
},
series: [{
name: '错误数量',
type: 'bar',
data: [6, 1, 1, 1, 1],
itemStyle: {
color: '#ff6b6b'
}
}]
};
errorTypeChart.setOption(errorTypeOption);
// 测试用例执行趋势折线图
var testTrendChart = echarts.init(document.getElementById('testTrendChart'));
var testTrendOption = {
title: {
text: '测试用例执行趋势',
left: 'center'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['通过', '失败'],
top: 30
},
xAxis: {
type: 'category',
data: ['5月1日', '5月5日', '5月10日', '5月15日', '5月20日', '5月25日', '5月30日', '6月2日', '6月5日', '6月10日']
},
yAxis: {
type: 'value'
},
series: [
{
name: '通过',
type: 'line',
data: [49, 30, 98, 20, 40, 58, 30, 70, 43, 20],
itemStyle: {
color: '#4ecdc4'
}
},
{
name: '失败',
type: 'line',
data: [1, 0, 2, 5, 0, 2, 5, 0, 2, 0],
itemStyle: {
color: '#ff6b6b'
}
}
]
};
testTrendChart.setOption(testTrendOption);
// 部署成功率统计柱状图
var deployChart = echarts.init(document.getElementById('deployChart'));
var deployOption = {
title: {
text: '项目部署成功率统计',
left: 'center'
},
tooltip: {
trigger: 'axis',
@ -200,91 +259,36 @@
}
},
legend: {
data: ['Profit', 'Expenses', 'Income']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'value'
}
],
yAxis: [
{
type: 'category',
axisTick: {
show: false
},
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
}
],
series: [
{
name: 'Profit',
type: 'bar',
label: {
show: true,
position: 'inside'
},
emphasis: {
focus: 'series'
},
data: [200, 170, 240, 244, 200, 220, 210]
},
{
name: 'Income',
type: 'bar',
stack: 'Total',
label: {
show: true
},
emphasis: {
focus: 'series'
},
data: [320, 302, 341, 374, 390, 450, 420]
},
{
name: 'Expenses',
type: 'bar',
stack: 'Total',
label: {
show: true,
position: 'left'
},
emphasis: {
focus: 'series'
},
data: [-120, -132, -101, -134, -190, -230, -210]
}
]
};
barChartTwo.setOption(optionBarTwo);
//柱状图3
var barChartThree = echarts.init(document.getElementById('barChartThree'));
var optionBarThree = {
animation: false,
title: {
//text: '业务核心数据'//
data: ['成功', '失败'],
top: 30
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
data: ['生产环境', '测试环境', '预生产环境']
},
yAxis: {
type: 'value'
},
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
name: '成功',
type: 'bar',
data: [4, 2, 2],
itemStyle: {
color: '#4ecdc4'
}
},
{
name: '失败',
type: 'bar',
data: [0, 2, 0],
itemStyle: {
color: '#ff6b6b'
}
}
]
};
barChartThree.setOption(optionBarThree);
</script>
deployChart.setOption(deployOption);
</script>
</body>
</html>

273
sbewmxjxt/src/main/resources/static/route/pages/index.html
View File

@ -11,7 +11,7 @@
<link rel="stylesheet" href="assets/crpm/index/index.css" />
</head>
<body>
<div class="system">
<div class="system">
<div class="top">
<h3>设备二维码巡检系统</h3>
<span>
@ -69,13 +69,41 @@
</div>
<div class="content">
<div class="homepage" id="homepage">
<div class="homepage-top">
<div class="lineChart1" id="lineChart1"></div>
<div class="layui-row layui-col-space15">
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">设备故障类型统计</div>
<div class="layui-card-body">
<div id="repairCostChart" style="height: 300px;"></div>
</div>
</div>
</div>
</div>
<div class="layui-row layui-col-space15" style="margin-top: 15px;">
<div class="layui-col-md4">
<div class="layui-card">
<div class="layui-card-header">设备类型分布</div>
<div class="layui-card-body">
<div id="equipmentTypeChart" style="height: 250px;"></div>
</div>
</div>
</div>
<div class="layui-col-md4">
<div class="layui-card">
<div class="layui-card-header">巡检合格率统计</div>
<div class="layui-card-body">
<div id="inspectionRateChart" style="height: 250px;"></div>
</div>
</div>
</div>
<div class="layui-col-md4">
<div class="layui-card">
<div class="layui-card-header">异常报警级别分布</div>
<div class="layui-card-body">
<div id="alarmLevelChart" style="height: 250px;"></div>
</div>
</div>
</div>
<div class="homepage-bottom">
<div class="lineChart2" id="lineChart2"></div>
<div class="pieChart" id="pieChart"></div>
<div class="barChart" id="barChart"></div>
</div>
</div>
@ -83,8 +111,8 @@
</div>
</div>
</div>
</div>
<script src="assets/crpm/js/echarts/echarts.min.js"></script>
</div>
<script src="assets/crpm/js/echarts/echarts.min.js"></script>
<script src="assets/crpm/js/layui/layui.js"></script>
<script>
layui.use(['element', 'layer', 'util'], function () {
@ -116,157 +144,144 @@
});
});
//折线图
var lineChart = echarts.init(document.getElementById('lineChart1'));
var optionLine = {
// 设备故障类型统计 - 柱状图
var repairCostChart = echarts.init(document.getElementById('repairCostChart'));
var repairCostOption = {
animation: false,
title: {
//text: '销售时间统计',//
left: 'left', // Center align the title horizontally
tooltip: {
trigger: 'axis',
formatter: '{b}: {c}次'
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['2024-1', '2024-2', '2024-3', '2024-4', '2024-5', '2024-6', '2024-7']
data: ['液压系统漏油', '风机异响', '排气温度过高', '加热元件故障', '皮带打滑', '电机过载', '真空度不足', '切割精度下降', '振动值超标', '控制系统故障'],
axisLabel: {
rotate: 45
}
},
yAxis: {
type: 'value'
},
tooltip: {
trigger: 'axis' // 设置触发类型为坐标轴触发
type: 'value',
name: '故障次数'
},
series: [{
data: [820, 733, 901, 600, 1290, 500, 1320],
type: 'line',
smooth: true,
areaStyle: {}
name: '故障次数',
type: 'bar',
data: [2, 2, 2, 2, 2, 2, 2, 2, 2, 2],
itemStyle: {
color: '#1890ff'
}
}]
};
lineChart.setOption(optionLine);
repairCostChart.setOption(repairCostOption);
var currentIndex = -1;
var interval = 1000; // 切换间隔时间，单位是毫秒
var timer; // 定时器变量
// 自动触发选中状态并每隔1秒自动向下一个触发
function startAutoPlay() {
timer = setInterval(function() {
var dataLen = optionLine.series[0].data.length;
// 取消之前高亮的图形
lineChart.dispatchAction({
type: 'downplay',
seriesIndex: 0,
dataIndex: currentIndex
});
currentIndex = (currentIndex + 1) % dataLen;
// 高亮当前图形
lineChart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: currentIndex
});
// 显示 tooltip
lineChart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: currentIndex
});
}, interval);
}
// 开始自动播放
startAutoPlay();
// 鼠标悬停在图表上时暂停自动播放
lineChart.on('mouseover', function() {
clearInterval(timer);
});
// 鼠标离开图表区域时恢复自动播放
lineChart.on('mouseout', function() {
startAutoPlay();
});
//折线图2
var lineChart2 = echarts.init(document.getElementById('lineChart2'));
var optionLine = {
// 设备类型分布 - 饼图
var equipmentTypeChart = echarts.init(document.getElementById('equipmentTypeChart'));
var equipmentTypeOption = {
animation: false,
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
smooth: true
}
]
};
lineChart2.setOption(optionLine);
// 饼状图
var pieChart = echarts.init(document.getElementById('pieChart'));
var optionPie = {
animation: false,
title: {
//text: '订单占比系统',//
left: 'left'
},
tooltip: {
trigger: 'item'
trigger: 'item',
formatter: '{a} <br/>{b}: {c}台 ({d}%)'
},
legend: {
orient: 'vertical',
left: 'right'
left: 'left'
},
series: [{
//name: '嘻嘻',//
name: '设备类型',
type: 'pie',
radius: ['60%', '70%'],
radius: '60%',
data: [
{value: 150, name: 'data1'},
{value: 274, name: 'data2'},
{value: 310, name: 'data3'},
{value: 335, name: 'data4'},
{value: 400, name: 'data5'}
]
{value: 4, name: '注塑机'},
{value: 4, name: '冷却塔'},
{value: 4, name: '压缩机'},
{value: 4, name: '烘干机'},
{value: 4, name: '传送带'},
{value: 4, name: '搅拌机'},
{value: 4, name: '真空泵'},
{value: 4, name: '切割机'},
{value: 4, name: '风机'},
{value: 4, name: '包装机'}
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
};
pieChart.setOption(optionPie);
equipmentTypeChart.setOption(equipmentTypeOption);
//柱状图
var barChart = echarts.init(document.getElementById('barChart'));
var optionBar = {
// 巡检合格率统计 - 柱状图
var inspectionRateChart = echarts.init(document.getElementById('inspectionRateChart'));
var inspectionRateOption = {
animation: false,
title: {
//xt: '收支情况'//
},
tooltip: {},
legend: {
data: ['data1', 'data2'] ,
left: 'right'
tooltip: {
trigger: 'axis',
formatter: '{b}: {c}%'
},
xAxis: {
data: ['一月', '二月', '三月', '四月', '五月','六月','七月','八月','九月','十月','十一月','十二月',]
type: 'category',
data: ['8月1日', '8月2日', '8月3日']
},
yAxis: {
type: 'value',
name: '合格率(%)',
max: 100
},
yAxis: {},
series: [{
name: 'data1',
name: '合格率',
type: 'bar',
data: [5, 20, 36, 10, 10,15,16,20,12,13,35,12] // 第一条柱状图的数据
}, {
name: 'data2',
type: 'bar',
data: [15, 10, 25, 8, 15,8,30,12,11,18,25,12] // 第二条柱状图的数据
data: [100, 70, 70],
itemStyle: {
color: function(params) {
return params.value >= 90 ? '#52c41a' : params.value >= 70 ? '#faad14' : '#ff4d4f';
}
}
}]
};
barChart.setOption(optionBar);
inspectionRateChart.setOption(inspectionRateOption);
// 异常报警级别分布 - 环形饼图
var alarmLevelChart = echarts.init(document.getElementById('alarmLevelChart'));
var alarmLevelOption = {
animation: false,
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c}次 ({d}%)'
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [{
name: '报警级别',
type: 'pie',
radius: ['40%', '70%'],
data: [
{value: 8, name: '警告', itemStyle: {color: '#faad14'}},
{value: 8, name: '一般', itemStyle: {color: '#1890ff'}},
{value: 6, name: '严重', itemStyle: {color: '#ff4d4f'}}
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
};
alarmLevelChart.setOption(alarmLevelOption);
// 响应式处理
window.addEventListener('resize', function() {
repairCostChart.resize();
equipmentTypeChart.resize();
inspectionRateChart.resize();
alarmLevelChart.resize();
});
</script>
</body>
</html>

220
xtbgxt/src/main/resources/static/route/pages/index.html
View File

@ -84,12 +84,33 @@
欢迎使用协同办公系统
</blockquote>
<div class='homepage' id="homepage">
<div class='homepage-top' >
<div class='pieChart' id="pieChart"></div>
<div class='lineChart' id="lineChart"></div>
<div class="layui-row layui-col-space15">
<div class="layui-col-md6">
<div class="layui-card">
<div class="layui-card-header">任务状态分布</div>
<div class="layui-card-body">
<div id="taskStatusChart" style="height: 300px;"></div>
</div>
</div>
</div>
<div class="layui-col-md6">
<div class="layui-card">
<div class="layui-card-header">月度活动趋势</div>
<div class="layui-card-body">
<div id="monthlyTrendChart" style="height: 300px;"></div>
</div>
</div>
</div>
</div>
<div class="layui-row layui-col-space15" style="margin-top: 15px;">
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">部门人员分布</div>
<div class="layui-card-body">
<div id="departmentChart" style="height: 350px;"></div>
</div>
</div>
</div>
<div class='homepage-bot' >
<div id="barChart" class='barChart'></div>
</div>
</div>
<div class="layui-card layui-panel page-iframe-container">
@ -97,7 +118,7 @@
</div>
</div>
</div>
<!-- <div class="layui-footer"></div>-->
<!-- <div class="layui-footer"></div>-->
</div>
</div>
<script src="assets/crpm/js/echarts/echarts.min.js"></script>
@ -128,135 +149,104 @@
pageIframe.show();
homepage.style.display = 'none';
});
});
//折线图
var lineChart = echarts.init(document.getElementById('lineChart'));
var optionLine = {
animation: false,
title: {
//text: '销售时间统计',//
left: 'left', // Center align the title horizontally
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['2024-1', '2024-2', '2024-3', '2024-4', '2024-5', '2024-6', '2024-7']
},
yAxis: {
type: 'value'
},
// 任务状态分布饼图
var taskStatusChart = echarts.init(document.getElementById('taskStatusChart'));
var taskStatusOption = {
tooltip: {
trigger: 'axis' // 设置触发类型为坐标轴触发
},
series: [{
data: [820, 733, 901, 600, 1290, 500, 1320],
type: 'line',
smooth: true,
areaStyle: {}
}]
};
lineChart.setOption(optionLine);
var currentIndex = -1;
var interval = 1000; // 切换间隔时间，单位是毫秒
var timer; // 定时器变量
// 自动触发选中状态并每隔1秒自动向下一个触发
function startAutoPlay() {
timer = setInterval(function() {
var dataLen = optionLine.series[0].data.length;
// 取消之前高亮的图形
lineChart.dispatchAction({
type: 'downplay',
seriesIndex: 0,
dataIndex: currentIndex
});
currentIndex = (currentIndex + 1) % dataLen;
// 高亮当前图形
lineChart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: currentIndex
});
// 显示 tooltip
lineChart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: currentIndex
});
}, interval);
}
// 开始自动播放
startAutoPlay();
// 鼠标悬停在图表上时暂停自动播放
lineChart.on('mouseover', function() {
clearInterval(timer);
});
// 鼠标离开图表区域时恢复自动播放
lineChart.on('mouseout', function() {
startAutoPlay();
});
// 饼状图
var pieChart = echarts.init(document.getElementById('pieChart'));
var optionPie = {
animation: false,
title: {
//text: '订单占比系统',//
left: 'left'
},
tooltip: {
trigger: 'item'
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 'right'
},
series: [{
name: '嘻嘻',
name: '任务状态',
type: 'pie',
radius: ['60%', '70%'],
radius: ['40%', '70%'],
data: [
{value: 150, name: 'data1'},
{value: 274, name: 'data2'},
{value: 310, name: 'data3'},
{value: 335, name: 'data4'},
{value: 400, name: 'data5'}
]
{value: 5, name: '已完成'},
{value: 3, name: '进行中'},
{value: 2, name: '未开始'}
],
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
};
pieChart.setOption(optionPie);
//柱状图
var barChart = echarts.init(document.getElementById('barChart'));
var optionBar = {
animation: false,
title: {
// text: '收支情况'//
taskStatusChart.setOption(taskStatusOption);
// 月度活动趋势折线图
var monthlyTrendChart = echarts.init(document.getElementById('monthlyTrendChart'));
var monthlyTrendOption = {
tooltip: {
trigger: 'axis'
},
tooltip: {},
legend: {
//data: ['收入', '支出'] ,//
data: ['data1', 'data2'] ,
left: 'right'
data: ['任务数量', '日程安排']
},
xAxis: {
data: ['一月', '二月', '三月', '四月', '五月','六月','七月','八月','九月','十月','十一月','十二月',]
type: 'category',
boundaryGap: false,
data: ['1月', '2月']
},
yAxis: {
type: 'value'
},
yAxis: {},
series: [{
name: 'data1',
type: 'bar',
data: [5, 20, 36, 10, 10,15,16,20,12,13,35,12] // 第一条柱状图的数据
name: '任务数量',
type: 'line',
data: [5, 5],
smooth: true,
areaStyle: {}
}, {
name: 'data2',
type: 'bar',
data: [15, 10, 25, 8, 15,8,30,12,11,18,25,12] // 第二条柱状图的数据
name: '日程安排',
type: 'line',
data: [5, 5],
smooth: true,
areaStyle: {}
}]
};
barChart.setOption(optionBar);
monthlyTrendChart.setOption(monthlyTrendOption);
// 部门人员分布柱状图
var departmentChart = echarts.init(document.getElementById('departmentChart'));
var departmentOption = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['人员数量']
},
xAxis: {
type: 'category',
data: ['生产部', '质检部', '采购部', '物流部', '技术部', '人事部', '财务部', '安环部', 'IT部']
},
yAxis: {
type: 'value'
},
series: [{
name: '人员数量',
type: 'bar',
data: [2, 1, 1, 1, 1, 1, 1, 1, 1],
itemStyle: {
color: function(params) {
var colorList = ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83', '#ca8622', '#bda29a','#6e7074'];
return colorList[params.dataIndex];
}
}
}]
};
departmentChart.setOption(departmentOption);
});
</script>

390
zjkglxt/src/main/resources/static/route/pages/index.html
View File

@ -11,7 +11,7 @@
<link rel="stylesheet" href="assets/crpm/index/index.css" />
</head>
<body>
<div class="system">
<div class="system">
<div class="left">
<div class="head">
<div class='photo'>头像</div>
@ -84,20 +84,57 @@
<div class="bottom">
<div class="content">
<div class='homepage' id="homepage">
<div class='homepage-top' >
<div class='pieChartOne' id="pieChartOne"></div>
<div class='pieChartTwo' id="pieChartTwo"></div>
<div class='pieChartThree' id="pieChartThree"></div>
<div class='pieChartFour' id="pieChartFour"></div>
<div class="layui-row layui-col-space15">
<div class="layui-col-md3">
<div class="layui-card">
<div class="layui-card-header">专家性别分布</div>
<div class="layui-card-body">
<div id="genderChart" style="width: 100%; height: 250px;"></div>
</div>
</div>
</div>
<div class="layui-col-md3">
<div class="layui-card">
<div class="layui-card-header">专业领域分布</div>
<div class="layui-card-body">
<div id="fieldChart" style="width: 100%; height: 250px;"></div>
</div>
</div>
</div>
<div class="layui-col-md3">
<div class="layui-card">
<div class="layui-card-header">职称分布</div>
<div class="layui-card-body">
<div id="titleChart" style="width: 100%; height: 250px;"></div>
</div>
</div>
</div>
<div class="layui-col-md3">
<div class="layui-card">
<div class="layui-card-header">专家评分分布</div>
<div class="layui-card-body">
<div id="scoreChart" style="width: 100%; height: 250px;"></div>
</div>
</div>
</div>
</div>
<div class="layui-row layui-col-space15" style="margin-top: 15px;">
<div class="layui-col-md6">
<div class="layui-card">
<div class="layui-card-header">专家录入趋势</div>
<div class="layui-card-body">
<div id="trendChart" style="width: 100%; height: 300px;"></div>
</div>
</div>
</div>
<div class="layui-col-md6">
<div class="layui-card">
<div class="layui-card-header">专家活跃度统计</div>
<div class="layui-card-body">
<div id="activityChart" style="width: 100%; height: 300px;"></div>
</div>
</div>
<div class='homepage-center' >
<div class='lineChart' id="lineChart"></div>
<div id="pieChart" class='pieChart' ></div>
</div>
<div class='homepage-bot' >
<div class='barChartOne' id="barChartOne"></div>
<div class='barChartTwo' id="barChartTwo"></div>
</div>
</div>
<div class="layui-card layui-panel page-iframe-container">
@ -107,7 +144,7 @@
</div>
</div>
</div>
</div>
<script src="assets/crpm/js/layui/layui.js"></script>
<script src="assets/crpm/js/echarts/echarts.min.js"></script>
@ -138,297 +175,122 @@
homepage.style.display = 'none';
});
});
// 饼状图1
var pieChartOne = echarts.init(document.getElementById('pieChartOne'));
var optionPieOne = {
animation: false,
tooltip: {
trigger: 'item'
},
// 专家性别分布饼图
var genderChart = echarts.init(document.getElementById('genderChart'));
var genderOption = {
tooltip: { trigger: 'item' },
series: [{
//name: '嘻嘻',//
type: 'pie',
radius: ['0%', '70%'],
radius: '60%',
data: [
{value: 150, name: 'data1'},
{value: 274, name: 'data2'},
{value: 310, name: 'data3'},
{value: 335, name: 'data4'},
{value: 400, name: 'data5'}
{ value: 17, name: '男' },
{ value: 14, name: '女' }
]
}]
};
pieChartOne.setOption(optionPieOne);
// 饼状图2
var pieChartTwo = echarts.init(document.getElementById('pieChartTwo'));
var optionPieTwo = {
animation: false,
tooltip: {
trigger: 'item'
},
genderChart.setOption(genderOption);
// 专业领域分布饼图
var fieldChart = echarts.init(document.getElementById('fieldChart'));
var fieldOption = {
tooltip: { trigger: 'item' },
series: [{
//name: '嘻嘻',//
type: 'pie',
radius: ['0%', '70%'],
radius: '60%',
data: [
{value: 200, name: 'data1'},
{value: 300, name: 'data2'},
{value: 500, name: 'data3'},
{value: 335, name: 'data4'},
{value: 400, name: 'data5'}
{ value: 10, name: '医学' },
{ value: 5, name: '建筑' },
{ value: 4, name: '教育' },
{ value: 4, name: '财务' },
{ value: 8, name: 'IT技术' }
]
}]
};
pieChartTwo.setOption(optionPieTwo);
// 饼状图3
var pieChartThree = echarts.init(document.getElementById('pieChartThree'));
var optionPieThree = {
animation: false,
tooltip: {
trigger: 'item'
},
fieldChart.setOption(fieldOption);
// 职称分布饼图
var titleChart = echarts.init(document.getElementById('titleChart'));
var titleOption = {
tooltip: { trigger: 'item' },
series: [{
//name: '嘻嘻',//
type: 'pie',
radius: ['0%', '70%'],
radius: '60%',
data: [
{value: 100, name: 'data1'},
{value: 274, name: 'data2'},
{value: 310, name: 'data3'},
{value: 600, name: 'data4'},
{value: 100, name: 'data5'}
{ value: 15, name: '高级' },
{ value: 8, name: '中级' },
{ value: 8, name: '初级' }
]
}]
};
pieChartThree.setOption(optionPieThree);
// 饼状图4
var pieChartFour = echarts.init(document.getElementById('pieChartFour'));
var optionPieFour = {
animation: false,
tooltip: {
trigger: 'item'
},
titleChart.setOption(titleOption);
series: [{
//name: '嘻嘻',//
type: 'pie',
radius: ['0%', '70%'],
data: [
{value: 150, name: 'data1'},
{value: 274, name: 'data2'},
{value: 500, name: 'data3'},
{value: 335, name: 'data4'},
{value: 400, name: 'data5'}
]
}]
};
pieChartFour.setOption(optionPieFour);
//折线图
var lineChart = echarts.init(document.getElementById('lineChart'));
var optionLine = {
animation: false,
title: {
//text: '业务核心数据',//
left: 'left', // Center align the title horizontally
},
// 专家评分分布柱状图
var scoreChart = echarts.init(document.getElementById('scoreChart'));
var scoreOption = {
tooltip: { trigger: 'axis' },
xAxis: {
type: 'category',
boundaryGap: false,
data: ['2024-1', '2024-2', '2024-3', '2024-4', '2024-5', '2024-6', '2024-7']
},
yAxis: {
type: 'value'
},
tooltip: {
trigger: 'axis' // 设置触发类型为坐标轴触发
data: ['88-89分', '90-94分', '95-96分']
},
yAxis: { type: 'value' },
series: [{
data: [820, 733, 901, 600, 1290, 500, 1320],
data: [3, 5, 2],
type: 'bar',
itemStyle: { color: '#5470c6' }
}]
};
scoreChart.setOption(scoreOption);
// 专家录入趋势曲线图
var trendChart = echarts.init(document.getElementById('trendChart'));
var trendOption = {
tooltip: { trigger: 'axis' },
xAxis: {
type: 'category',
data: ['1月1-5日', '1月10-15日', '1月20-25日', '2月1-5日', '2月10-15日', '2月20-25日']
},
yAxis: { type: 'value' },
series: [{
name: '新增专家',
data: [3, 3, 2, 3, 2, 2],
type: 'line',
smooth: true,
areaStyle: {}
areaStyle: { opacity: 0.3 }
}]
};
lineChart.setOption(optionLine);
var currentIndex = -1;
var interval = 1000; // 切换间隔时间，单位是毫秒
var timer; // 定时器变量
// 自动触发选中状态并每隔1秒自动向下一个触发
function startAutoPlay() {
timer = setInterval(function() {
var dataLen = optionLine.series[0].data.length;
// 取消之前高亮的图形
lineChart.dispatchAction({
type: 'downplay',
seriesIndex: 0,
dataIndex: currentIndex
});
currentIndex = (currentIndex + 1) % dataLen;
// 高亮当前图形
lineChart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: currentIndex
});
// 显示 tooltip
lineChart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: currentIndex
});
}, interval);
}
// 开始自动播放
startAutoPlay();
// 鼠标悬停在图表上时暂停自动播放
lineChart.on('mouseover', function() {
clearInterval(timer);
});
// 鼠标离开图表区域时恢复自动播放
lineChart.on('mouseout', function() {
startAutoPlay();
});
// 饼状图
var pieChart = echarts.init(document.getElementById('pieChart'));
var optionPie = {
animation: false,
title: {
//text: '订单占比系统',//
left: 'left'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'right'
},
series: [{
//name: '嘻嘻',//
type: 'pie',
radius: ['60%', '70%'],
data: [
{value: 150, name: 'data1'},
{value: 274, name: 'data2'},
{value: 310, name: 'data3'},
{value: 335, name: 'data4'},
{value: 400, name: 'data5'}
]
}]
};
pieChart.setOption(optionPie);
//柱状图1
var barChartOne = echarts.init(document.getElementById('barChartOne'));
var optionBarOne = {
animation: false,
title: {
//text: '业务核心数据'//
},
tooltip: {},
legend: {
data: ['data1', 'data2'] ,
left: 'right'
},
trendChart.setOption(trendOption);
// 专家活跃度统计柱状图
var activityChart = echarts.init(document.getElementById('activityChart'));
var activityOption = {
tooltip: { trigger: 'axis' },
legend: { data: ['参与项目数', '发表文章数'] },
xAxis: {
data: ['一月', '二月', '三月', '四月', '五月','六月','七月','八月','九月','十月','十一月','十二月',]
},
yAxis: {},
series: [{
name: 'data1',
type: 'bar',
data: [5, 20, 36, 10, 10,15,16,20,12,13,35,12] // 第一条柱状图的数据
}, {
name: 'data2',
type: 'bar',
data: [15, 10, 25, 8, 15,8,30,12,11,18,25,12] // 第二条柱状图的数据
}]
};
barChartOne.setOption(optionBarOne);
//柱状图2
var barChartTwo = echarts.init(document.getElementById('barChartTwo'));
var optionBarTwo = {
animation: false,
title: {
//text: '业务核心数据'//
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['Profit', 'Expenses', 'Income']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'value'
}
],
yAxis: [
{
type: 'category',
axisTick: {
show: false
data: ['人工智能', '大数据', '物联网', '区块链', '云计算']
},
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
}
],
yAxis: { type: 'value' },
series: [
{
name: 'Profit',
name: '参与项目数',
type: 'bar',
label: {
show: true,
position: 'inside'
},
emphasis: {
focus: 'series'
},
data: [200, 170, 240, 244, 200, 220, 210]
data: [15, 12, 18, 10, 14]
},
{
name: 'Income',
name: '发表文章数',
type: 'bar',
stack: 'Total',
label: {
show: true
},
emphasis: {
focus: 'series'
},
data: [320, 302, 341, 374, 390, 450, 420]
},
{
name: 'Expenses',
type: 'bar',
stack: 'Total',
label: {
show: true,
position: 'left'
},
emphasis: {
focus: 'series'
},
data: [-120, -132, -101, -134, -190, -230, -210]
data: [30, 25, 22, 18, 27]
}
]
};
barChartTwo.setOption(optionBarTwo);
activityChart.setOption(activityOption);
// 窗口大小改变时重新调整图表
window.addEventListener('resize', function() {
genderChart.resize();
fieldChart.resize();
titleChart.resize();
scoreChart.resize();
trendChart.resize();
activityChart.resize();
});
</script>
</body>
</html>

394
zxcpxt/src/main/resources/static/route/pages/index.html
View File

@ -69,17 +69,43 @@
<blockquote class="layui-elem-quote-index layui-text">
欢迎使用在线测评系统
</blockquote>
<!--数据统计代码写到这里 , 只允许2行 -->
<div class='homepage' id="homepage">
<div class='homepage-top' >
<div id="barChartOne" class='barChartOne' ></div>
<div class='pieChart' id="pieChart"></div>
<div id="barChartTwo" class='barChartTwo' ></div>
<div class="layui-row layui-col-space15">
<div class="layui-col-md6">
<div class="layui-card">
<div class="layui-card-header">考试参与情况统计</div>
<div class="layui-card-body">
<div id="examParticipationChart" style="width: 100%; height: 300px;"></div>
</div>
</div>
</div>
<div class="layui-col-md6">
<div class="layui-card">
<div class="layui-card-header">成绩分布统计</div>
<div class="layui-card-body">
<div id="scoreDistributionChart" style="width: 100%; height: 300px;"></div>
</div>
</div>
</div>
</div>
<div class="layui-row layui-col-space15" style="margin-top: 15px;">
<div class="layui-col-md6">
<div class="layui-card">
<div class="layui-card-header">题目难度分布</div>
<div class="layui-card-body">
<div id="difficultyChart" style="width: 100%; height: 300px;"></div>
</div>
</div>
</div>
<div class="layui-col-md6">
<div class="layui-card">
<div class="layui-card-header">月度考试趋势</div>
<div class="layui-card-body">
<div id="monthlyTrendChart" style="width: 100%; height: 300px;"></div>
</div>
</div>
</div>
<div class='homepage-bot' >
<div class='lineChart' id="lineChart"></div>
<div id="barChartThree" class='barChartThree' ></div>
<div id="funnelChart" class='funnelChart' ></div>
</div>
</div>
<div class="layui-card layui-panel page-iframe-container">
@ -118,298 +144,94 @@
pageIframe.show();
homepage.style.display = 'none';
});
});
//柱状图1
var barChartOne = echarts.init(document.getElementById('barChartOne'));
var optionBarOne = {
animation: false,
title: {
//text: '业务核心数据'//
},
tooltip: {},
legend: {
data: ['data1', 'data2'] ,
left: 'right'
},
xAxis: {
data: ['一月', '二月', '三月', '四月', '五月','六月','七月','八月','九月','十月','十一月','十二月',]
},
yAxis: {},
// 初始化数据统计图表
var initDataCharts = function() {
// 考试参与情况饼图
var examChart = echarts.init(document.getElementById('examParticipationChart'));
var examOption = {
tooltip: { trigger: 'item' },
legend: { orient: 'vertical', left: 'left' },
series: [{
name: 'data1',
type: 'bar',
data: [5, 20, 36, 10, 10,15,16,20,12,13,35,12] // 第一条柱状图的数据
}, {
name: 'data2',
type: 'bar',
data: [15, 10, 25, 8, 15,8,30,12,11,18,25,12] // 第二条柱状图的数据
}]
};
barChartOne.setOption(optionBarOne);
// 饼状图
var pieChart = echarts.init(document.getElementById('pieChart'));
var optionPie = {
animation: false,
title: {
//text: '业务核心数据',//
left: 'left'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'right'
},
series: [{
//name: '嘻嘻',//
name: '参与情况',
type: 'pie',
radius: ['0%', '70%'],
radius: '60%',
data: [
{value: 150, name: 'data1'},
{value: 274, name: 'data2'},
{value: 310, name: 'data3'},
{value: 335, name: 'data4'},
{value: 400, name: 'data5'}
{ value: 86, name: '已参与' },
{ value: 24, name: '未参与' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
};
examChart.setOption(examOption);
// 成绩分布柱状图
var scoreChart = echarts.init(document.getElementById('scoreDistributionChart'));
var scoreOption = {
tooltip: { trigger: 'axis' },
xAxis: {
type: 'category',
data: ['90-100分', '80-89分', '70-79分', '60-69分', '60分以下']
},
yAxis: { type: 'value' },
series: [{
name: '人数',
data: [12, 28, 35, 18, 7],
type: 'bar',
itemStyle: { color: '#5470c6' }
}]
};
scoreChart.setOption(scoreOption);
// 题目难度分布环形图
var difficultyChart = echarts.init(document.getElementById('difficultyChart'));
var difficultyOption = {
tooltip: { trigger: 'item' },
legend: { orient: 'vertical', left: 'left' },
series: [{
name: '题目难度',
type: 'pie',
radius: ['40%', '70%'],
data: [
{ value: 45, name: '简单' },
{ value: 128, name: '中等' },
{ value: 67, name: '困难' }
]
}]
};
pieChart.setOption(optionPie);
//柱状图2
var barChartTwo = echarts.init(document.getElementById('barChartTwo'));
var optionBarTwo = {
animation: false,
title: {
//text: '业务核心数据'//
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['Profit', 'Expenses', 'Income']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'value'
}
],
yAxis: [
{
type: 'category',
axisTick: {
show: false
},
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
}
],
series: [
{
name: 'Profit',
type: 'bar',
label: {
show: true,
position: 'inside'
},
emphasis: {
focus: 'series'
},
data: [200, 170, 240, 244, 200, 220, 210]
},
{
name: 'Income',
type: 'bar',
stack: 'Total',
label: {
show: true
},
emphasis: {
focus: 'series'
},
data: [320, 302, 341, 374, 390, 450, 420]
},
{
name: 'Expenses',
type: 'bar',
stack: 'Total',
label: {
show: true,
position: 'left'
},
emphasis: {
focus: 'series'
},
data: [-120, -132, -101, -134, -190, -230, -210]
}
]
};
barChartTwo.setOption(optionBarTwo);
//折线图
var lineChart = echarts.init(document.getElementById('lineChart'));
var optionLine = {
animation: false,
title: {
//text: '业务核心数据',//
left: 'left', // Center align the title horizontally
},
difficultyChart.setOption(difficultyOption);
// 月度考试趋势曲线图
var trendChart = echarts.init(document.getElementById('monthlyTrendChart'));
var trendOption = {
tooltip: { trigger: 'axis' },
xAxis: {
type: 'category',
boundaryGap: false,
data: ['2024-1', '2024-2', '2024-3', '2024-4', '2024-5', '2024-6', '2024-7']
},
yAxis: {
type: 'value'
},
tooltip: {
trigger: 'axis' // 设置触发类型为坐标轴触发
data: ['1月', '2月', '3月', '4月', '5月', '6月']
},
yAxis: { type: 'value', name: '考试次数' },
series: [{
data: [820, 733, 901, 600, 1290, 500, 1320],
name: '考试场次',
data: [8, 12, 15, 18, 22, 25],
type: 'line',
smooth: true,
areaStyle: {}
itemStyle: { color: '#91cc75' },
areaStyle: { opacity: 0.3 }
}]
};
lineChart.setOption(optionLine);
var currentIndex = -1;
var interval = 1000; // 切换间隔时间，单位是毫秒
var timer; // 定时器变量
// 自动触发选中状态并每隔1秒自动向下一个触发
function startAutoPlay() {
timer = setInterval(function() {
var dataLen = optionLine.series[0].data.length;
// 取消之前高亮的图形
lineChart.dispatchAction({
type: 'downplay',
seriesIndex: 0,
dataIndex: currentIndex
});
currentIndex = (currentIndex + 1) % dataLen;
// 高亮当前图形
lineChart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: currentIndex
});
// 显示 tooltip
lineChart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: currentIndex
});
}, interval);
}
// 开始自动播放
startAutoPlay();
// 鼠标悬停在图表上时暂停自动播放
lineChart.on('mouseover', function() {
clearInterval(timer);
});
// 鼠标离开图表区域时恢复自动播放
lineChart.on('mouseout', function() {
startAutoPlay();
});
//柱状图3
var barChartThree = echarts.init(document.getElementById('barChartThree'));
var optionBarThree = {
animation: false,
title: {
//text: '业务核心数据'//
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
}
]
trendChart.setOption(trendOption);
};
barChartThree.setOption(optionBarThree);
//漏斗图
var funnelChart = echarts.init(document.getElementById('funnelChart'));
var optionFunnel = {
animation: false,
title: {
text: ''
},
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b} : {c}%'
},
toolbox: {
feature: {
dataView: { readOnly: false },
restore: {},
saveAsImage: {}
}
},
legend: {
data: ['Show', 'Click', 'Visit', 'Inquiry', 'Order']
},
series: [
{
name: 'Funnel',
type: 'funnel',
left: '10%',
top: 60,
bottom: 60,
width: '80%',
min: 0,
max: 100,
minSize: '0%',
maxSize: '100%',
sort: 'descending',
gap: 2,
label: {
show: true,
position: 'inside'
},
labelLine: {
length: 10,
lineStyle: {
width: 1,
type: 'solid'
}
},
itemStyle: {
borderColor: '#fff',
borderWidth: 1
},
emphasis: {
label: {
fontSize: 20
}
},
data: [
{ value: 60, name: 'Visit' },
{ value: 40, name: 'Inquiry' },
{ value: 20, name: 'Order' },
{ value: 80, name: 'Click' },
{ value: 100, name: 'Show' }
]
}
]
};
funnelChart.setOption(optionFunnel);
// 初始化图表
initDataCharts();
});
</script>
</body>
</html>

255
zxyxykhxt/src/main/resources/static/route/pages/index.html
View File

@ -69,13 +69,43 @@
<blockquote class="layui-elem-quote layui-text">
欢迎使用在线研修与考核系统
</blockquote>
<!--数据统计代码写到这里 , 只允许2行 -->
<div class='homepage' id="homepage">
<div class='homepage-top' >
<div class='pieChart' id="pieChart"></div>
<div class='lineChart' id="lineChart"></div>
<div class="layui-row layui-col-space15">
<div class="layui-col-md6">
<div class="layui-card">
<div class="layui-card-header">课程完成率统计</div>
<div class="layui-card-body">
<div id="courseCompletionChart" style="width: 100%; height: 300px;"></div>
</div>
</div>
</div>
<div class="layui-col-md6">
<div class="layui-card">
<div class="layui-card-header">成绩分布统计</div>
<div class="layui-card-body">
<div id="gradeDistributionChart" style="width: 100%; height: 300px;"></div>
</div>
</div>
</div>
</div>
<div class="layui-row layui-col-space15" style="margin-top: 15px;">
<div class="layui-col-md6">
<div class="layui-card">
<div class="layui-card-header">学习时长趋势</div>
<div class="layui-card-body">
<div id="studyTimeChart" style="width: 100%; height: 300px;"></div>
</div>
</div>
</div>
<div class="layui-col-md6">
<div class="layui-card">
<div class="layui-card-header">课程反馈满意度</div>
<div class="layui-card-body">
<div id="satisfactionChart" style="width: 100%; height: 300px;"></div>
</div>
</div>
</div>
<div class='homepage-bot' >
<div id="barChart" class='barChart'></div>
</div>
</div>
<div class="layui-card layui-panel page-iframe-container">
@ -90,6 +120,7 @@
<script src="assets/crpm/js/layui/layui.js"></script>
<script>
layui.use(['element', 'layer', 'util'], function () {
var element = layui.element;
var layer = layui.layer;
@ -105,7 +136,92 @@
})
}
// 初始化图表
var initCharts = function() {
// 课程完成率饼图
var courseChart = echarts.init(document.getElementById('courseCompletionChart'));
var courseOption = {
tooltip: { trigger: 'item' },
legend: { orient: 'vertical', left: 'left' },
series: [{
name: '完成情况',
type: 'pie',
radius: '50%',
data: [
{ value: 197, name: '已完成' },
{ value: 350, name: '未完成' }
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
};
courseChart.setOption(courseOption);
// 成绩分布柱状图
var gradeChart = echarts.init(document.getElementById('gradeDistributionChart'));
var gradeOption = {
tooltip: { trigger: 'axis' },
xAxis: {
type: 'category',
data: ['90-100分', '80-89分', '70-79分', '60-69分', '60分以下']
},
yAxis: { type: 'value' },
series: [{
name: '人数',
data: [45, 78, 65, 32, 18],
type: 'bar',
itemStyle: { color: '#5470c6' }
}]
};
gradeChart.setOption(gradeOption);
// 学习时长趋势曲线图
var timeChart = echarts.init(document.getElementById('studyTimeChart'));
var timeOption = {
tooltip: { trigger: 'axis' },
xAxis: {
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月']
},
yAxis: { type: 'value', name: '小时' },
series: [{
name: '平均学习时长',
data: [120, 145, 180, 210, 195, 230],
type: 'line',
smooth: true,
itemStyle: { color: '#91cc75' }
}]
};
timeChart.setOption(timeOption);
// 满意度饼图
var satisfactionChart = echarts.init(document.getElementById('satisfactionChart'));
var satisfactionOption = {
tooltip: { trigger: 'item' },
legend: { orient: 'vertical', left: 'left' },
series: [{
name: '满意度',
type: 'pie',
radius: ['40%', '70%'],
data: [
{ value: 85, name: '非常满意' },
{ value: 45, name: '满意' },
{ value: 12, name: '一般' },
{ value: 3, name: '不满意' }
]
}]
};
satisfactionChart.setOption(satisfactionOption);
};
init();
initCharts();
var homepage = document.getElementById('homepage');
$(document).on('click', '.menu-item', function() {
var url = this.dataset.url;
@ -115,135 +231,6 @@
homepage.style.display = 'none';
});
});
//折线图
var lineChart = echarts.init(document.getElementById('lineChart'));
var optionLine = {
animation: false,
title: {
//text: '销售时间统计',//
left: 'left', // Center align the title horizontally
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['2024-1', '2024-2', '2024-3', '2024-4', '2024-5', '2024-6', '2024-7']
},
yAxis: {
type: 'value'
},
tooltip: {
trigger: 'axis' // 设置触发类型为坐标轴触发
},
series: [{
data: [820, 733, 901, 600, 1290, 500, 1320],
type: 'line',
smooth: true,
areaStyle: {}
}]
};
lineChart.setOption(optionLine);
var currentIndex = -1;
var interval = 1000; // 切换间隔时间，单位是毫秒
var timer; // 定时器变量
// 自动触发选中状态并每隔1秒自动向下一个触发
function startAutoPlay() {
timer = setInterval(function() {
var dataLen = optionLine.series[0].data.length;
// 取消之前高亮的图形
lineChart.dispatchAction({
type: 'downplay',
seriesIndex: 0,
dataIndex: currentIndex
});
currentIndex = (currentIndex + 1) % dataLen;
// 高亮当前图形
lineChart.dispatchAction({
type: 'highlight',
seriesIndex: 0,
dataIndex: currentIndex
});
// 显示 tooltip
lineChart.dispatchAction({
type: 'showTip',
seriesIndex: 0,
dataIndex: currentIndex
});
}, interval);
}
// 开始自动播放
startAutoPlay();
// 鼠标悬停在图表上时暂停自动播放
lineChart.on('mouseover', function() {
clearInterval(timer);
});
// 鼠标离开图表区域时恢复自动播放
lineChart.on('mouseout', function() {
startAutoPlay();
});
// 饼状图
var pieChart = echarts.init(document.getElementById('pieChart'));
var optionPie = {
animation: false,
title: {
//text: '订单占比系统',//
left: 'left'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'right'
},
series: [{
name: '嘻嘻',
type: 'pie',
radius: ['60%', '70%'],
data: [
{value: 150, name: 'data1'},
{value: 274, name: 'data2'},
{value: 310, name: 'data3'},
{value: 335, name: 'data4'},
{value: 400, name: 'data5'}
]
}]
};
pieChart.setOption(optionPie);
//柱状图
var barChart = echarts.init(document.getElementById('barChart'));
var optionBar = {
animation: false,
title: {
// text: '收支情况'//
},
tooltip: {},
legend: {
//data: ['收入', '支出'] ,//
data: ['data1', 'data2'] ,
left: 'right'
},
xAxis: {
data: ['一月', '二月', '三月', '四月', '五月','六月','七月','八月','九月','十月','十一月','十二月',]
},
yAxis: {},
series: [{
name: 'data1',
type: 'bar',
data: [5, 20, 36, 10, 10,15,16,20,12,13,35,12] // 第一条柱状图的数据
}, {
name: 'data2',
type: 'bar',
data: [15, 10, 25, 8, 15,8,30,12,11,18,25,12] // 第二条柱状图的数据
}]
};
barChart.setOption(optionBar);
</script>
</body>