7天带你搞定一个图表框架echarts（三）

雷达图的基础用法

看下面具体实例，

 var myChart = echarts.init(document.getElementById('main'));
        var option = {
            //图表标题
            title: {
                text: '自定义雷达图'
            },
            //图表图例
            legend: {
                data: ['图一', '图二', '张三', '李四']
            },
            //雷达图坐标系组件，只适用与雷达图
            radar: [{
                //雷达图的指示器，用来指定雷达图中的多个变量（维度）
                indicator: [{
                    text: '指标一'
                }, {
                    text: '指标二'
                }, {
                    text: '指标三'
                }, {
                    text: '指标四'
                }, {
                    text: '指标五'
                }],
                //用于定位雷达图的圆心
                //第一项是横坐标，第二项是纵坐标
                center: ['30%', '50%'],
                //雷达图的半径
                radius: 120,
                //第一个维度的起始角度
                startAngle: 90,
                //指示器轴的分割段数
                splitNumber: 5,
                //指示器轴的类型
                //circle表示为方形
                shape: 'circle',
                //雷达图每个指示器名称的配置项
                //formatter指示器名称显示的格式器
                //textStyle指示器文本的公用样式
                name: {
                    formatter: '【{value}】',
                    textStyle: {
                        color: '#72ACD1'
                    }
                },
                //指示器轴之间的分隔区域
                //areaStyle：分隔区域的样式设置。color：每个区域的颜色
                //shadowColor：阴影颜色，shadowBlur：图形阴影的模糊大小
                splitArea: {
                    areaStyle: {
                        color: ['rgba(114, 172, 209, 0.2)',
                            'rgba(114, 172, 209, 0.4)', 'rgba(114, 172, 209, 0.6)',
                            'rgba(114, 172, 209, 0.8)', 'rgba(114, 172, 209, 1)'
                        ],
                        shadowColor: 'rgba(0, 0, 0, 0.3)',
                        shadowBlur: 10
                    }
                },
                //axisLine：坐标轴轴线相关设置。lineStyle：用于设置坐标轴线的样式
                axisLine: {
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.5)'
                    }
                },
                //指示器轴轴线的相关设置。lineStyle：用于设置器轴轴线的样式
                splitLine: {
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.5)'
                    }
                }
            }, {
                indicator: [{
                    text: '语文',
                    max: 150
                }, {
                    text: '数学',
                    max: 150
                }, {
                    text: '英语',
                    max: 150
                }, {
                    text: '物理',
                    max: 120
                }, {
                    text: '化学',
                    max: 108
                }, {
                    text: '生物',
                    max: 72
                }],
                center: ['75%', '50%'],
                radius: 120
            }],


            series: [
                //第一个雷达图
                {
                    //type为radar表示当前图表为雷达图
                    name: '雷达图',
                    type: 'radar',
                    //emphasis：当鼠标悬停时显示的样式
                    //lineStyle:悬停时线的样式
                    emphasis: {
                        lineStyle: {
                            width: 4
                        }
                    },
                    //data：雷达图的数据是多变量（维度）的
                    //symbol：单个数据标记的图形
                    //symbolSize：单个数据标记的图形的大小
                    //lineStyle：单项线条样式。type：线的类型
                    //areaStyle：单项区域填充样式。color：填充颜色，opacity：透明度
                    data: [{
                        value: [100, 8, 0.40, -80, 2000],
                        name: '图一',
                        symbol: 'rect',
                        symbolSize: 5,
                        lineStyle: {
                            type: 'dashed'
                        }
                    }, {
                        value: [60, 5, 0.30, -100, 1500],
                        name: '图二',
                        areaStyle: {
                            color: 'rgba(255, 255, 255, 0.5)'
                        }
                    }]
                },
                //第二个雷达图
                //radarIndex：雷达图所使用的 radar 组件的 index。默认为0
                //data属性中label属性用于单个拐点文本的样式设置
                //label属性中formatter用于定于文本格式
                {
                    name: '成绩单',
                    type: 'radar',
                    radarIndex: 1,
                    data: [{
                        value: [120, 118, 130, 100, 99, 70],
                        name: '张三',
                        label: {
                            show: true,
                            formatter: function(params) {
                                return params.value;
                            }
                        }
                    }, {
                        value: [90, 113, 140, 30, 70, 60],
                        name: '李四',
                        //color使用的是线性渐变
                        areaStyle: {
                            opacity: 0.9,
                            color: new echarts.graphic.RadialGradient(0.5, 0.5, 1, [{
                                // 0% 处的颜色
                                color: '#B8D3E4',
                                offset: 0
                            }, {
                                //100 % 处的颜色
                                color: '#72ACD1',
                                offset: 1
                            }])
                        }
                    }]
                }
            ]
        }
        myChart.setOption(option);

在上述案例中，我们有用到title组件、legend组件、radar组件、series组件。其中，

1. radar组件是雷达图坐标系组件，只适用与雷达图。其中，
   • indicator：雷达图的指示器，用来指定雷达图中的多个变量（维度）。
   • center：用于定位雷达图的圆心，第一项是横坐标，第二项是纵坐标
   • radius：雷达图的半径。可以是数值、百分比、数组（第一项是内半径，第二项是外半径）
   • startAngle：第一个维度的起始角度。维度的意思是某一个数据类型。
   • splitNumber：指示器轴的分割段数，在雷达图内部进行分区。
   • shape：指示器轴的类型，polygon表示为方形，circle表示为圆型
   • name：表示雷达图每个指示器名称的配置项，其中的formatter属性表示指示器名称显示的格式器，textStyle属性指示器文本的公用样式
   • splitArea：表示指示器轴之间的分隔区域，每两个指示器轴之间分隔一块区域。
     • areaStyle属性表示分隔区域的样式设置，里面的color属性用于设置每个区域的颜色，shadowColor属性用于设置阴影颜色，shadowBlur属性用于图形阴影的模糊大小
   • axisLine：用于坐标轴轴线相关设置，与维度一一对应。其中lineStyle属性用于设置坐标轴线的样式
   • splitLine：用于指示器轴轴线的相关设置。其中lineStyle属性用于设置器轴轴线的样式
2. series组件
   • type：当属性值为radar表示当前图表为雷达图
   • emphasis：表示当鼠标悬停时显示的样式。lineStyle表示悬停时指示器轴线的样式。
   • radarIndex：雷达图所使用的 radar 组件的 index，默认为0
   • data：表示雷达图的数据
     • symbol：单个数据标记的图形。类型包括 ‘circle’, ‘rect’, ‘roundRect’, ‘triangle’, ‘diamond’, ‘pin’, ‘arrow’, ‘none’
     • symbolSize：单个数据标记的图形的大小
     • lineStyle：单项线条样式。type：线的类型
     • areaStyle：单项区域填充样式。color：填充颜色，opacity：透明度
     • label：用于单个拐点文本的样式设置。formatter用于定义文本格式