【前端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中有很多种类的图表可供我们选择,我们可以根据不同的需求引入相应的图表,其参数类型大多大同小异,却能达到不同的效果,以多样化的形式展示信息.