SkyID
/
forgeplus-react
forked from Gitlink/forgeplus-react
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化成果库样式细节

This commit is contained in:
zhangxiaozhuozhuo 2023-11-21 16:21:56 +08:00
parent 24f8f631a5
commit ff81c1523d
4 changed files with 111 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

195
src/military/achievement/achivChart/index.jsx
View File

@ -11,103 +11,120 @@ function AchivChart() {
useEffect(() => {
// 拿到成果概览数据
getAchivChart().then(data => {
console.log('@@@成果概览数据:',data);
// console.log('@@@成果概览数据:',data);
setAchivData(data);
});
}, []);
});
}, []);
useEffect(() => {
if (Object.keys(achivData).length > 0) {
// 基于准备好的dom，初始化echarts实例
const myChart = echarts.init(document.getElementById('chartBox'));
// 计算总成果数量
// const keysToExclude = ['viewCount', 'acCount'];
// const total = Object.keys(achivData).filter(key => !keysToExclude.includes(key)).reduce((acc, key) => acc + achivData[key], 0);
// console.log('@@@总成果数量:',total);
useEffect(() => {
if (Object.keys(achivData).length > 0) {
// 转换函数
function preprocessData(data) {
return data.map(function(item) {
if (item.value === 0) {
return {
value: null,
name: item.name
};
} else {
return item;
}
});
}
// 指定图表的配置项和数据
const option = {
title: {
text: '成果数量占比统计',
left: 'center',
top: 380,
textStyle: {
fontSize: 18
}
},
legend: {
orient: 'vertical',
right: 10,
top: 85,
itemGap: 16,
itemWidth: 32,
itemHeight: 24,
textStyle: {
fontSize: 16
}
},
color: [
'rgba(183, 88, 255, 1)',
'rgba(255, 190, 56, 1)',
'rgba(240, 68, 95, 1)',
'rgba(88, 113, 255, 1)',
'rgba(36, 185, 168, 1)',
'rgba(88, 183, 255, 1)'
],
series: [
{
name: 'Nightingale Chart',
type: 'pie',
radius: [35, 160],
center: ['150', '50%'],
roseType: 'area',
clockwise: true,
startAngle: 45,
label: {
show: false
},
itemStyle: {
borderRadius: 0
},
data: [
{ value: achivData.osProjectCount, name: '开源项目 ' + achivData.osProjectCount + '%' },
{ value: achivData.ckTaskCount, name: '创客任务 ' + achivData.ckTaskCount + '%' },
{ value: achivData.osContestCount, name: '开放竞赛 ' + achivData.osContestCount + '%' },
{ value: achivData.scienceAchievementCount, name: '科研成果 ' + achivData.scienceAchievementCount + '%' },
{ value: achivData.equipAchievement, name: '装备成果 ' + achivData.equipAchievement + '%' },
{ value: achivData.anotherCount, name: '其他成果 ' + achivData.anotherCount + '%' }
],
label: {
show: true,
position: 'inside',
color: 'white',
formatter: '{c}%', // 显示数据名称和百分比
textStyle: {
fontSize: 20
// echarts data
let data = [
{ value: achivData.osProjectCount, name: '开源项目 ' + achivData.osProjectCount + '%' },
{ value: achivData.ckTaskCount, name: '创客任务 ' + achivData.ckTaskCount + '%' },
{ value: achivData.osContestCount, name: '开放竞赛 ' + achivData.osContestCount + '%' },
{ value: achivData.scienceAchievementCount, name: '科研成果 ' + achivData.scienceAchievementCount + '%' },
{ value: achivData.equipAchievement, name: '装备成果 ' + achivData.equipAchievement + '%' },
{ value: achivData.anotherCount, name: '其他成果 ' + achivData.anotherCount + '%' }
];
// 按照value从大到小排序
let sortedData = data.sort((a, b) => { return b.value - a.value } );
// 如果传入的数据的value为0 则把0变为null
let processedData = preprocessData(sortedData);
// 初始化echarts实例
const myChart = echarts.init(document.getElementById('chartBox'));
// 指定图表的配置项和数据
const option = {
title: {
text: '成果数量占比统计',
left: 215,
top: 380,
textStyle: {
fontSize: 18
}
},
legend: {
orient: 'vertical',
right: 10,
top: 105,
itemGap: 16,
itemWidth: 32,
itemHeight: 24,
textStyle: {
fontSize: 16
}
},
color: [
'rgba(183, 88, 255, 1)',
'rgba(255, 190, 56, 1)',
'rgba(240, 68, 95, 1)',
'rgba(88, 113, 255, 1)',
'rgba(36, 185, 168, 1)',
'rgba(88, 183, 255, 1)'
],
series: [
{
name: 'Nightingale Chart',
type: 'pie',
radius: [35, 145],
center: ['150', '50%'],
roseType: 'area',
clockwise: false,
startAngle: 45,
itemStyle: {
borderRadius: 0
},
data: processedData,
label: {
show: true,
position: 'inside',
color: 'white',
formatter: '{c}%', // 显示数据名称和百分比
textStyle: {
fontSize: 20
}
}
}
],
graphic: {
type: 'text',
left: '133',
top: 'middle',
style: {
text: '成果\n类型',
fill: '#333',
fontSize: 18,
fontWeight: 'bold',
verticalAlign: 'middle',
lineHeight: 24
}
}
],
graphic: {
type: 'text',
left: '133',
top: 'middle',
style: {
text: '成果\n类型',
fill: '#333',
fontSize: 18,
fontWeight: 'bold',
verticalAlign: 'middle',
lineHeight: 24
}
}
};
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
}
}, [achivData]);
}
}, [achivData]);
return (
<div id='mainContent'>

6
src/military/achievement/achivChart/index.scss
View File

@ -5,10 +5,10 @@
height: 450px;
display: flex;
background:linear-gradient(97.82deg,#f3f5f8 0%,rgba(255, 255, 255, 0) 100%);
box-shadow:8px 6px 18px rgba(171, 202, 255, 0.24) inset;
box-shadow:0px 6px 18px rgba(171, 202, 255, 0.24) inset;
#leftBox {
width: 550px;
width: 515px;
height: 450px;
position: relative;
.count-top {
@ -117,7 +117,7 @@
height: 450px;
}
#blankBox {
width: 150px;
width: 185px;
height: 450px;
}
}

2
src/military/achievement/noticeDetail/index.jsx
View File

@ -67,7 +67,7 @@ export default Form.create()(({ match, history, showNotification, form }) => {
<div className="centerbox notice-detail">
<div className="head-navigation">
<Link to="/">首页<span className="greater">&nbsp;&gt;&nbsp;</span></Link>
<Link to="/achievement">成果库<span className="greater">&nbsp;&gt;&nbsp;</span></Link>
<Link to="/achievement/overview">成果库<span className="greater">&nbsp;&gt;&nbsp;</span></Link>
<span>成果详情</span>
</div>
<div className="center-content">

1
src/military/achievement/noticeList/index.scss
View File

@ -113,6 +113,7 @@
margin-top: -20px;
.navigationMenu{
margin-top: -12px;
margin-right: 20px;
width: 20.8em;
caret-color: rgba(0, 0, 0, 0);