调整雷达图

首先是具体对于雷达图的要求 

相应的要求难点主要集中于 

 这个  标签的大小的调整通常不进行调整他会按照自定义的格式进行调整,但按要求来说的话是不符合的这是需要注意到的一点

需要在legend中设置下面参数进行调整

    itemWidth : 17,itemHeight: 15

 二

y轴上的刻度数标也是很容易遗忘的

在  radar中添加一下内容,按照自己的需求进行调整

  indicator: [{ text: '工作经验', max: 100 ,axisLabel:{show : true}},{ text: '能力需求', max: 100 },{ text: '学历要求', max: 100 },{ text: '薪资待遇', max: 100 },{ text: '地区分布', max: 100 },{ text: '企业规模', max: 100 }]

需要注意的是可以直接添加如下面的内容

但得到的效果是全局的这个可以按照自己的需求进行适当调整

对于雷达图渐变色和透明度是一定要进行设置是否则出来的效果是非常不尽人意的

颜色的堆叠以及颜色的互冲会对效果图照成严重的影响严重影响美观

可以设置下面的参数调整透明度

 areaStyle: {color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [{color: 'rgba(0,0, 255,0.5)',offset: 0},])}

调整后在进行对比可以看出有很大的区别 

最后所有代码马上呈上

代码可能会有很多拖拉,但我认为这可以很好展现代码的整体需求,方便阅读和修改

<template><div id="myBar" style="width: 500px; height: 800px;padding-left: 37%; padding-top: 50px;" ></div>
</template>
<script setup>
import { onMounted } from 'vue'; 
import * as echarts from "echarts";  
onMounted(()=>{const myBarChart = echarts.init(document.getElementById("myBar"));  
let option = {title: {text: 'JAVA开发工作的介绍',left:"center",top:100},tooltip: {trigger: 'axis'},legend: {data: ['JAVA开发1', 'JAVA开发2','JAVA开发3','JAVA开发4'],left:"center",top:750,itemWidth : 17,itemHeight: 15},radar: [{indicator: [{ text: '工作经验', max: 100 ,axisLabel:{show : true}},{ text: '能力需求', max: 100 },{ text: '学历要求', max: 100 },{ text: '薪资待遇', max: 100 },{ text: '地区分布', max: 100 },{ text: '企业规模', max: 100 }],radius: 180,center: ['50%', '60%'],axisName: {color: '#000000'},},],series: [{type: 'radar',tooltip: {trigger: 'item'},areaStyle: { },data: [{value: [60, 73, 85, 40,50,100],name: 'JAVA开发1',areaStyle: {color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [{color: 'rgba(0,0, 255,0.5)',offset: 0},])}},{value: [80, 63, 100, 80,90,10],name: 'JAVA开发2',color: 'rgba(1, 1, 1, 0.6)',areaStyle: {color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [{color: 'rgba(0,255, 0,0.5)',offset: 0},])}},{value: [20, 53, 10, 100,70,50],name: 'JAVA开发3',color: 'rgba(255, 228, 52, 0.6)',areaStyle: {color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [{color: 'rgba(255,153, 51,0.5)',offset: 0},])}},{value: [70, 53, 60, 40,100,70],name: 'JAVA开发4',color: 'rgba(255, 228, 52, 0.6)',areaStyle: {color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [{color: 'rgba(255,51, 51,0.5)',offset: 0},])}}]},]
};
myBarChart.setOption(option)
})
</script>

欢迎各位大佬批评指导

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Github上传大文件(>25MB)教程

0.在github中创建新的项目&#xff08;已创建可忽略这一步&#xff09; 如上图所示&#xff0c;点击New repository 进入如下页面&#xff1a; 1.下载Git LFS 下载git 2.打开gitbash 3.上传文件&#xff0c;代码如下: cd upload #进入名为upload的文件夹&#xff0c;提前…

计算机网络针对交换机的配置

实验 目的 交换机的基本配置&#xff0c;交换机VLAN配置 实验条件 Windows&#xff0c;Cisco packet tracer 实验 内容 交换机的基本配置&#xff0c;交换机VLAN配置 实验 过程 一、交换机的基本配置 进入特权模式 Switch>enable 进入配置模式 Switch#configure ter…

亚马逊美国站加热垫标准UL130测试要求

