【echarts】雷达图参数详细介绍

news2024/11/13 8:56:43

1. 详细示例

在这里插入图片描述

var option = {
  tooltip: {
  	 trigger: 'item'
  },
  radar: {
    startAngle: 90,//第一个指示器轴的角度,默认90
    indicator: [// 指示器
      { name: 'Category A', max: 220 },// name:指示器名称
      { name: 'Category B', max: 200 },// max:指示器的最大值,可选,建议设置
      { name: 'Category C', max: 100 },
      { name: 'Category D', max: 100, color: 'red' }, //标签特定的颜色
      { name: 'Category E', max: 70 }
    ],
    nameGap:12,//指示器名称和指示器轴的距离,默认15
    center: ['50%', '50%'],//雷达图的中心位置
    radius: '60%',// 半径
    splitNumber: 5, // 分隔段数, 默认5
    shape: 'circle', // 雷达图绘制类型: 'polygon'(默认) / 'circle'
    splitArea: {
      //分隔区域
      show: true, // 是否显示分隔区域, 默认true
      areaStyle: {
        // 分隔区域的样式 (淡蓝色)
        color: 'rgba(135, 206, 235, 0.2)'
      }
    },
    splitLine: {
      //分隔线
      show: true, //默认数值轴显示,类目轴不显示
      lineStyle: {
        // 分隔线的样式 (淡蓝色)
        color: 'rgba(255, 0, 255, 0.2)'
      }
    },
    axisLine: {
      // 坐标轴轴线
      show: true, //是否显示坐标轴轴线, 默认true
      // symbol: ['none', 'arrow'], // 轴线两边的箭头, 默认'none'
      lineStyle: {
        // 坐标轴轴线样式
        color: 'rgba(84, 112, 198, 0.6)'
      }
    },
    axisLabel: {// 坐标轴刻度标签
      show: true,// 是否显示刻度标签
      fontSize: 9,//字体大小

    }
  },
  series: [// 数据系列
    {
      type: 'radar',
      data: [// 具体数值
        {
          value: [90, 80, 70, 60, 50],//单个数据项的数值
          name: 'Data 1'//数据项名称,
          symbol:'rect',//单个数据标记的图形,默认circle
        },
          {
          value: [180, 200, 90, 80, 40],
          name: 'Data 2'
        }
        
      ]
    }
  ]
};

2. 基础示例

const option = {
  tooltip:{},
    radar: {
        indicator: [// 雷达图的指示器,每个指示器对应一个维度
        	//name:指示器名称 
            { name: 'Category A',max:220 },//max:指示器的最大值(可选
            { name: 'Category B' ,max:50},
            { name: 'Category C' },
            { name: 'Category D' },
            { name: 'Category E' }
        ],
        center: ['50%', '50%'],
        radius: '60%'
    },
    series: [{
        type: 'radar',
        data: [
            {
                value: [90, 80, 70, 60, 50],
                name: 'Data 1'
            }
        ]
    }]
};

max详解:图上的点是相对于这个最大值显示的,如果一个指示器的最大值比数值要小,就会如下图Category B一样。
在这里插入图片描述

注意: 如果只有一个数据时(一个指示器),在雷达图绘制类型默认为: polygon时无法显示区域,要手动将shape设置为circle
举个栗子:

// 雷达图绘制类型为默认polygon时
option = {
    radar: {
        indicator: [
            { name: 'Category A',max:220 },
        ],
        center: ['50%', '50%'],
        radius: '60%'
    },
    series: [{
        type: 'radar',
        data: [
            {
                value: [90],
                name: 'Data 1'
            }
        ]
    }]
};

在这里插入图片描述

option = {
    radar: {
       shape: 'circle',// 雷达图绘制类型设置为circle
        indicator: [
            { name: 'Category A',max:220 },
        ],
        center: ['50%', '50%'],
        radius: '60%'
    },
    series: [{
        type: 'radar',
        data: [
            {
                value: [90],
                name: 'Data 1'
            }
        ]
    }]
};

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1370155.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【JAVA】throw 和 throws 的区别?

