113 lines
3.8 KiB
JavaScript
113 lines
3.8 KiB
JavaScript
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, history}) {
|
||
|
||
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%"],
|
||
triggerEvent: true
|
||
},
|
||
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);
|
||
myEcharts.on('click', function (params) {
|
||
// 确保是点击在标签上
|
||
if (params.targetType && params.targetType === 'axisName') {
|
||
switch (params.name) {
|
||
case '社区\n影响力':
|
||
history.push(`/${owner}/${projectsId}/portrait/community_impact`);
|
||
break;
|
||
case '项目\n成熟度':
|
||
history.push(`/${owner}/${projectsId}/portrait/project_maturity`);
|
||
break;
|
||
case '项目\n健康度':
|
||
history.push(`/${owner}/${projectsId}/portrait/project_health`);
|
||
break;
|
||
case '团队\n健康度':
|
||
history.push(`/${owner}/${projectsId}/portrait/team_impact`);
|
||
break;
|
||
case '开发\n活跃度':
|
||
history.push(`/${owner}/${projectsId}/portrait/develop_activity`);
|
||
break;
|
||
default:
|
||
console.log('点击了其他区域:', params);
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
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; |