echarts legend位置_echarts雷达图的简单实践

最近有一些数据需要展示，主要是两个产品在不同的方向上的表现对比，但是因为数据方向太多，有一些对比数据按每个方向做了总结以后总会显得结果很零散，在汇报的时候不够直观，难以给受众全局的概念。因此在调研以后决定用雷达图来完成数据展示

雷达图是以从同一点开始的轴上表示的三个或更多个定量变量的二维图表的形式显示多变量数据的图形方法，源于日本企业界。轴的相对位置和角度通常是无信息的。 雷达图也称为网络图，蜘蛛图，星图，蜘蛛网图，不规则多边形，极坐标图或Kiviat图。它相当于平行坐标图，轴径向排列。

常见的雷达图长这个样子

其本质是多个平行维度展现在类似极坐标的图上，可以方便的用于多个方向的数据比对场景。

为了方便绘制我们使用echarts来辅助，可以看到echarts给出了若干个雷达图示例

示意图主要是给出一些常见的配置示例，另外我们可以在echarts的配置项手册里面查询雷达图的全部可选配置

• id：组件id
• zlevel：层级设置
• z：弱优先级的层级设置
• center：雷达图中心坐标
• radius：半径
• startAngle：起始角度
• name：指示器名称设置，包含文本的所有设置如颜色字体高宽等
• nameGap：指示器名称和轴线的距离
• shape：形状，支持多边形和圆形
• silent：坐标轴是否响应交互
• scale：坐标轴是否包含0刻度
• triggerEvent：坐标标签是否响应事件
• axisLine：坐标轴线设置，包含是否展示、箭头及线风格通用设置，如颜色类型宽度等
• axisTick：坐标刻度设置，包含是否展示、长度及线风格通用设置
• axisLabel：坐标刻度标签设置，包含是否展示、富文本及线段的通用设置，如展示旋转对齐等
• splitLine：分割线设置
• splitNumber：分割数量
• splitArea：分割区域设置，包含是否展示和区域基础设置
• indicator：包含指示器的内容设置，如展示内容和区间设置

了解了这些雷达图的基本属性后，我们来看下最初的需求：两个产品在不同的方向上的表现对比，每个对比可以归一化到一个档位上，比如好中差；不同方向需要横向对比；产品有一个是主产品，另一个是参考产品。于是我们希望雷达图满足下面几个需求

• 涵盖多个方向且互相间有对比
• 清晰的区分主产品和参考产品
• 有明确的分档位参考信息

最终我们使用了这个形式来展示

具体可以看echarts代码

option = {
    title: {
        text: '基础雷达图'
    },
    tooltip: {},
    legend: {
        
        bottom:5,
        data: ['A', 'B']
    },

    radar: {
        // shape: 'circle',
        name: {
            textStyle: {
                color: '#fff',
                backgroundColor: '#999',
                borderRadius: 3,
                padding: [3, 5]
            }
        },
        splitNumber: 5,
       
       splitArea: {
                areaStyle: {
                    color: ['#591422',
                        '#7e5920', 
                        '#ffc971',
                        '#82c0cc',
                        '#097c22'],
                    shadowColor: 'rgba(0, 0, 0, 0.3)',
                    shadowBlur: 10
                }
            },
        indicator: [
             { name: '方向1', max: 100},
            { name: '方向2', max: 100},
            { name: '方向3', max: 100},
            { name: '方向4', max: 100},
            { name: '方向5', max: 100},
            { name: '方向6', max: 100}
        ]
    },
    series: [{
        type: 'radar',
        // areaStyle: {normal: {}},
         lineStyle: {
                    width: 3,
                    color: 'rgba(0,0,0,1)'
                },
        data: [
            {
                value: [70, 63, 80, 60, 50, 60],
                name: 'A'
            },
             {
                value: [43, 53, 70, 70, 70, 90],
                name: 'B',
                lineStyle: {
                        type: 'dashed'
                    }
            }
           
        ]
    }]
};

核心我们用到的就是雷达图中的分割区域，通过splitNumber设置了五个档位，配合splitArea里面的区域风格设置配置了颜色区别，然后在数据配置中采用了线配置使得所有绘制的多边形都是黑线并且主产品为实线，参考产品为虚线。

其他需求也可以配合开头的配置项说明去满足