天天看點

【前端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同學 '
                }
            ]
        }
    ]
};      

 效果圖如下: