看下源码
主要看以下几点：
option（必传）
这里使用的echarts的option是一样的，这里贴一下echarts里面的说明 api文档
| title的主要属性 | 类型 | 值 | 标题 |
|---|---|---|---|
| text | string | '' | 标题名称 |
| show | boolean | false/true | 是否显示 |
| textStyle | {} | {color: ..., fontStyle: ..., ...} | 样式 |
| subtext | string | '' | 副标题名称 |
| subtextStyle | string | {color: ..., fontStyle: ..., ...} | 副标题样式 |
| ...... |
title比较简单：
| legend的主要属性 | 类型 | 值 | 图例 |
|---|---|---|---|
| data | array | [{name: ..., icon: ..., textStyle: ..., itemStyle: ..., ...},{}] | 图例的数据数组 |
| itemGap | number | 10 | 图例之间的距离 |
| type | string | 'plain'/'scroll' | 图例的类型 |
| ...... |
| radar的主要属性 | 类型 | 值 | 雷达图 |
|---|---|---|---|
| center | array | ['50%','50%']-百分比或者像素值 | 圆心坐标 |
| radius | number/string/array | ... | 外半径/外半径可是尺寸/【内半径，外半径】 |
| shape | string | 'polygon'/'circle' | 雷达图绘制类型（多边形/圆形） |
| indicator | [] | [{name: '',value: ..., max: ...},{}] | 指定雷达图中的多个变量 |
| splitArea | {} | {show: true/false, areaStyle: {}} | 雷达图背景的颜色 |
| axisLine | {} | {show: true/false, lineStyle: {},color: ...} | 雷达图中间射线 |
| nameGap | number | 15 | 指示器名称和指示器轴的距离(v5以后被axisNameGap代替) |
| triggerEvent | boolean | true/false | 坐标轴的标签是否响应和触发鼠标事件 |
| name | {} | {formatter: ...,rich: ..., textStyle: ...} | 雷达图每个指示器名称的配置项（v5之后被axisName代替） |
| ...... |
name:
name: {
show: false,
textStyle: {
color: '#999',
backgroundColor: 'transparent',
},
// 第一个参数是指示器名称，第二个参数是指示器配置项
formatter:function(value,indicator){
return '{a|'+value+'}'+ '\n' + '{b|'+indicator.value+'}'
},
//富文本编辑 修改文字展示样式
rich:{
a:{
color:"#999",
fontSize:12,
align: "center"
},
b:{
color:"#333",
fontSize:17,
align: "center"
}
}
},
| series的主要属性 | 类型 | 值 | 图 |
|---|---|---|---|
| type | string | radar/... | 图的种类/雷达图，折线图，饼图...... |
| areaStyle | {} | {} | 区域填充样式 |
| data | array | [{},{},] | 数据，每个值跟 radar.indicator 对应 |
| ...... |
series: [{
// name: '投诉统计',
type: 'radar',
//显示雷达图选中背景,这个属性不写的话，不会显示填充颜色如果想要填充颜色，一定要加上
areaStyle: {
// opacity: 0.9
},
data: [
{
value : [380, 290, 450, 300, 480, 200, 350, 333],
// 设置区域边框和区域的颜色
itemStyle: {
//雷达图背景渐变设置
color: 'black',
//去除刻度
opacity:0,
//雷达图边线样式
lineStyle: {
width: 0,
color: '#306BE7',
},
},
name : '今日更新投诉量2',
id: "jintian"
},
{
value : [10, 250, 100, 370, 80, 500, 190, 400],
// 设置区域边框和区域的颜色
itemStyle: {
color: 'red',
opacity:0,
lineStyle: {
width: 0,
color: '#8BF186',
},
},
name : '昨日更新投诉量2',
id: "zuotian"
},
{
value : [10, 150, 90, 30, 80, 50, 290, 40],
// 设置区域边框和区域的颜色
itemStyle: {
color: 'yellow',
opacity:0,
lineStyle: {
width: 0,
color: '#ff6600',
},
},
name : '这是测试图例的2',
id: "cshi"
}
]
}]
| 其余的图形形状 | 图形 | 配合属性 |
|---|---|---|
| line | 折线/面积图 | visualMap |
| bar | 柱状图 | visualMap |
| pie | 饼图 | visualMap |
| tree | 树图 | {} |
| treeMap | 『层级数据』『树状数据』的可视化形式 | |
| map | 地图 | visualMap |
| radar | 雷达图 | radar |
| ...... |
来个练习吧！
import React, { Component } from 'react';
// 引入 ECharts 主模块
import echarts from 'echarts/lib/echarts';
import ReactEcharts from 'echarts-for-react';
export default class EchartsRadar extends Component {
componentWillMount(){
}
getOptionRadar = () => {
return {
title: {
text: '这是一个雷达图',
textStyle: {
color: 'red',
},
},
legend: {
bottom: 0,
data: [
{
name: '工作量'
},
{
name: 'bug数'
},
{
name: '学习量'
},
],
itemGap: 20,
type: 'plain',
},
radar: {
center: ['50%','50%'],
radius: '75%',
shape: 'circle',
indicator: [
{
name: '第一小时',
max: 500,
color: 'red'
},
{
name: '第二小时',
max: 500,
},
{
name: '第三小时',
max: 500,
},
{
name: '第四小时',
max: 500,
},
{
name: '第五小时',
max: 500,
},
{
name: '第六小时',
max: 500,
},
],
splitArea: {
areaStyle: {
color: 'green'
}
},
axisLine: {
color: '#ff6600'
},
nameGap: 15,
},
series: {
type: 'radar',
areaStyle: {
},
data: [
{
value: [300,200,100,50,450,79],
name: '工作量',
itemStyle: {
opacity:0,
color: 'red'
}
},
{
value: [200,300,400,150,50,179],
name: 'bug数',
itemStyle: {
opacity:0,
color: 'blue'
}
},
{
value: [270,200,200,150,250,479],
name: '学习量',
itemStyle: {
opacity:0,
color: 'purple'
}
},
]
}
}
}
render(){
return(
<div>
<ReactEcharts option={this.getOptionRadar()} style={{height:'400px'}}/>
</div>
)
}
}
待补充：dataZoom用于区域缩放
