关于echarts的雷达图比较详细的参数说明

要实现的效果图如下：

接下来主要关于下面的几个参数进行设置
1. 雷达图的圈数
2. 雷达图每圈上面的数字
3. 雷达图区域拐点的数值
4. 雷达图拐点的样式
5. 雷达图每个区域的颜色设置
6. 雷达图tooltip限制在图表区域内
7. 鼠标可以移动到tooltip里，一般需要在tooltip中加入可操作元素时有用
8. 雷达图背景颜色透明

 export const industryFactorOption = {title: {text: '雷达图',textStyle: {color: 'rgba(221,221,221,1)', //标题颜色fontSize: 14,lineHeight: 20,}, // 标题的位置，此时放在图的底边left: 'center',top: 'bottom',}, // 图表的位置grid: {position: 'center',},tooltip : { //雷达图的tooltip不会超出div，也可以设置position属性，position定位的tooltip 不会随着鼠标移动而位置变化，不友好confine: true,enterable: true, //鼠标是否可以移动到tooltip区域内},radar: {shape: 'circle',splitNumber: 3, // 雷达图圈数设置name: {textStyle: {color: '#838D9E',},}, // 设置雷达图中间射线的颜色axisLine: {lineStyle: {color: 'rgba(131,141,158,.1)',},},indicator: [{name: '通信', max: 30, //若将此属性放在radar下，则每条indicator都会显示圈上的数值，放在这儿，只在通信这条indicator上显示axisLabel: {show: true,fontSize: 12,color: '#838D9E',showMaxLabel: false, //不显示最大值，即外圈不显示数字30showMinLabel: true, //显示最小数字，即中心点显示0},},{ name: '零售', max: 30},{ name: '电力', max: 30},{ name: '交通', max: 30},{ name: '食品', max: 30},{ name: '建筑', max: 30},{ name: '银行', max: 30},{ name: '汽车', max: 30},{ name: '电子工程', max: 30},], //雷达图背景的颜色，在这儿随便设置了一个颜色，完全不透明度为0，就实现了透明背景splitArea : {show : false,areaStyle : {color: 'rgba(255,0,0,0)', // 图表背景的颜色},},splitLine : {show : true,lineStyle : {width : 1,color : 'rgba(131,141,158,.1)', // 设置网格的颜色},},},series: [{name: '雷达图', // tooltip中的标题type: 'radar', //表示是雷达图symbol: 'circle', // 拐点的样式，还可以取值'rect','angle'等symbolSize: 8, // 拐点的大小areaStyle: {normal: {width: 1,opacity: 0.2,},},data: [{value: [17, 24, 27, 29, 26, 16, 13, 17, 25],name: '2018-07', // 设置区域边框和区域的颜色itemStyle: {normal: {color: 'rgba(255,225,0,.3)',lineStyle: {color: 'rgba(255,225,0,.3)',},},}, //在拐点处显示数值label: {normal: {show: true,formatter: (params: any) => {return params.value},},},},{value: [5, 20, 19, 11, 22, 17, 8, 19, 16],name: '',itemStyle: {normal: {color: 'rgba(60,135,213,.3)',lineStyle: {width: 1,color: 'rgba(60,135,213,.3)',},},},},{value: [7, 18, 19, 13, 22, 17, 8, 25, 9],name: '',itemStyle: {normal: {color: 'rgba(255,74,74,.3)',lineStyle: {width: 1,color: 'rgba(255,74,74,.3)',},},},},],}],
}

还想实现鼠标移动到indicator上面，显示这条轴上的数据，如下图：若有人可以实现，麻烦告知

关于echarts的雷达图比较详细的参数说明相关推荐

JS Echarts之雷达图 | 使用Excel画雷达图
文章目录第一部分:JS Echarts之雷达图 1. 什么是 Echarts 2. JS Echarts之雷达图 2.1 使用Echarts画雷达图 2.3 echarts雷达图中常用修改修改in ...
Echarts雷达图的详细配置
写一个完整的雷达图需要注意那些,或者要修改那些?大约一共这些我将代码放下在官网可以自己根据备注自己调试 option = {backgroundColor:'#000',radar: {// sh ...
使用echarts实现雷达图
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding= ...
【前端echatrs图表框架】使用echarts实现雷达图
一个学生在大学四年中所修的所有课程可以分为素质必修课,核心必修课,一般必修课,通识必修课,通识限选课5种,通过雷达图,导入学生在每一种课程的平均绩点,即可清晰地显示一个同学的综合发展情况了. 代码如下 ...
echarts radar雷达图常规使用
<div id="idRadar"></div> data() {return {// 雷达图optionRadar: {color: '#1890FF', ...
echarts实现雷达图
这里提供两种效果,都是对官网的demo进行一点的改进,这里放上官网链接,有不清楚的参数可直接查阅->echarts官网.话不多说,直接上代码: //实现一 initChart() {this.c ...
echarts自定义雷达图（radar）
先来个效果图 1.首先设置形状 shape: "circle", // 支持 'polygon' 和 'circle' ,默认polygon 2.设置线条 splitLine: { ...
python绘制雷达图（详细）
雷达图介绍雷达图是以从同一点开始的轴上表示的三个或更多个定量变量的二维图表的形式显示多变量数据的图形方法.轴的相对位置和角度通常是无信息的. 雷达图也称为网络图,蜘蛛图,星图,蜘蛛网图,不规则多边形 ...
Echarts关于雷达图的一些个性化设置
function test() { let myChart = echarts.init(document.getElementById('levelImage')); ...

关于echarts的雷达图比较详细的参数说明

关于echarts的雷达图比较详细的参数说明相关推荐

最新文章

热门文章