diff --git a/src/forge/Component/Radar.jsx b/src/forge/Component/Radar.jsx new file mode 100644 index 00000000..0f085c25 --- /dev/null +++ b/src/forge/Component/Radar.jsx @@ -0,0 +1,100 @@ +import React, { useEffect, useState } from 'react'; +import echarts from 'echarts/lib/echarts' +import 'echarts/lib/chart/radar'; +import { Popover } from 'antd'; +import axios from 'axios'; + + +const radarChartOption = { + color: ["#f8e367", "#99dfff"], + title: { + show: true + }, + legend: { + show: false + }, + tooltip: { + trigger: 'item', + }, + radar: { + indicator: [ + { name: '影响力', max: 100 }, + { name: '活跃度', max: 100 }, + { name: '开发度', max: 100 }, + { name: '健康度', max: 100 }, + { name: '流行度', max: 100 }, + ], + center: ["50%", "55%"] + }, + series: [{ + name: '', + type: 'radar' + }] +}; + +function Radar({ fullName }) { + const [score, setScore] = useState(undefined); + useEffect(() => { + let url = `/${fullName}/score.json`; + axios.get(url).then(response => { + if ('updated_at' in response.data) { + setScore(response.data); + const properties = ['influence', 'community', 'vitality', 'health', 'trend']; + const scoreList = properties.map(property => Number((response.data[`${property}_norm_score`] * 100).toFixed(2))); + var radarContainer = document.getElementById("radar"); + var myEcharts = echarts.init(radarContainer); + radarChartOption.series[0].data = [{ + value: scoreList, + name: '项目得分' + }]; + myEcharts.setOption(radarChartOption); + } + }); + }, []) + + return ( + +