diff --git a/rwk-admin/src/main/resources/static/css/main.css b/rwk-admin/src/main/resources/static/css/main.css
index 3b6ef6b..9a906af 100644
--- a/rwk-admin/src/main/resources/static/css/main.css
+++ b/rwk-admin/src/main/resources/static/css/main.css
@@ -55,15 +55,17 @@ body, html {
color: #000000;
background-color: #F7F7F7;
padding: 5px 10px 5px 10px;
+ border: 1px solid #E2E2E2;
}
.cut:first-child{
- border-radius: 5px 0 0 5px;
+ border-radius: 8px 0 0 8px;
}
.cut:last-child{
- border-radius: 0 5px 5px 0;
+ border-radius: 0 8px 8px 0;
}
.cut.active{
color: #ffffff;
+ border: 2px solid #1a7bb9;
background-color: #1a7bb9;
}
.tabs-container{
diff --git a/rwk-admin/src/main/resources/templates/main.html b/rwk-admin/src/main/resources/templates/main.html
index c788e42..a20a81c 100644
--- a/rwk-admin/src/main/resources/templates/main.html
+++ b/rwk-admin/src/main/resources/templates/main.html
@@ -19,13 +19,13 @@
知联会职务
-
+
-
+
政治面貌情况
-
+
@@ -33,28 +33,28 @@
-
知联会干部在库数
-
5321
+
知联会干部在库数
+
5321
-
+
近期培训活动
-
+
@@ -149,114 +149,125 @@
// console.log(result);
// }
// });
- }
- var array1 = [
- {name:'数据1',value:235},
- {name:'数据2',value:274},
- {name:'数据3',value:310},
- {name:'数据4',value:335}
- ];
- var grid = {left: '10%', right: '6%', bottom: '3%', top:'6%'}
- //饼图1
- pieChartMethod('pieChart1',array1,"职务层次情况",'60%',"",grid,"",true);
- //饼图2
- pieChartMethod('pieChart2',array1,"饼图2",['50%', '80%'],"",grid,"",true);
- //阶梯图
- var data = [
- { value: 8, name: '副部级' },
- { value: 23, name: '正局级' },
- { value: 100, name: '副局级' },
- { value: 699, name: '正处级' },
- { value: 1640, name: '副处级' }
- ]
- funnelPlot('plotChart3',data);
- //柱状图
- var yAxis = {
- type: 'category',
- data: ['30岁以下', '31-40岁', '41-50岁', '51-60岁', '61岁以上'],
- axisLine: {
- show: false,
- },
- axisTick: {
- show: false,
- }
- };
- var series = [{
+ var array1 = [
+ {name:'正局级XX人',value:235}, {name:'副局级XX人',value:274},
+ {name:'正处级XX人',value:310}, {name:'正科级XX人',value:335}
+ ];
+ var grid = {left: '10%', right: '6%', bottom: '3%', top:'6%'}
+ //饼图1
+ pieChartMethod('pieChart1',array1,"职务层次情况",'80%',"",grid,"",true);
+ array1 = [
+ {name:'民革',value:20}, {name:'无党派',value:20},{name:'群众',value:20},
+ {name:'台盟',value:20}, {name:'致公党',value:20},{name:'九三学社',value:20},
+ {name:'农工党',value:20}, {name:'民进',value:20},{name:'民建',value:20}, {name:'民盟',value:20}
+ ];
+ //饼图2
+ pieChartMethod('pieChart2',array1,"政治面貌",['45%', '75%'],"",grid,"",true);
+ //阶梯图
+ var data = [
+ { value: 8, name: '副部级' }, { value: 23, name: '正局级' }, { value: 100, name: '副局级' },
+ { value: 699, name: '正处级' }, { value: 1640, name: '副处级' }
+ ]
+ funnelPlot('plotChart3',data);
+ //柱状图
+ var yAxis = {
+ type: 'category',
+ data: ['40岁以下', '40-50岁', '50-55岁', '55以上'],
+ axisLine: {show: false,},
+ axisTick: {show: false,}
+ };
+ var series = [{
name: '男',
type: 'bar',
- data: [1200, 900, 600, 300, 200],
+ data: [123, 76, 66, 21],
emphasis: {
focus: 'series'
+ },
+ label: {
+ show: true,
+ position: 'right'
}
}, {
name: '女',
type: 'bar',
- data: [1100, 950, 650, 350, 250],
+ data: [95, 91, 73, 29],
emphasis: {
focus: 'series'
+ }, label: {
+ show: true,
+ position: 'right'
}
- }
- ]
- //柱状图1
- var grid1 = {left: '15%', right: '6%', bottom: '12%', top:'12%'};
- barChartMethod("barChart1",{trigger: 'axis'},{data: ['男', '女'],left: '3%',},{type: 'value', name: '人数',
- axisLine: {show: false,}, axisTick: {show: false,},splitLine: {show: false}},yAxis,grid1,series);
- grid1.top = '3%';
- series = [{
- name: '数据',
- type: 'bar',
- data: [120, 200, 150, 80, 70, 110, 130,120],
- itemStyle: {
- normal: {
- color: function(params) {
- var colors = ['#34b3a0', '#ff6347'];
- return colors[params.dataIndex % 2];
+ }]
+ //柱状图1
+ var grid1 = {left: '15%', right: '6%', bottom: '1%', top:'13%'};
+ barChartMethod("barChart1",{trigger: 'axis'},{data: ['男', '女'],left: '3%',},{type: 'value',
+ axisLine: {show: false,},axisLabel: {show: false,}, axisTick: {show: false,},splitLine: {show: false}},yAxis,grid1,series);
+ grid1 = {left: '15%', right: '6%', bottom: '12%', top:'4%'};
+ series = [{
+ name: '数据',
+ type: 'bar',
+ data: [120, 200, 150, 80, 70, 110, 130,120],
+ itemStyle: {
+ normal: {
+ color: function(params) {
+ var colors = ['#34b3a0', '#ff6347'];
+ return colors[params.dataIndex % 2];
+ }
}
}
+ }];
+ yAxis = {
+ type: 'category',
+ data: ['研究生', '大学', '大专', '中专', '职高','中央党校研究生','中央党校大学','其他'],
+ axisTick: {show: false,}
}
- }];
- yAxis = {
- type: 'category',
- data: ['研究生', '大学', '大专', '中专', '职高','中央党校研究生','中央党校大学','其他']
- }
- //柱状图2
- barChartMethod("barChart2",{trigger: 'axis'},"",{type: 'value', name: '人数'},yAxis,grid1,series);
- var itemStyle = {borderColor: '#fff',borderWidth: 2}
- //饼图3
- pieChartMethod('pieChart3',array1,"饼图3",'60%',"",grid,"",true,itemStyle);
- //柱状图3
- var data1 = [120, 200, 150, 80, 70, 110, 130,120, 200, 150, 80, 70, 110, 130,120, 200, 150, 80, 70, 110, 130,120, 200, 150, 80, 70];
- var maxHeight = Math.max(...data1);
- var xAxis = {
- type: 'category',
- data: ['A', 'B', 'C', 'D', 'E', 'F', 'G','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z']
- }
- yAxis = {
- type: 'value'
- }
- var series1 = [{
- name: '灰色背景',
- type: 'bar',
- data: data1.map(value => maxHeight), // 使用最大高度填充
- itemStyle: {
- color: '#ccc', // 灰色
- opacity: 0.5 // 可选：使灰色柱子稍微透明
- },
- barGap: '-100%', // 使灰色柱子与实际数据柱子重叠
- tooltip: {
- show: false //禁用灰色柱子的 tooltip
- },
- silent: true //禁用柱子的悬停和点击事件
- }, {
- name: '数据',
- type: 'bar',
- data: data1,
- itemStyle: {
- color: '#73C9C8' // 实际数据的颜色
+ //柱状图2
+ barChartMethod("barChart2",{trigger: 'axis'},"",{type: 'value',axisLine: {show: false,},axisTick: {show: false,}},
+ yAxis,grid1,series);
+ var itemStyle = {borderColor: '#fff',borderWidth: 2}
+ //饼图3
+ array1 = [
+ {name:'博士',value:2}, {name:'硕士',value:3},{name:'学士',value:5}, {name:'其他',value:1}
+ ];
+ pieChartMethod('pieChart3',array1,"学位情况",'80%',"",grid,"",true,itemStyle);
+ //柱状图3
+ var data1 = [120, 200, 150, 80, 70, 110, 130,120, 200, 150, 80, 70, 110, 130];
+ var maxHeight = Math.max(...data1);
+ var xAxis = {
+ type: 'category', data: ['行政机关', '人大机关', '政协机关', '民主党派机关', '司法机关', '高校', '科研院所','其他事业单位','群团组织','在沪央企','地方国企','中央在沪单位','部队','其他'],
+ axisTick: {show: false,},
+ axisLabel: {
+ interval: 0 // 强制显示所有标签
+ }
+ }
+ yAxis = {
+ type: 'value',
+ axisLine: {show: false,}, axisTick: {show: false,},splitLine: {show: false}
}
- }];
- var grid3 = {left: '5%', right: '6%', bottom: '12%', top:'6%'}
- barChartMethod("barChart3","","",xAxis,yAxis,grid3,series1);
+ var series1 = [{
+ name: '灰色背景',
+ type: 'bar',
+ data: data1.map(value => maxHeight), // 使用最大高度填充
+ itemStyle: {
+ color: '#ccc', // 灰色
+ opacity: 0.5 // 可选：使灰色柱子稍微透明
+ },
+ barGap: '-100%', // 使灰色柱子与实际数据柱子重叠
+ tooltip: {
+ show: false //禁用灰色柱子的 tooltip
+ },
+ silent: true //禁用柱子的悬停和点击事件
+ }, {
+ name: '单位类别',
+ type: 'bar',
+ data: data1,
+ itemStyle: {
+ color: '#73C9C8' // 实际数据的颜色
+ }
+ }];
+ var grid3 = {left: '5%', right: '2%', bottom: '13%', top:'6%'}
+ barChartMethod("barChart3","","",xAxis,yAxis,grid3,series1);
+ }
//饼图-id-数据-名称-弧度-位置-grid-legend-是否需要线
function pieChartMethod(id,array,name,radius,center,grid,legend,isLabel,itemStyle){
@@ -271,7 +282,7 @@
type: 'pie',
data: array,
labelLine: {
- length: 4,
+ length: 8,
length2: 4
},
emphasis: {
-