当前位置: 首页 > 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…...

渗透实战PortSwigger靶场-XSS Lab 14:大多数标签和属性被阻止

<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet&#xff1a; https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...

【磁盘】每天掌握一个Linux命令 - iostat

目录 【磁盘】每天掌握一个Linux命令 - iostat工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景 注意事项 【磁盘】每天掌握一个Linux命令 - iostat 工具概述 iostat&#xff08;I/O Statistics&#xff09;是Linux系统下用于监视系统输入输出设备和CPU使…...

Spring数据访问模块设计

前面我们已经完成了IoC和web模块的设计&#xff0c;聪明的码友立马就知道了&#xff0c;该到数据访问模块了&#xff0c;要不就这俩玩个6啊&#xff0c;查库势在必行&#xff0c;至此&#xff0c;它来了。 一、核心设计理念 1、痛点在哪 应用离不开数据&#xff08;数据库、No…...

Device Mapper 机制

Device Mapper 机制详解 Device Mapper&#xff08;简称 DM&#xff09;是 Linux 内核中的一套通用块设备映射框架&#xff0c;为 LVM、加密磁盘、RAID 等提供底层支持。本文将详细介绍 Device Mapper 的原理、实现、内核配置、常用工具、操作测试流程&#xff0c;并配以详细的…...

rnn判断string中第一次出现a的下标

# coding:utf8 import torch import torch.nn as nn import numpy as np import random import json""" 基于pytorch的网络编写 实现一个RNN网络完成多分类任务 判断字符 a 第一次出现在字符串中的位置 """class TorchModel(nn.Module):def __in…...

Linux C语言网络编程详细入门教程:如何一步步实现TCP服务端与客户端通信

文章目录 Linux C语言网络编程详细入门教程&#xff1a;如何一步步实现TCP服务端与客户端通信前言一、网络通信基础概念二、服务端与客户端的完整流程图解三、每一步的详细讲解和代码示例1. 创建Socket&#xff08;服务端和客户端都要&#xff09;2. 绑定本地地址和端口&#x…...

iOS性能调优实战:借助克魔(KeyMob)与常用工具深度洞察App瓶颈

在日常iOS开发过程中&#xff0c;性能问题往往是最令人头疼的一类Bug。尤其是在App上线前的压测阶段或是处理用户反馈的高发期&#xff0c;开发者往往需要面对卡顿、崩溃、能耗异常、日志混乱等一系列问题。这些问题表面上看似偶发&#xff0c;但背后往往隐藏着系统资源调度不当…...

通过MicroSip配置自己的freeswitch服务器进行调试记录

之前用docker安装的freeswitch的&#xff0c;启动是正常的&#xff0c; 但用下面的Microsip连接不上 主要原因有可能一下几个 1、通过下面命令可以看 [rootlocalhost default]# docker exec -it freeswitch fs_cli -x "sofia status profile internal"Name …...

【C++】纯虚函数类外可以写实现吗?

1. 答案 先说答案&#xff0c;可以。 2.代码测试 .h头文件 #include <iostream> #include <string>// 抽象基类 class AbstractBase { public:AbstractBase() default;virtual ~AbstractBase() default; // 默认析构函数public:virtual int PureVirtualFunct…...

C++11 constexpr和字面类型:从入门到精通

文章目录 引言一、constexpr的基本概念与使用1.1 constexpr的定义与作用1.2 constexpr变量1.3 constexpr函数1.4 constexpr在类构造函数中的应用1.5 constexpr的优势 二、字面类型的基本概念与使用2.1 字面类型的定义与作用2.2 字面类型的应用场景2.2.1 常量定义2.2.2 模板参数…...