diff --git a/src/forge/Component/Component.scss b/src/forge/Component/Component.scss
index 92c973d24..1a08309f2 100644
--- a/src/forge/Component/Component.scss
+++ b/src/forge/Component/Component.scss
@@ -165,7 +165,7 @@ li.ant-menu-item{
 .hoverA{
   display:flex;
   align-items: center;
-  max-width: 78px;
+  max-width: 100px;
   &:hover a{
     color:#2A61FF !important ;
   }
diff --git a/src/forge/Component/projectPortrait.jsx b/src/forge/Component/projectPortrait.jsx
new file mode 100644
index 000000000..18eda908b
--- /dev/null
+++ b/src/forge/Component/projectPortrait.jsx
@@ -0,0 +1,88 @@
+import React ,{ Fragment, useEffect } from 'react';
+import echarts from 'echarts/lib/echarts'
+import 'echarts/lib/chart/radar';
+import 'echarts/lib/component/tooltip';
+import axios from 'axios';
+import { Icon, Popover } from 'antd';
+
+function Radar({owner,projectsId}) {
+
+  useEffect(()=>{
+    const url = `/v1/${owner}/${projectsId}/portrait.json`;
+    axios.get(url).then(res=>{
+      if(res && res.data){
+        Init(res.data);
+      }
+    }).catch(error=>{})
+  },[])
+
+  function Init(data) {
+    var huan_val = document.getElementById("projectPortrait");
+    var myEcharts = echarts.init(huan_val);
+    let option = {
+      color: ["#f8e367", "#99dfff", "#58c0f0", "#5ea6ff", "#ff9e48", "#bcbcbc"],
+      title: {
+        show:false
+      },
+      tooltip: {
+        trigger: 'item',
+        formatter: (params) =>{
+          const {name, seriesName, value} = params
+          const tips = seriesName.split(",").map((item, index)=>{
+            return `${item}：${(value[index]-20).toFixed(2)}`
+          })
+          return [name].concat(tips).join("<br/>")
+        }
+      },
+      radar: {
+        indicator: [
+          { name: '社区\n影响力', max: 120},
+          { name: '项目\n成熟度', max: 120},
+          { name: '项目\n健康度', max: 120},
+          { name: '团队\n影响度', max: 120},
+          { name: '开发\n活跃度', max: 120},
+        ],
+        center:["50%","55%"]
+      },
+      series: [{
+        name: "社区影响力,项目成熟度,项目健康度,团队影响度,开发活跃度",
+        type: 'radar',
+        data: [
+          {
+            value: [addTwenty(data.community_impact), addTwenty(data.project_maturity), addTwenty(data.project_health), addTwenty(data.team_impact), addTwenty(data.develop_activity)],
+            name: '本项目评分'
+          },
+        ]
+      }]
+    };
+    myEcharts.setOption(option);
+  }
+
+  function addTwenty(number){
+    return Number(number)+20
+  }
+
+  const content = (
+    <div>
+      从以下五个维度生成当前项目画像：<br/>
+      社区影响力：从项目点赞、关注、fork角度生成评分<br/>
+      项目成熟度：从项目疑修、合并请求、提交总数量生成评分<br/>
+      项目健康度：从项目疑修、合并请求、许可证完成度生成评分<br/>
+      团队影响度：从项目团队稳定性、新人增长率生成评分<br/>
+      开发活跃度：从代码提交、疑修及合并请求等开发活动频率生成评分
+    </div>
+  );
+
+  return(
+    <div className='halfs'>
+      <div className="font-16 color-ooo hoverA mb20">
+        项目画像
+        <Popover content={content}>
+          <Icon type="question-circle" theme="filled" className="color-blue ml10 pointer"/>
+        </Popover>
+      </div>
+      <div id="projectPortrait" style={{height:"230px"}}></div>
+    </div>
+  )
+}
+export default Radar;
\ No newline at end of file
diff --git a/src/forge/Main/CoderDepot.jsx b/src/forge/Main/CoderDepot.jsx
index c864a5279..68e664dd6 100644
--- a/src/forge/Main/CoderDepot.jsx
+++ b/src/forge/Main/CoderDepot.jsx
@@ -32,6 +32,7 @@ const CoderRootFileDetail = Loadable({
   loading: Loading,
 });
 
+import ProjectPortrait from '../Component/projectPortrait';
 /**
  * projectDetail.type:0是托管项目，1是镜像项目，2是同步镜像项目(为2时不支持在线创建、在线上传、在线修改、在线删除、创建合并请求等功能)
  */
@@ -673,6 +674,8 @@ function CoderDepot(props){
                     }
                     {/* 贡献者 */}
                     {mirror_status ===0 && <Contributors owner={owner} projectsId={projectsId} /> }
+                    {/* 项目画像 */}
+                    <ProjectPortrait owner={owner} projectsId={projectsId}/>
                     {/* 语言 */}
                     { mirror_status ===0 && <LanguagePower owner={owner} projectsId={projectsId}/> }
                   </div>