当前位置: 首页 > news >正文

vue+echarts实现雷达图及刻度标注

文章目录

  • 前言
  • 代码实现
  • 实现效果
  • 总结


前言

最近项目有做数据可视化 大屏 不免再次使用些echarts应用 记录下其中echarts雷达图的实现


代码实现

先上代码

<template><div class="container"><div ref="chart" style="width: 500px; height: 500px; margin-top: 20px"></div></div>
</template><script>
export default {name: 'testDemo',data() {return {};},methods: {initChart() {this.chart = this.$echarts.init(this.$refs.chart);const option = {color: ['#FFC481', '#8EC6F8', '#56D8CD'],title: {x: 'center',y: 'center',textStyle: {fontSize: 12,rich: {a: {color: '#0066FF',fontSize: 18,align: 'center',},b: {color: '#00BBFF',fontSize: 12,height: 16,align: 'centerc',},c: {color: 'orange',fontSize: 12,height: 16,align: 'center',},},},},// 配置图例legend: {},radar: {indicator: [{name: '资本背景', max: 100, min: 0, index: 0, axisLabel: {show: true}}, //显示刻度{name: '知识产权', max: 100, min: 0, index: 1},{name: '成长性', max: 100, min: 0, index: 2},{name: '风险状况', max: 100, min: 0, index: 3},{name: '经营质量', max: 100, min: 0, index: 4},{name: '企业规模', max: 100, min: 0, index: 5},],radius: 80, //大小startAngle: 120, // 雷达图的旋转偏移量splitNumber: 5, // 分层5层,当前最大1000,可理解为每层200triggerEvent: true,name: {formatter: (value, indicator) => {// 获取对应的数值const valueAtIndex = this.radarData[indicator.index];return `{a|${value}}: {b|${valueAtIndex}}`; // 显示名称和对应的数值},rich: {a: {color: '#333',fontSize: 12,},b: {color: '#333',fontSize: 12,},},},},textStyle: {color: '#333333',},series: [{type: 'radar',areaStyle: {normal: {//添加阴影效果的配置部分color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{offset: 0, color: 'rgba(255, 196, 129, 0.8)'},{offset: 1, color: 'rgba(255, 196, 129, 0.3)'},]),opacity: 0.8,},},data: [{value: [34,23,34,87,68,67],},],},],};this.chart.setOption(option);}},mounted() {// 等dom渲染后再初始化图表this.initChart()}
};
</script><style scoped>
</style>

实现效果

在这里插入图片描述


总结

initChart方法中,使用this.$echarts.init来初始化一个ECharts实例,并设置图表的配置项option。这些配置项定义了图表的标题、提示框、雷达图的指标、名称的富文本样式、全局文本样式以及系列列表等。最后,通过this.chart.setOption(option)将配置项应用到图表实例上

相关文章:

vue+echarts实现雷达图及刻度标注

文章目录 前言代码实现实现效果总结 前言 最近项目有做数据可视化 大屏 不免再次使用些echarts应用 记录下其中echarts雷达图的实现 代码实现 先上代码 <template><div class"container"><div ref"chart" style"width: 500px; heig…...

【进阶OpenCV】 (9)--摄像头操作--->答题卡识别改分项目

文章目录 项目&#xff1a;答题卡识别改分1. 图片预处理2. 描绘轮廓3. 轮廓近似4. 透视变换5. 阈值处理6. 找每一个圆圈轮廓7. 将每一个圆圈轮廓排序8. 找寻所填答案&#xff0c;比对正确答案8.1 思路8.2 图解8.3 代码体现 9. 计算正确率 总结 项目&#xff1a;答题卡识别改分 …...

实时从TDengine数据库采集数据到Kafka Topic

实时从TDengine数据库采集数据到Kafka Topic 一、认识TDengine二、TDengine Kafka Connector三、什么是 Kafka Connect&#xff1f;四、前置条件五、安装 TDengine Connector 插件六、启动 Kafka七、验证 kafka Connect 是否启动成功八、TDengine Source Connector 的使用九、添…...

Linux -- 初识动静态库

目录 为什么要有库&#xff1f; 静态库 什么是静态库&#xff1f; 特点 优点 缺点 动态库 什么是动态库&#xff1f; 优点 缺点 编译器会选择哪个库&#xff1f; 为什么要有库&#xff1f; 库的存在是为了提高软件开发的效率、促进代码复用以及简化维护工作。通过使用…...

vite 打包前请求接口和打包后的不一致

在使用 Vite 进行项目打包时&#xff0c;如果发现打包前请求接口和打包后的行为不一致&#xff0c;这可能是由于多种原因导致的。以下是一些可能的原因和相应的解决方案&#xff1a; 1. 代理配置问题 开发环境&#xff1a;在开发环境中&#xff0c;Vite 通常使用 vite.config…...

fairseq 安装包python

背景&#xff1a; Collecting fairseq Using cached https://pypi.tuna.tsinghua.edu.cn/packages/d7/0f/b7043b451a97eb9b4cfb1b1e23e567b947d9d7bca542403228bd53b435fe/fairseq-0.12.1.tar.gz (9.6 MB) Installing build dependencies ... done Getting requirements…...

使用Mockaroo生成测试数据

使用Mockaroo生成测试数据 最近在学习【Spring Boot & React】Spring Boot和React教程视频的P51.Generating 1000 students一课中&#xff0c;看到了https://www.mockaroo.com/网站可以用来模拟生成测试数据&#xff0c;觉得还不错&#xff0c;特此记录一下。感觉每次看老…...

使用频率最高的 opencv 基础绘图操作 - python 实现

以下是 opencv-python 基本操作绘制示例&#xff0c;绘制&#xff1a; 1&#xff09;圆&#xff0c;2&#xff09;矩形&#xff0c;3&#xff09;线段&#xff0c;4&#xff09;文本。 安装 opencv-python pip install opencv-python 在图上绘制圆的操作&#xff0c;示例如…...

Python 在Excel中添加数据条

在Excel中添加数据条是一种数据可视化技巧&#xff0c;它通过条形图的形式在单元格内直观展示数值的大小&#xff0c;尤其适合比较同一列或行中各个单元格的数值。这种表示方式可以让大量的数字信息一目了然。本文将介绍如何使用Python在Excel中的指定单元格区域添加数据条。 …...

Unity中搜索不到XR Interaction Toolkit包解决方法

问题&#xff1a; 针对Unity版本2020.3在中PackageManager可能搜素不到XR Interaction Toolkit包 在Package Manager中未显示XR Interaction Toolkit包 解决方法&#xff1a; Package manager左上角&#xff0c;点加号&#xff0c;选择 Add package from git URL..&#xff0c;…...

【前端】JQ验证每个单选按钮是否已经选择

验证每个单选题是否都已经选择&#xff0c;其中每个input中不带name值&#xff0c;直接遍历input[type"radio"]验证 <!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8"> <meta name"viewpor…...

【无人机设计与控制】滑模控制、反步控制、传统PID四旋翼无人机轨迹跟踪控制仿真

摘要 本文基于滑模控制、反步控制和传统PID控制&#xff0c;设计了针对四旋翼无人机的轨迹跟踪控制系统。通过对比这三种控制策略在四旋翼无人机轨迹跟踪中的表现&#xff0c;分析了各自的优缺点和适用场景。仿真结果表明&#xff0c;滑模控制具有更强的鲁棒性&#xff0c;反步…...

MongoDB 介绍

一、MongoDB 介绍 MongoDB 是一个开源的、面向文档的数据库管理系统。它采用了灵活的数据模型&#xff0c;以类似 JSON 的文档形式存储数据&#xff0c;具有高可扩展性、高性能和丰富的功能。 主要特点包括&#xff1a; 灵活的数据模型&#xff1a;文档型数据库允许存储不同…...

计算机网络:物理层 —— 物理层概述

文章目录 物理层功能物理层接口特性常见特性 相关概念 物理层&#xff08;Physical Layer&#xff09;是OSI&#xff08;Open Systems Interconnection&#xff09;模型的第一层&#xff0c;负责提供原始比特流传输的服务。它定义了硬件接口的电气、机械、功能和过程特性&#…...

HTTP的工作原理

HTTP&#xff08;Hypertext Transfer Protocol&#xff09;是一种用于在计算机网络上传输超文本数据的应用层协议。它是构成万维网的基础之一&#xff0c;被广泛用于万维网上的数据通信。&#xff08;超文本(Hypertext)是用超链接的方法&#xff0c;将各种不同空间的文字信息组…...

缓存数据减轻服务器压力

问题:不是所有的数据都需要请求后端的 不是所有的数据都需要请求后端的,有些数据是重复的、可以复用的解决方案:缓存 实现思路:每一个分类为一个key,一个可以下面可以有很多菜品 前端是按照分类查询的,所以我们需要通过分类来缓存缓存代码 /*** 根据分类id查询菜品** @pa…...

【自动驾驶】控制算法(十二)横纵向综合控制 | 从理论到实战全面解析

写在前面&#xff1a; &#x1f31f; 欢迎光临 清流君 的博客小天地&#xff0c;这里是我分享技术与心得的温馨角落。&#x1f4dd; 个人主页&#xff1a;清流君_CSDN博客&#xff0c;期待与您一同探索 移动机器人 领域的无限可能。 &#x1f50d; 本文系 清流君 原创之作&…...

Python基础之List列表用法

1、创建列表 names ["张三","李四","王五","Mary"] 2、列表分片 names[1]&#xff1a;获取数组的第2个元素。 names[1:3]&#xff1a;获取数组的第2、第3个元素。包含左侧&#xff0c;不包含右侧。 names[:3]等同于names[0:3]&…...

视觉检测开源库-功能包框架搭建

chapt9/chapt9_ws/src&#xff0c;接着在目录下新建 yolov5_ros2 功能包&#xff0c;并添加相关依赖&#xff0c;完整命令如下&#xff1a; ros2 pkg create yolov5_ros2 --build-type ament_python --dependencies rclpy yolov5 cv_bridge sensor_msgs vision_msgs cv2 --lic…...

pytest的基础入门

pytest判断用例的成功或者失败 pytest识别用例失败时会报AssertionError或者xxxError错误&#xff0c;当捕获异常时pytest无法识别到失败的用例 pytest的fixture夹具 pytest的参数化 #coding:utf-8 import pytestfrom PythonProject.pytest_test.funcs.guess_point import ge…...

IntelliJ IDEA 安装与环境配置指南(2026 最新)

IntelliJ IDEA 是 Java 开发首选 IDE&#xff0c;社区版免费开源、旗舰版功能更全&#xff1b;IDE 内置 JBR 运行环境&#xff0c;开发 Java 项目需单独配置 JDK。以下是完整安装与配置流程。 一、安装前准备 1. 系统要求&#xff08;2026 官方&#xff09; 表格 配置项最低…...

3分钟彻底搞定Axure RP汉化:免费中文语言包完整指南

3分钟彻底搞定Axure RP汉化&#xff1a;免费中文语言包完整指南 【免费下载链接】axure-cn Chinese language file for Axure RP. Axure RP 简体中文语言包&#xff0c;不定期更新。支持 Axure 9、Axure 10。 项目地址: https://gitcode.com/gh_mirrors/ax/axure-cn 还在…...

在大厂工作,一旦开窍后,你会爽死…

在职场尤其是大厂里&#xff0c;沟通能力往往比硬实力更能决定你的发展节奏。很多时候&#xff0c;同样一件事&#xff0c;不同的说法&#xff0c;会带来完全不同的结果。下面这8个高频职场场景&#xff0c;对应的高情商话术&#xff0c;帮你轻松化解尴尬、刷好感&#xff0c;还…...

4步完整指南:如何用OpenCore Legacy Patcher让旧Mac重获新生

4步完整指南&#xff1a;如何用OpenCore Legacy Patcher让旧Mac重获新生 【免费下载链接】OpenCore-Legacy-Patcher Experience macOS just like before 项目地址: https://gitcode.com/GitHub_Trending/op/OpenCore-Legacy-Patcher 想让被苹果抛弃的旧Mac电脑重新运行最…...

NaViL-9B参数详解教程:max_new_tokens与temperature协同调优

NaViL-9B参数详解教程&#xff1a;max_new_tokens与temperature协同调优 1. 认识NaViL-9B多模态大模型 NaViL-9B是上海人工智能实验室研发的原生多模态大语言模型&#xff0c;它不仅能处理纯文本问答&#xff0c;还能理解图片内容。这个模型特别适合需要同时处理文字和图像信…...

如何在5分钟内开始使用Ivy Wallet:新手入门教程

如何在5分钟内开始使用Ivy Wallet&#xff1a;新手入门教程 【免费下载链接】ivy-wallet Ivy Wallet is an open-source money manager app for android that you can either build or download from Google Play. 项目地址: https://gitcode.com/gh_mirrors/iv/ivy-wallet …...

M2LOrder模型在STM32项目中的潜在应用:边缘设备情绪反馈

M2LOrder模型在STM32项目中的潜在应用&#xff1a;边缘设备情绪反馈 最近在捣鼓一个基于STM32的智能硬件项目&#xff0c;想给它加点“人情味”。比如&#xff0c;当用户对它说话时&#xff0c;它能感知到用户的情绪是开心还是沮丧&#xff0c;并给出更贴切的反馈。这听起来很…...

PKSM终极指南:从第一世代到第八世代的宝可梦存档管理神器

PKSM终极指南&#xff1a;从第一世代到第八世代的宝可梦存档管理神器 【免费下载链接】PKSM Gen I to GenVIII save manager. 项目地址: https://gitcode.com/gh_mirrors/pk/PKSM PKSM是一款功能强大的免费开源宝可梦存档管理工具&#xff0c;支持从第一世代到第八世代的…...

Llama-3.2V-11B-cot与Dify集成:零代码构建企业AI智能体

Llama-3.2V-11B-cot与Dify集成&#xff1a;零代码构建企业AI智能体 最近和几个做企业服务的朋友聊天&#xff0c;大家普遍有个感觉&#xff1a;现在AI模型能力越来越强&#xff0c;但真要把它们用起来&#xff0c;门槛还是有点高。特别是对于业务部门的人来说&#xff0c;看着…...

多任务学习进阶:从MMoE到PLE的模型演进与实战解析

1. 多任务学习基础与核心挑战 多任务学习&#xff08;Multi-Task Learning, MTL&#xff09;是机器学习领域的一个重要分支&#xff0c;它让单个模型同时学习多个相关任务。想象一下&#xff0c;你正在教一个学生同时学习数学和物理。如果这两个学科有共同的基础概念&#xff0…...