🍎个人博客:个人主页 🏆个人专栏: JAVA ⛳️ 功不唐捐,玉汝于成 目录 前言 正文 throw: throws: 区别: 作用: 使用位置: 个数: 应…

第1章 初识JavaScript

学习目标 了解JavaScript基本概念,能够说出JavaScript的作用、由来、组成和特点 熟悉常见浏览器的特点,能够说出浏览器的组成以及作用 掌握下载和安装Visual Studio Code编辑器,能够独立完成编辑器的下载和安装 掌握JavaScript代码引入方式…

【forwardRef与useImperativeHandle】

1、 2、 3、 4、代码 1、index.tsx代码 import React, {useRef, useEffect} from react import MyInput from "./InputItem";export default function Index() {const ref useRef<any>(null);useEffect(() > {ref.current?.focus();}, [])return (<&…

安达发|APS计划与排程软件之超级BOM功能

在制造业中&#xff0c;物料清单&#xff08;BOM&#xff09;是一个重要的概念&#xff0c;它描述了产品的组成结构和各个部件之间的关系。随着制造业的发展&#xff0c;对于生产计划和排程的要求也越来越高&#xff0c;因此APS&#xff08;高级计划与排程&#xff09;软件应运…

2023年,To B资本航船走向哪了?

国内To B领域在去掉泡沫、结束资本狂欢之后&#xff0c;投资决策愈加理性。但与此同时&#xff0c;下滑的步伐正在放慢&#xff0c;交易数量和金额的降低逐渐放缓&#xff0c;市场逐渐走向稳定。 作者|斗斗 编辑|皮爷 出品|产业家 2023年&#xff0c;在一众业内人士的眼中&…

openai API key 提示你的卡被拒绝怎么办?

openai API key 对于IP的要求非常的严格&#xff0c;以前你开腾讯云、阿里云的服务器都可以绑定、现在就不行了&#xff0c;一定要纯净的IP才可以绑定 一、排除法 1、首先确保自己的账号是没有被封的&#xff0c;可以正常使用的 2、确保银行卡是可以支持openai的银行卡 3、…

IDEA的lombok失效导致工程代码编译build失败的问题处理

今天也是奇了怪了&#xff0c;打包工程&#xff0c;编译始终失败&#xff0c;明明代码符号存在的 解决办法就是&#xff1a;-Djps.track.ap.dependenciesfalse

嵌入式(八)电源低功耗管理 | 五种运行模式 模式转换 睡眠定时器唤醒

文章目录 1 低功耗基本介绍1.1 五种运行模式 2 低功耗控制相关寄存器3 睡眠唤醒实现方式3.1 系统睡眠定时器唤醒 1 低功耗基本介绍 对于嵌入式系统而言&#xff0c;一个非常重要的内容就是低功耗&#xff0c;尽可能减少电量损耗&#xff0c;然后获得更多的续航时间 当然功耗越…

UG装配-布置

UG装配中&#xff0c;当一个产品在不同情况下具有不同的形态的时候&#xff0c;为了快速进行展示&#xff0c;我们可以使用布置命令. 我们可以直接在工具栏布置中&#xff0c;或者在装配导航器中右键单击装配体&#xff0c;选择布置-编辑&#xff0c;添加不同不同的布置页面 使…

模拟算法(模拟算法 == 依葫芦画瓢)万字

模拟算法 基本思想引入算法题替换所有的问号提莫攻击Z字形变换外观数列数青蛙 基本思想 模拟算法 依葫芦画瓢解题思维要么通俗易懂&#xff0c;要么就是找规律&#xff0c;主要难度在于将思路转换为代码。 特点&#xff1a;相对于其他算法思维&#xff0c;思路比较简单&#x…

Docker简介、基本概念和安装

Docker简介、基本概念和安装 1.docker简介 1.1 什么是docker Docker 最初是 dotCloud 公司创始人 Solomon Hykes (opens new window)在法国期间发起的一个公司内部项目&#xff0c;它是基于 dotCloud 公司多年云服务技术的一次革新&#xff0c;并于 2013 年 3 月以 Apache 2…

Power BI - 5分钟学习修改数据类型

每天5分钟&#xff0c;今天介绍Power BI修改数据类型 Power BI加载数据时&#xff0c;会尝试将源列的数据类型转换为更高效的存储、计算和数据可视化的数据类型。 例如&#xff0c;如果从Excel导入的值的列没有小数值&#xff0c;Power BI Desktop会将整个数据列转换为整数数据…

HCIA-Datacom题库(自己整理分类的)_17_简单的命令判断【11道题】

1.华为AR路由器的命令行界面下&#xff0c;save命令的作用是保存当前的系统时间。 解析&#xff1a;Save保存配置 2.VRP界面下&#xff0c;使用命令delete vrpcfg.zp删除文件&#xff0c;必须在回收站中清空&#xff0c;才能彻底删除文件。√ 解析&#xff1a;delete删除到回…

“高端”的位运算

王有志&#xff0c;一个分享硬核Java技术的互金摸鱼侠加入Java人的提桶跑路群&#xff1a;共同富裕的Java人 原计划迭代作为预备知识的收尾&#xff0c;不过在解2的幂和4的幂时&#xff0c;想到关于数字2的问题可以通过位运算去解决&#xff0c;因此补充了关于位运算的内容。 …

Spring循环引用和三级缓存

前言 Spring 解决 Bean 之间的循环引用关系用到了三级缓存&#xff0c;那么问题来了。三级缓存是怎么用的&#xff1f;每一层的作用是什么&#xff1f;非得用三级吗&#xff1f;两级缓存行不行&#xff1f; 理解循环引用 所谓的“循环引用”是指 Bean 之间的依赖关系形成了一…

什么事“网络水军”?他们的违法活动主要有四种形式

我国治理网络水军&#xff0c;包括造谣引流、舆情敲诈、刷量控评、有偿删帖等各类“网络水军”等违法犯罪活动已经许久。 日前&#xff0c;官方召开新闻发布会&#xff0c;公布了相关的一些案件进程&#xff0c;今年已累计侦办相关案件339起&#xff0c;超过历年的全年侦办案件…

开启Android学习之旅-6-实战答题App

不经过实战&#xff0c;看再多理论&#xff0c;都是只放在笔记里&#xff0c;活学活用才是硬道理。同时开发应用需要循序渐进&#xff0c;一口气规划300个功能&#xff0c;400张表&#xff0c;会严重打击自己的自信。这里根据所学的&#xff0c;开发一个答题App。 题库需求分析…

Linux 系统之部署 ZFile 在线网盘服务

一、ZFile 介绍 1&#xff09;ZFile 简介 官网&#xff1a;https://www.zfile.vip/ GitHub&#xff1a;https://github.com/zfile-dev/zfile ZFile 是一款基于 Java 的在线网盘程序&#xff0c;支持对接 S3、OneDrive、SharePoint、又拍云、本地存储、FTP 等存储源&#xff0…

精彩推荐 |【Java技术专题】「重塑技术功底」攻破Java技术盲点之剖析动态代理的实现原理和开发指南(中)

攻破Java技术盲点之剖析动态代理的实现原理和开发指南 前提介绍技术回顾回顾问题分析代理对象实现了什么接口代理对象的方法体是什么 CGLIB动态代理CGLIB的原理继承方式 为什么要用CGLIB建立被代理的类cglib拦截器类测试类易错点&#xff1a;CGLIB的invoke和invokeSuper的区分i…

【2024最新-python3小白零基础入门】No1.python简介以及环境搭建

文章目录 一 python3 简介二 python语言的特点三 python安装四 安装开发工具-pycharm五 新建一个python项目1.新建项目2 配置虚拟环境3 运行项目 一 python3 简介 Python 是一个高层次的结合了解释性、编译性、互动性和面向对象的脚本语言。 Python 的设计具有很强的可读性&a…