forgeplus-react/src/forge/users/Echart/Radar.jsx

62 lines
1.6 KiB
JavaScript

import React ,{ useEffect } from 'react';
import echarts from 'echarts/lib/echarts'
import 'echarts/lib/chart/radar';
function Radar({data}) {
useEffect(()=>{
if(data){
Init(data);
}
},[data])
function Init(d) {
var huan_val = document.getElementById("radar");
var myEcharts = echarts.init(huan_val);
let option = {
color: ["#f8e367", "#99dfff", "#58c0f0", "#5ea6ff", "#ff9e48", "#bcbcbc"],
title: {
show:false
},
legend: {
data: ['个人能力(personal)', '社区平均(average)'],
top:"3%",
right:"center"
},
tooltip: {
trigger: 'item'
},
radar: {
// shape: 'circle',
indicator: [
{ name: '影响力', max: 100},
{ name: '贡献度', max: 100},
{ name: '活跃度', max: 100},
{ name: '项目经验', max: 100},
{ name: '语言能力', max: 100},
],
center:["50%","55%"]
},
series: [{
name: '',
type: 'radar',
data: [
{
value: d.user && [d.user.influence, d.user.contribution, d.user.activity, d.user.experience, d.user.language],
name: '个人能力(personal)'
},
{
value: d.platform && [d.platform.influence, d.platform.contribution, d.platform.activity, d.platform.experience, d.platform.language],
name: '社区平均(average)'
}
]
}]
};
myEcharts.setOption(option);
}
return(
<div id="radar" style={{height:"400px"}}></div>
)
}
export default Radar;