最近有一些資料需要展示，主要是兩個産品在不同的方向上的表現對比，但是因為資料方向太多，有一些對比資料按每個方向做了總結以後總會顯得結果很零散，在彙報的時候不夠直覺，難以給閱聽人全局的概念。是以在調研以後決定用雷達圖來完成資料展示
雷達圖是以從同一點開始的軸上表示的三個或更多個定量變量的二維圖表的形式顯示多變量資料的圖形方法，源于日本企業界。軸的相對位置和角度通常是無資訊的。 雷達圖也稱為網絡圖，蜘蛛圖，星圖，蜘蛛網圖，不規則多邊形，極坐标圖或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裡面的區域風格設定配置了顔色差別，然後在資料配置中采用了線配置使得所有繪制的多邊形都是黑線并且主産品為實線，參考産品為虛線。
其他需求也可以配合開頭的配置項說明去滿足