echarts radar雷达图常规使用

<div id="idRadar"></div>

data() {return {// 雷达图optionRadar: {color: '#1890FF',fontSize: 16,grid: {//绘图网格left: '0',right: '0',top: '0',bottom: '10',containLabel: true},title: {},radar: [{// shape: 'circle', // 打开可设置雷达图为圆形indicator: [{ name: '专注度70', max: 100, min: 0 },{ name: '参与度84', max: 100, min: 0 },{ name: '课堂纪律88', max: 100, min: 0 },{ name: '学习成就69', max: 100, min: 0 },{ name: '愉悦度89', max: 100, min: 0 }],radius: 98   // 雷达图缩放大小}],series: [{type: 'radar',data: [{value: [70,84,88,69,89],  // 展示的值}],areaStyle: {   // 阴影部分设置color: '#5BC7F9',opacity: 0.3}}]},}}

methods: {performanceRadar() {let chartRadar = document.getElementById('idRadar')  // div容器id为‘idRadar’let myRadar = echarts.init(chartRadar)this.optionRadar && myRadar.setOption(this.optionRadar)},

 this.performanceRadar() 调用可在页面初始化的时候mounted 调用，如果是请求到的数据进行赋值，那么在赋值后需要调用才能展示赋值后的数据。

赋值方法
this.optionRadar.series[0].data[0].value = optionRadarData  // 雷达图的数据[]this.optionRadar.radar[0].indicator[0].name = '专注度' + focusIndexScore  // 雷达图外层 文字+ 想要展示的具体数据this.optionRadar.radar[0].indicator[1].name = '参与度' + participationScorethis.optionRadar.radar[0].indicator[2].name = '课堂纪律' + disciplineScorethis.optionRadar.radar[0].indicator[3].name ='学习成就' + achievementScorethis.optionRadar.radar[0].indicator[4].name ='愉悦度' + cheerFulnessScore

echarts radar雷达图常规使用相关推荐

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= ...
【前端echatrs图表框架】使用echarts实现雷达图
一个学生在大学四年中所修的所有课程可以分为素质必修课,核心必修课,一般必修课,通识必修课,通识限选课5种,通过雷达图,导入学生在每一种课程的平均绩点,即可清晰地显示一个同学的综合发展情况了. 代码如下 ...
echarts实现雷达图
这里提供两种效果,都是对官网的demo进行一点的改进,这里放上官网链接,有不清楚的参数可直接查阅->echarts官网.话不多说,直接上代码: //实现一 initChart() {this.c ...
关于echarts的雷达图比较详细的参数说明
要实现的效果图如下: 接下来主要关于下面的几个参数进行设置 1. 雷达图的圈数 2. 雷达图每圈上面的数字 3. 雷达图区域拐点的数值 4. 雷达图拐点的样式 5. 雷达图每个区域的颜色设置 6. 雷 ...
Echarts关于雷达图的一些个性化设置
function test() { let myChart = echarts.init(document.getElementById('levelImage')); ...
Echarts数据可视化series-radar雷达图，开发全解+完美注释
全栈工程师开发手册 (作者:栾鹏) Echarts数据可视化开发代码注释全解 Echarts数据可视化开发参数配置全解 6大公共组件详解(点击进入): title详解. tooltip详解.toolb ...
echarts雷达图怎么给每个拐点设置不同的颜色
前言最近有这样的需求需要用到echarts的雷达图然后这不是主要的,因为基本的配置官网上都是有的,但是需求要求雷达图的每个拐点要有不同的颜色,这样比较有特色,我...最后在官网找了半天发现还是只 ...

echarts radar雷达图常规使用

echarts radar雷达图常规使用相关推荐

最新文章

热门文章