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

已实现:vue、h5项目如何使用echarts实现雷达图、六边形图表

说实话,要说图表里,最强的应该属于echarts了,不管是接入难度上,还是样式多样性上,还有社区庞大程度上,都是首屈一指的,反观有的人习惯用chart.js了,这个无可厚非,但是如果你刚开始研究,我一定建议你直接用echarts吧。今天我已雷达图为例,展示一下echarts雷达图的实现,先看看运行截图吧,然后我直接帖代码。
在这里插入图片描述
然后直接帖代码吧
先看模板代码,很简单,创建一个div就可以,这里提一句,百度实现echarts时底层是用canvas实现的,但是我们引用直接给一个div就可以,这点就比其他的图表库要好一些,别的图表库都需要我们手动添加canvas:

          <div style="display: flex;justify-content: center"><div ref="chart" style="width: 30vw; height: 30vw;"></div></div>

然后直接来看js代码部分:

<script>
import * as echarts from 'echarts';export default {components: {backbButton,},data() {return {
// 使用 ECharts 初始化图表实例radarChart: null,
// 配置雷达图的参数option: {radar: {indicator: [{name: '听力', max: 100},{name: '口语', max: 100},{name: '阅读', max: 100},{name: '写作', max: 100},{name: '词汇', max: 100},{name: '句子', max: 100}],radius: '60%',  // 雷达图的半径splitLine: {lineStyle: {color: 'rgba(0, 0, 0, 0.1)',  // 设置网格线颜色},},axisLine: {lineStyle: {color: 'rgba(0, 0, 0, 0.10)',  // 设置轴线颜色},},axisLabel: {color: 'rgba(0, 0, 0, 0.7)',  // 设置文字颜色fontWeight: 'bold',},name: {textStyle: {color: 'rgba(0, 0, 0, 0.8)',  // 设置指标名称的文字颜色fontWeight: 'bold',},},},series: [{type: 'radar',data: [{value: [80, 60, 70, 90, 50, 75],name: '雷达图示例',itemStyle: {borderColor: 'rgba(255, 177, 26, 1)',  // 设置线条颜色color: 'rgba(255, 177, 26, 1)',  // 设置点的颜色},areaStyle: {color: 'rgba(248, 190, 64, 0.27)',  // 设置区域填充颜色},}]}]},}},mounted() {this.radarChart = echarts.init(this.$refs.chart)
// 将配置项设置给图表实例this.radarChart.setOption(this.option);},methods: {}
}
</script>

我将vue组件里所有js都贴出来了,以便大家伸手即用,里面的属性有注释,还有很多没贴出来的,大家可以搜一下,我只贴一些官方文档上说不清楚的地方,至于属性这里还是去看文档吧。属性太多了,我也稀里糊涂地用,大家也可以直接看他官网的示例。这里是官网链接,链接有时效性,可能时间久了就换地址了,如果不能用可以直接百度搜索吧。https://echarts.apache.org/examples/zh/index.html#chart-type-line

相关文章:

已实现:vue、h5项目如何使用echarts实现雷达图、六边形图表

说实话&#xff0c;要说图表里&#xff0c;最强的应该属于echarts了&#xff0c;不管是接入难度上&#xff0c;还是样式多样性上&#xff0c;还有社区庞大程度上&#xff0c;都是首屈一指的&#xff0c;反观有的人习惯用chart.js了&#xff0c;这个无可厚非&#xff0c;但是如果…...

JUC并发编程-四大函数式接口、Stream 流式计算、ForkJoin并行执行任务

12. 四大函数式接口 新时代的程序员&#xff1a;lambda表达式、链式编程、函数式接口、Stream流式计算 函数式接口&#xff1a;只有一个方法的接口&#xff0c;可以有一些默认的方法 如&#xff1a;Runnable接口函数 1&#xff09;Function 函数型接口 public class Functio…...

【Tomcat与网络4】Tomcat的连接器设计

目录 1 如何设计一个灵活可靠的连接器 2 主要组件介绍 在上一篇&#xff0c;我们介绍了Tomcat提供服务的整体结构&#xff0c;本文我们一起来看一下Tomcat的连接器的设计。 在前面我们提到Tomcat主要完成两个功能&#xff1a; 处理 Socket 连接&#xff0c;负责网络字节流与…...

k8s中调整Pod数量限制的方法

一、介绍 Kubernetes节点每个默认允许最多创建110个pod&#xff0c;有时可能由于主机配置扩容的问题&#xff0c;从而需要修改节点pod运行数量的限制。 即&#xff1a;需要调整Node节点的最大可运行Pod数量。 一般来说&#xff0c;只需要在kubelet启动命令中增加–max-pods参数…...

在Java中,实现扩展性通常有几种方法,其中包括接口、抽象类、插件架构和服务加载等方式

在Java中&#xff0c;实现扩展性通常有几种方法&#xff0c;其中包括接口、抽象类、插件架构和服务加载等方式。以下是如何使用接口来实现灵活的扩展和插件管理的一些基本指导&#xff1a; 定义基础接口&#xff1a; 创建一个或多个基础接口&#xff0c;这些接口定义了所有实现…...

【乳腺肿瘤诊断分类及预测】基于自适应SPREAD-PNN概率神经网络

课题名称&#xff1a;基于自适应SPREAD-PNN的乳腺肿瘤诊断分类及预测 版本日期&#xff1a;2023-06-15 运行方式: 直接运行PNN0501.m 文件即可 代码获取方式&#xff1a;私信博主或QQ&#xff1a;491052175 模型描述&#xff1a; 威斯康辛大学医学院经过多年的收集和整理&…...

蓝桥杯AT24C02问题记录

问题1&#xff1a;从这个图片上可以看出这两个在IIC的.c文件里延时时间不一样&#xff0c;第一张图使用了15个_nop_(); 12M晶振机器周期是 1/12M*121uS&#xff1b;nop()要延时1个指令周期。延时时间不对会对时序产生影响&#xff0c;时序不对&#xff0c;则AT24C02有没被使用…...

adb控制设备状态

屏幕设置 屏幕亮度 # 当前屏幕亮度 adb shell settings get system screen_brightness# 更改屏幕亮度adb shell settings put system screen_brightness屏幕休眠时间 # 当前屏幕休眠时间 adb shell settings get system screen_off_timeout#更改屏幕休眠时间 adb shell sett…...

订婚支出及共同生活消费是否属于彩礼?应否返还?

恋爱期间&#xff0c;男女双方为增进情感而互赠财物的现象十分普遍。而当双方关系结束时&#xff0c;赠送财物的一方要求对方返还时&#xff0c;法院能否支持其主张&#xff1f; 一起男方向女方及女方母亲索要彩礼及恋爱期间花销钱款引发的婚约财产纠纷案&#xff0c;法院综合双…...

MicroPython核心:优化

MicroPython使用多种优化方法来节省RAM&#xff0c;同时确保程序的高效执行&#xff0c;本文会讨论其中的一些优化。 提示&#xff1a; MicroPython 字符串驻留&#xff08;string interning&#xff09; 和映射和字典(Maps and Dictionaries) 详细介绍了对字符串和字典的其他…...

Opencv——霍夫变换

霍夫直线变换 霍夫直线变换(Hough Line Transform)用来做直线检测 为了加升大家对霍夫直线的理解,我在左图左上角大了一个点,然后在右图中绘制出来经过这点可能的所有直线 绘制经过某点的所有直线的示例代码如下,这个代码可以直接拷贝运行 import cv2 as cv import matplot…...

Github 2024-01-28 开源项目日报Top10

根据Github Trendings的统计&#xff0c;今日(2024-01-28统计)共有10个项目上榜。根据开发语言中项目的数量&#xff0c;汇总情况如下&#xff1a; 开发语言项目数量Python项目3TypeScript项目2Rust项目1HTML项目1JavaScript项目1Cuda项目1C#项目1非开发语言项目1 Nuxt&#…...

【大数据安全】大数据安全的挑战与对策基础设施安全

目录 一、大数据安全的挑战与对策 &#xff08;一&#xff09;数据加密技术 &#xff08;二&#xff09;大数据安全与隐私 &#xff08;三&#xff09;大数据安全保障体系 &#xff08;四&#xff09;华为大数据安全解决方案 二、基础设施安全 &#xff08;一&#xff0…...

【LLM多模态】Cogview3、DALL-E3、CogVLM、CogVideo模型

note 文章目录 noteVisualGLM-6B模型图生文&#xff1a;CogVLM-17B模型1. 模型架构2. 模型效果 文生图&#xff1a;CogView3模型DALL-E3模型CogVideo模型网易伏羲-丹青模型Reference VisualGLM-6B模型 VisualGLM 是一个依赖于具体语言模型的多模态模型&#xff0c;而CogVLM则是…...

python爬虫学习之selenium_chrome handless的使用

目录 一、Chrome handless简介 二、Chrome handless的系统要求 三、Chrome handless的基本配置 &#xff08;直接复制放在.py文件开头&#xff09; 四、Chrome handless 的应用 五、Chrome handless的封装 一、Chrome handless简介 Chrome handless 模式&#xff0c;Goog…...

Spring boot + Azure OpenAI 服务 1.使用 GPT-35-Turbo

Azure OpenAI 服务使用 GPT-35-Turbo 先决条件 maven 注意 beta.6 版本 <dependency><groupId>com.azure</groupId><artifactId>azure-ai-openai</artifactId><version>1.0.0-beta.6</version></dependency>问答工具类 pack…...

Vite+Vue3使用Vue-i18n笔记

一、下载依赖 vue-i18n yarn add vue-i18n创建存放语言文件的目录 以及配置文件的配置 我是在src/lang 新建index.ts、cn.ts、en.ts以及test文件夹其中再分别新建cn.ts以及en.ts /lang/index.ts 用于导出vue-i18n需要的配置对象 import en from "./en.ts"; import…...

流量密码《幻兽帕鲁》5天狂销700万份

*** 流量密码《幻兽帕鲁》5天狂销700万份 2024年&#xff0c;一匹游戏业的黑马没有预兆地就这么出现了 这就是《幻兽帕鲁》 它首日销量轻松达到200万&#xff0c;5天时间手到擒来700万销量&#xff0c;直接收入超15亿&#xff0c;刷新多个游戏市场纪录。 同时在线玩家数高达…...

怎么查询鸿蒙真机支持的API版本

1、打开设备的开发者模式与USB调试并通过USB连接上电脑。 2、管理员身份运行cmd。 3、进入hdc.exe所在目录。(鸿蒙OS IDE的SDK下载目录中) 4、输入hdc shell&#xff0c;进入特殊模式 5、输入 getprop hw_sc.build.os.apiversion 查看API版本 6、输入 getprop hw_sc.build…...

【NodeJS】005- NodeJS的NVM与express框架

1.NVM介绍与使用 1.介绍 nvm 全称 Node Version Manager 顾名思义它是用来管理 node 版本的工具,方便切换不同版本的Node.js 2.使用 nvm 的使用非常的简单,跟 npm 的使用方法类似 3.下载安装 首先先下载 nvm,下载地址 https://github.com/coreybutler/nvm-windows/rel…...

从深圳崛起的“机器之眼”:赴港乐动机器人的万亿赛道赶考路

进入2025年以来&#xff0c;尽管围绕人形机器人、具身智能等机器人赛道的质疑声不断&#xff0c;但全球市场热度依然高涨&#xff0c;入局者持续增加。 以国内市场为例&#xff0c;天眼查专业版数据显示&#xff0c;截至5月底&#xff0c;我国现存在业、存续状态的机器人相关企…...

稳定币的深度剖析与展望

一、引言 在当今数字化浪潮席卷全球的时代&#xff0c;加密货币作为一种新兴的金融现象&#xff0c;正以前所未有的速度改变着我们对传统货币和金融体系的认知。然而&#xff0c;加密货币市场的高度波动性却成为了其广泛应用和普及的一大障碍。在这样的背景下&#xff0c;稳定…...

【JVM面试篇】高频八股汇总——类加载和类加载器

目录 1. 讲一下类加载过程&#xff1f; 2. Java创建对象的过程&#xff1f; 3. 对象的生命周期&#xff1f; 4. 类加载器有哪些&#xff1f; 5. 双亲委派模型的作用&#xff08;好处&#xff09;&#xff1f; 6. 讲一下类的加载和双亲委派原则&#xff1f; 7. 双亲委派模…...

LLMs 系列实操科普(1)

写在前面&#xff1a; 本期内容我们继续 Andrej Karpathy 的《How I use LLMs》讲座内容&#xff0c;原视频时长 ~130 分钟&#xff0c;以实操演示主流的一些 LLMs 的使用&#xff0c;由于涉及到实操&#xff0c;实际上并不适合以文字整理&#xff0c;但还是决定尽量整理一份笔…...

Proxmox Mail Gateway安装指南:从零开始配置高效邮件过滤系统

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐&#xff1a;「storms…...

Java并发编程实战 Day 11:并发设计模式

【Java并发编程实战 Day 11】并发设计模式 开篇 这是"Java并发编程实战"系列的第11天&#xff0c;今天我们聚焦于并发设计模式。并发设计模式是解决多线程环境下常见问题的经典解决方案&#xff0c;它们不仅提供了优雅的设计思路&#xff0c;还能显著提升系统的性能…...

跨平台商品数据接口的标准化与规范化发展路径:淘宝京东拼多多的最新实践

在电商行业蓬勃发展的当下&#xff0c;多平台运营已成为众多商家的必然选择。然而&#xff0c;不同电商平台在商品数据接口方面存在差异&#xff0c;导致商家在跨平台运营时面临诸多挑战&#xff0c;如数据对接困难、运营效率低下、用户体验不一致等。跨平台商品数据接口的标准…...

【Java】Ajax 技术详解

文章目录 1. Filter 过滤器1.1 Filter 概述1.2 Filter 快速入门开发步骤:1.3 Filter 执行流程1.4 Filter 拦截路径配置1.5 过滤器链2. Listener 监听器2.1 Listener 概述2.2 ServletContextListener3. Ajax 技术3.1 Ajax 概述3.2 Ajax 快速入门服务端实现:客户端实现:4. Axi…...

python可视化:俄乌战争时间线关键节点与深层原因

俄乌战争时间线可视化分析&#xff1a;关键节点与深层原因 俄乌战争是21世纪欧洲最具影响力的地缘政治冲突之一&#xff0c;自2022年2月爆发以来已持续超过3年。 本文将通过Python可视化工具&#xff0c;系统分析这场战争的时间线、关键节点及其背后的深层原因&#xff0c;全面…...

Linux 内存管理调试分析:ftrace、perf、crash 的系统化使用

Linux 内存管理调试分析&#xff1a;ftrace、perf、crash 的系统化使用 Linux 内核内存管理是构成整个内核性能和系统稳定性的基础&#xff0c;但这一子系统结构复杂&#xff0c;常常有设置失败、性能展示不良、OOM 杀进程等问题。要分析这些问题&#xff0c;需要一套工具化、…...