echarts 雷达图的应用

如果没有你想要的认真看文档，文档上都有，看不懂的话去试。

整个雷达图

1、标题组件

 title: {//标题组件
            text: '创业素质分析雷达图',//主标题名称
            right:40,//位置，距右边的距离
            bottom:60,//距下边的距离
            textStyle:{//标题文本样式
                color:"#4a4a4a",//标题颜色
                fontSize:"18",//标题字体大小
                fontWeight:"bold",//标题是否加粗
            }
    },

2、提示框（鼠标悬浮在线附近才会出现）

 tooltip: {//提示狂组件
        show:true,//是否显示
        // trigger:"item",
        backgroundColor:"rgba(170,230,248,0.5)",//提示框背景色
        enterable:true,//鼠标是否可进入提示框浮层中，默认为false，如需详情内交互，如添加链接，按钮，可设置为 true。
        confine:true,//是否将 tooltip 框限制在图表的区域内。
        textStyle:{//提示框浮层的文本样式。
            color:"#086683",
            fontSize:12,
        },   
    },

3、图例组件

 legend: {//图例组件
        orient:"vertical",//图例列表的布局朝向
            data: ['自评', '他评'],//图例的数据数组
            right:60,//距右边的距离
            bottom:120,//距下边的距离
            textStyle:{//图例的公用文本样式。
                color:"#2f4554",
            },
            padding:0,
    },

4、系列组件

series: [
        {name: '自评 vs 他评',//系列名称，用于tooltip的显示，
        type: 'radar',
        itemStyle: {//图形样式，可设置图表内图形的默认样式和强调样式（悬浮时样式）：
                    normal: {
                        color:['#147de7']//雷达线的颜色
                    },
                    
                },
        data : [//雷达图的数据是多变量（维度）的，
             {
                    value : [4300, 10000, 28000, 35000, 50000, 19000,20000,10000],
                    name : '自评'//数据项名称
                },
        ]
    },
    {
       name: '自评 vs 他评',
        type: 'radar',
        itemStyle: {//图形样式，可设置图表内图形的默认样式和强调样式（悬浮时样式）：
                    normal: {
                        color:['#1dda11']//雷达线的颜色
                    },
                },
        data : [//雷达图的数据是多变量（维度）的，
                 {
                    value : [5000, 14000, 28000, 31000, 42000, 21000,20000,26000],
                    name:'他评'//数据项名称
                }
        ]
    }]

注：当设置了雷达线的颜色后，它的图例那块的颜色会跟着变化，不用单独设置图例的颜色（有点说不明白，看图）

                                                                      

上面两图的颜色是同步的（color:['#147de7']//雷达线的颜色）

有几根线就复制几个对象，放在series数组中，分别去设置各自的颜色什么的

 5、radar

 radar: {
        // shape: 'circle',
        nameGap: 15,   //指示器名称和指示器轴的距离。
         name: {//雷达图每个指示器名称的配置项。
            textStyle: {
                color: '#4a4a4a',
                borderRadius: 3,
                fontSize:"16",
           }
        },
        center:["50%","50%"],//中心（圆心）坐标，数组的第一项是横坐标，第二项是纵坐标。
        radius:"80%",//半径，数组的第一项是内半径，第二项是外半径。
        startAngle: 90,//坐标系起始角度，也就是第一个指示器轴的角度。
        splitNumber: 5,//指示器轴的分割段数。
        splitArea: {//坐标轴在 grid 区域中的分隔区域，默认不显示。
            show:true,
            areaStyle: {
                color: ['rgba(244,244,244,0.2)','rgba(255,255,255,0.3)']//
            }
        },
        axisLine: {//坐标轴轴线相关设置。
            show:true,
            lineStyle: {
                color: ['rgba(241, 241, 241, 0.6)']
            },
        },
        splitLine: {//坐标轴在 grid 区域中的分隔线。
            show:true,
            lineStyle: {
                color: ["rgba(238, 238, 238, 0.5)"]
            }
        }, 
        // triggerEvent:true,  
        indicator: [//雷达图的指示器，用来指定雷达图中的多个变量（维度），
               { name: '创业信念', max: 6500},
               { name: '创业动机', max: 16000},
               { name: '其他素质', max: 30000},
               { name: '互联网思维', max: 38000},
               { name: '团队精神', max: 52000},
               { name: '学习能力', max: 25000},
               { name: '身心健康', max: 50000},
               { name: '冒险精神', max: 30000}
            ],
    },

(1)   color分别是图中标出的绿色和红色的颜色

splitArea: {//坐标轴在 grid 区域中的分隔区域，默认不显示。
            show:true,
            areaStyle: {
                color: ['rgba(244,244,244,0.2)','rgba(255,255,255,0.3)']//
            }
        },

（2）如图（color：为中间标出的位置的颜色）

axisLine: {//坐标轴轴线相关设置。
            show:true,
            lineStyle: {
                color: ['rgba(241, 241, 241, 0.6)']
            },
        },

（3）如图

splitLine: {//坐标轴在 grid 区域中的分隔线。
            show:true,
            lineStyle: {
                color: ["rgba(238, 238, 238, 0.5)"]
            }
        }, 

（4）如图（color 为红色标出的位置）

 name: {//雷达图每个指示器名称的配置项。
            textStyle: {
                color: '#4a4a4a',
                borderRadius: 3,
                fontSize:"16",
           }
        },