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

【前端echatrs图表框架】使用echarts实现雷达图相关推荐

JS Echarts之雷达图 | 使用Excel画雷达图
文章目录第一部分:JS Echarts之雷达图 1. 什么是 Echarts 2. JS Echarts之雷达图 2.1 使用Echarts画雷达图 2.3 echarts雷达图中常用修改修改in ...
echarts自定义雷达图（radar）
先来个效果图 1.首先设置形状 shape: "circle", // 支持 'polygon' 和 'circle' ,默认polygon 2.设置线条 splitLine: { ...
使用echarts实现雷达图
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding= ...
echarts radar雷达图常规使用
<div id="idRadar"></div> data() {return {// 雷达图optionRadar: {color: '#1890FF', ...
关于echarts的雷达图比较详细的参数说明
要实现的效果图如下: 接下来主要关于下面的几个参数进行设置 1. 雷达图的圈数 2. 雷达图每圈上面的数字 3. 雷达图区域拐点的数值 4. 雷达图拐点的样式 5. 雷达图每个区域的颜色设置 6. 雷 ...
echarts实现雷达图
这里提供两种效果,都是对官网的demo进行一点的改进,这里放上官网链接,有不清楚的参数可直接查阅->echarts官网.话不多说,直接上代码: //实现一 initChart() {this.c ...
Echarts关于雷达图的一些个性化设置
function test() { let myChart = echarts.init(document.getElementById('levelImage')); ...
三种方法绘制雷达图，用最快的时间做出最好看的可视化图表
雷达图是通过多个离散属性比较对象的最直观工具,掌握绘制雷达图的方法将会为生活和工作带来乐趣. 本例数据来源于网络,某大学本科一年级不同分院学生在五种核心通识能力方面的数据,使用多个工具来绘制多级雷达图 ...
echarts雷达图怎么给每个拐点设置不同的颜色
前言最近有这样的需求需要用到echarts的雷达图然后这不是主要的,因为基本的配置官网上都是有的,但是需求要求雷达图的每个拐点要有不同的颜色,这样比较有特色,我...最后在官网找了半天发现还是只 ...

【前端echatrs图表框架】使用echarts实现雷达图

【前端echatrs图表框架】使用echarts实现雷达图相关推荐

最新文章

热门文章