From ff81c1523d555f530445edf18fe4b03450258fe8 Mon Sep 17 00:00:00 2001 From: zhangxiaozhuozhuo <7658685+zhangxiaozhuozhuo@user.noreply.gitee.com> Date: Tue, 21 Nov 2023 16:21:56 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=88=90=E6=9E=9C=E5=BA=93?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E7=BB=86=E8=8A=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/military/achievement/achivChart/index.jsx | 195 ++++++++++-------- .../achievement/achivChart/index.scss | 6 +- .../achievement/noticeDetail/index.jsx | 2 +- .../achievement/noticeList/index.scss | 1 + 4 files changed, 111 insertions(+), 93 deletions(-) diff --git a/src/military/achievement/achivChart/index.jsx b/src/military/achievement/achivChart/index.jsx index 802c456d1..d23923ab3 100644 --- a/src/military/achievement/achivChart/index.jsx +++ b/src/military/achievement/achivChart/index.jsx @@ -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 (
diff --git a/src/military/achievement/achivChart/index.scss b/src/military/achievement/achivChart/index.scss index baa5ffaad..f847e3197 100644 --- a/src/military/achievement/achivChart/index.scss +++ b/src/military/achievement/achivChart/index.scss @@ -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; } } diff --git a/src/military/achievement/noticeDetail/index.jsx b/src/military/achievement/noticeDetail/index.jsx index b19d982ea..e17d1c1e1 100644 --- a/src/military/achievement/noticeDetail/index.jsx +++ b/src/military/achievement/noticeDetail/index.jsx @@ -67,7 +67,7 @@ export default Form.create()(({ match, history, showNotification, form }) => {
首页 >  - 成果库 >  + 成果库 >  成果详情
diff --git a/src/military/achievement/noticeList/index.scss b/src/military/achievement/noticeList/index.scss index c7c23546c..657f726b0 100644 --- a/src/military/achievement/noticeList/index.scss +++ b/src/military/achievement/noticeList/index.scss @@ -113,6 +113,7 @@ margin-top: -20px; .navigationMenu{ + margin-top: -12px; margin-right: 20px; width: 20.8em; caret-color: rgba(0, 0, 0, 0);