【前端echatrs圖表框架】使用echarts實現雷達圖
一個學生在大學四年中所修的所有課程可以分為素質必修課,核心必修課,一般必修課,通識必修課,通識限選課5種,通過雷達圖,匯入學生在每一種課程的平均績點,即可清晰地顯示一個同學的綜合發展情況了.
程式碼如下:
option = {
title : {
text: ' 學生績點雷達圖', //這裡的引數是整個圖示的標題 後面也可以加註釋
subtext: ' '
},
tooltip : {
trigger: 'axis'
},
legend: {
orient : 'vertical', //這裡主要是標識不同顏色代表不同的同學
x : 'right',
y : 'bottom',
data:['A同學成績 ','B同學成績 ']
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
restore : {show: true},
saveAsImage : {show: true}
}
},
polar : [
{
indicator : [
{ text: '素質必修課 ', max: 5.0}, //這裡用於設定各軸的引數以及最大值
{ text: '核心必修課 ', max: 5.0},
{ text: '一般必修課 ', max: 5.0},
{ text: '通識必修課', max: 5.0},
{ text: '通識限選課', max: 5.0},
]
}
],
calculable : true,
series : [
{
name: '預算 vs 開銷（Budget vs spending）',
type: 'radar',
data : [
{
value : [3.6, 4.1, 3.3, 2.5, 2.7 ],
name : 'A同學 '
},
{
value : [4.2, 4.1, 3.9, 3.7, 3.5 ],
name : 'B同學 '
}
]
}
]
};
效果圖如下:
該圖表對echarts自帶的雷達圖進行了一定的修改,將引數替換成我們需要的內容,於是就可以非常鮮明的體現學生的各項課程發展全面程度並進行對比了,學生自己看到也能立刻發現自己在哪些方面有不足,更需要改進.echarts中有很多種類的圖表可供我們選擇,我們可以根據不同的需求引入相應的圖表,其引數型別大多大同小異,卻能達到不同的效果,以多樣化的形式展示資訊.