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