优化成果库样式细节

2023-11-21 16:21:56 +08:00 · 2023-11-21 16:21:56 +08:00 · ff81c1523d
parent 24f8f631a5
commit ff81c1523d
4 changed files with 111 additions and 93 deletions
--- 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 (
    <div id='mainContent'>
--- 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;
    }
 }
--- 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 }) => {
    <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">
--- 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);