react + echarts （radar）
import React from 'react';
import {render} from "react-dom";
let Page = React.createClass({
getInitialState(){
return{
}
},
componentWillMount(){
},
componentDidMount(){
this.radarConfig();
},
radarConfig(){
//示例数据
let arr = [
{
id:1,
A: 40,
act:'查看图片',
},
{
id:2,
A: 100,
act:'查看图片',
},
{
id:3,
A: 80,
act:'查看图片',
},
{
id:4,
A: 80,
act:'查看图片',
},
{
id:5,
A: 80,
act:'查看图片',
},
{
id:6,
A: 100,
act:'查看图片',
},
];
let newArr = [];
arr.map((v,i)=>{
newArr[i]=arr[i].A;
});
let echarts = require('echarts');
let myChart = echarts.init(document.getElementById('echartsRadar'));
let myareaStyle={
// color:['lightBlue','white','red'],//分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
color:{
type: 'linear',
x: 1,
y: 0,
x2: 1,
y2: 1,
colorStops: [{
offset: 0, color: 'lightskyblue' // 0% 处的颜色
},{
offset: .25, color: 'white' // 25% 处的颜色
},{
offset: .5, color: 'white' // 50% 处的颜色
},{
offset: .75, color: 'white' // 75% 处的颜色
},{
offset: 1, color: 'lightskyblue' // 100% 处的颜色
}],
global: false, // 缺省为 false
},
shadowColor:"rgba(171,220,254,.3)", //阴影颜色
shadowOffsetX:0, //阴影水平方向上的偏移距离。
shadowOffsetY:0, //阴影垂直方向上的偏移距离
shadowBlur:10, //图形阴影的模糊大小。
opacity:.6, //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形
};
let option = {
radar: [
{
indicator: [
{text: '形象品质', max: 100},
{text: '人数合理', max: 100},
{text: '时间控制', max: 100},
{text: '现场把控及配合', max: 100},
{text: '合作推广规范性', max: 100},
{text: '现场气氛', max: 100}
],
center: ['50%','50%'],//调整雷达图的位置
radius: 150,//半径，可放大放小雷达图
axisLine: {//坐标轴线相关设置
show: true,
lineStyle: {
width:2,
color: '#E6E9F1'
}
},
splitLine : {
show : true,
lineStyle : {
width : 2,
color : '#E6E9F1' // 图表背景网格线的颜色
}
},
splitArea: {
show: false,
},
},
],
series: [
{
type: 'radar',
symbol: 'circle',//节点设置
symbolSize:12,//节点尺寸
data: [
{
value: newArr,//展示的分数
// name: '评分',//可加可不加
areaStyle: {
normal:myareaStyle
},
lineStyle: {
width:4,
color:"#E6E9F1",//描边颜色
},
itemStyle:{
color:"rgba(56,161,247,1)",//节点颜色
}
}
]
},
],
triggerEvent:true//是否支持点击事件
};
myChart.setOption(option);
var i = -1;
//配置显示的节点内容
myChart.setOption({
radar: [
{
name: {
rich: {
a: {
fontSize:26,
fontFamily:'PingFangHK-Regular',
lineHeight:36,
fontWeight:400,
color: 'rgba(153,153,153,1)',
},
b: {
color: 'rgba(84,84,84,1)',
fontSize:26,
lineHeight:32,
fontFamily:'HelveticaNeue-Bold',
fontWeight:'bold',
align: 'center',
paddingTop: 8,
paddingBottom: 8,
},
c: {
fontSize:26,
fontFamily:'PingFangHK-Regular',
lineHeight:36,
fontWeight:400,
color: '#38A1F7',
align: 'center',
paddingTop:4,
borderBottomWidth:2,
borderColor:'#38A1F7',
borderStyle:'solid',
},
},
formatter: (a,b,c)=>{
i++;
return `{a|${a}}\n{b|${arr[i].A}}\n{c|${arr[i].act}}`
}
}
}
]
});
//添加点击事件
myChart.on('click', function (params) {
//这边都是看你自己业务需要进行操作的
let c = params.name;
let a = c.slice(3,c.indexOf('}'));
//处理一下 自己是点的哪一个
console.log('a',a);
});
},
render() {
return (
);
}
});
render(
嘿嘿，如果有什么可以精进的地方 欢迎各位老铁在线dd