From b998b38b027389977754f6b3b2c353b12971b63b Mon Sep 17 00:00:00 2001 From: zhaoyantao Date: Tue, 10 Dec 2024 16:13:57 +0800 Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5=E8=BF=9B=E8=A1=8C=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/main/resources/static/css/main.css | 6 +- .../src/main/resources/templates/main.html | 217 +++++++++--------- 2 files changed, 118 insertions(+), 105 deletions(-) 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
会长
- 1人 +
1人
副会长
- 5人 +
5人
-
+

近期培训活动

-
+
@@ -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: {