加热垫上架亚马逊需要由ISO 17025 认可的实验室出具的UL130检测报告。亚马逊要求销售的电子产品&#xff0c;必须经过检测符合标准才可以上架。 UL130的测试项目&#xff1a; 1. 电气性能测试&#xff1a;测试坐垫加热器的电流、电压、功率等参数&#xff0c;以评估其安全性能…

Activity——idea(2020以后)配置actiBPM

文章目录 前言jar下载idea 安装本地扩展插件 前言 2020及之后版本的idea中&#xff0c;未维护对应的actiBPM扩展插件。如果需要安装该插件&#xff0c;则需要使用本地导入 jar的方式。 jar下载 访问官方网站&#xff0c;搜索对应的actiBPM扩展插件。 https://plugins.jetbra…

基于R语言lavaan结构方程模型(SEM)技术教程

原文链接&#xff1a;基于R语言lavaan结构方程模型&#xff08;SEM&#xff09;技术教程https://mp.weixin.qq.com/s?__bizMzUzNTczMDMxMg&mid2247596681&idx4&sn08753dd4d3e7bc492d750c0f06bba1b2&chksmfa823b6ecdf5b278ca0b94213391b5a222d1776743609cd3d14…

面板数据回归模型(二)房价的影响因素分析

1.数据来源 本文选择我国出一线城市房价均值、新一线城市房价均值、二线城市房价均值、货币供应量和利率。选取2002-2018年的数据,共17组数据,由于数据的自然对数变换不改变原有的协整关系,并能使其趋势线性化,消除时间序列中存在的异方差现象,所以对所有数据取其自然对数…

【Sentinel的限流使用】⭐️SpringBoot整合Sentinel实现Api的限流

目录 前言 一、Sentinel下载 二、SpringBoot 整合 Sentinel 三、流控规则 章末 前言 小伙伴们大家好&#xff0c;上次使用OpenFeign时用到了 Hystrix实现熔断和限流的功能&#xff0c;但是发现该工具已经停止维护了&#xff0c;于是想到了Spring Cloud Alibaba开发的Sentin…

2.基础乐理-唱名的来历,简谱的构造

前置内容&#xff1a;1.唱名与记住唱名的方法 唱名的来历&#xff1a; 很久很久以前&#xff08;公元前&#xff09;各个文明开始诞生和慢慢发展&#xff0c;随着文明的发展&#xff0c;各个文明都开始出现自己的音乐&#xff0c;根据考古学家的发现在 公元前1800年&#xff…

深度学习学习日记4.8(下午)

1.softmax 函数的得出的结果是样本被预测到每个类别的概率&#xff0c;所有类别的概率相加总和等于1。使用 softmax 进行数据归一化&#xff0c;将数字转换成概率。 2.熵&#xff0c;不确定性&#xff0c;越低越好 3.KL 散度交叉熵-信息熵 预测越准&#xff0c;交叉熵越小&am…

pymilvus创建IVF_PQ向量索引

索引简介 索引的作用是加速大型数据集上的查询。 目前&#xff0c;向量字段仅支持一种索引类型&#xff0c;即只能创建一个索引。 milvus支持的向量索引类型大部分使用近似最近邻搜索算法(ANNS,approximate nearest neighbors search) 。ANNS 的核心思想不再局限于返回最准确…

NCI SEER breast cancer美国国立癌症研究所数据库乳腺癌生存分析和乳腺癌预测模型(2024年新项目)

​作者Toby&#xff0c;来源公众号&#xff1a;python生物信息学,美国国立癌症研究所数据库乳腺癌生存分析和乳腺癌预测模型 NCI美国国立癌症研究所(NationalCancerInstitute,NCI) 美国国立癌症研究所&#xff08;NCI&#xff09;是美国国家卫生研究院&#xff08;NIH&#xf…

职场必备!微信自动回复神器来袭,让你轻松应对消息轰炸!

随着消息数量的增加&#xff0c;对于个人和企业来说&#xff0c;及时回复消息变得越来越具有挑战性。幸运的是&#xff0c;现在有了微信管理系统&#xff0c;为我们提供了一种解决方案&#xff0c;让您轻松管理和应对客户的消息&#xff01; 下面&#xff0c;让我们来看看微信…