接下來(lái),需要配置雷達(dá)圖的數(shù)據(jù)信息
// 配置雷達(dá)圖的數(shù)據(jù)
var option = {
title: {
text: 'echarts雷達(dá)圖示例'
},
tooltip: {},
legend: {
data:['預(yù)算分配','實(shí)際開(kāi)銷']
},
radar: {
// 雷達(dá)圖坐標(biāo)系組件
indicator: [
{ name: '銷售', max: 6500},
{ name: '管理', max: 16000},
{ name: '信息技術(shù)', max: 30000},
{ name: '客服', max: 38000},
{ name: '研發(fā)', max: 52000},
{ name: '市場(chǎng)', max: 25000}
]
},
series: [{
name: '預(yù)算 vs 開(kāi)銷(Allocated Budget vs Actual Spending)',
type: 'radar',
// 數(shù)據(jù)
data: [
{
value: [4300, 10000, 28000, 35000, 50000, 19000],
name: '預(yù)算分配',
// 單個(gè)數(shù)據(jù)項(xiàng)的樣式配置
itemStyle: {color: '#104E8B'}
},
{
value: [5000, 14000, 28000, 31000, 42000, 21000],
name: '實(shí)際開(kāi)銷',
// 單個(gè)數(shù)據(jù)項(xiàng)的樣式配置
itemStyle: {color: '#00FF00'}
}
]
}]
};
// 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表
myChart.setOption(option);
這樣我們就成功創(chuàng)建了一個(gè)雷達(dá)圖,可以根據(jù)所需的數(shù)據(jù)進(jìn)行修改配置,以展現(xiàn)不同效果。