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

树莓派超全系列教程文档--(62)使用rpicam-app通过网络流式传输视频

使用rpicam-app通过网络流式传输视频 使用 rpicam-app 通过网络流式传输视频UDPTCPRTSPlibavGStreamerRTPlibcamerasrc GStreamer 元素 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 使用 rpicam-app 通过网络流式传输视频 本节介绍来自 rpica…...

大数据零基础学习day1之环境准备和大数据初步理解

学习大数据会使用到多台Linux服务器。 一、环境准备 1、VMware 基于VMware构建Linux虚拟机 是大数据从业者或者IT从业者的必备技能之一也是成本低廉的方案 所以VMware虚拟机方案是必须要学习的。 &#xff08;1&#xff09;设置网关 打开VMware虚拟机&#xff0c;点击编辑…...

论文浅尝 | 基于判别指令微调生成式大语言模型的知识图谱补全方法(ISWC2024)

笔记整理&#xff1a;刘治强&#xff0c;浙江大学硕士生&#xff0c;研究方向为知识图谱表示学习&#xff0c;大语言模型 论文链接&#xff1a;http://arxiv.org/abs/2407.16127 发表会议&#xff1a;ISWC 2024 1. 动机 传统的知识图谱补全&#xff08;KGC&#xff09;模型通过…...

【JavaSE】绘图与事件入门学习笔记

-Java绘图坐标体系 坐标体系-介绍 坐标原点位于左上角&#xff0c;以像素为单位。 在Java坐标系中,第一个是x坐标,表示当前位置为水平方向&#xff0c;距离坐标原点x个像素;第二个是y坐标&#xff0c;表示当前位置为垂直方向&#xff0c;距离坐标原点y个像素。 坐标体系-像素 …...

tree 树组件大数据卡顿问题优化

问题背景 项目中有用到树组件用来做文件目录&#xff0c;但是由于这个树组件的节点越来越多&#xff0c;导致页面在滚动这个树组件的时候浏览器就很容易卡死。这种问题基本上都是因为dom节点太多&#xff0c;导致的浏览器卡顿&#xff0c;这里很明显就需要用到虚拟列表的技术&…...

laravel8+vue3.0+element-plus搭建方法

创建 laravel8 项目 composer create-project --prefer-dist laravel/laravel laravel8 8.* 安装 laravel/ui composer require laravel/ui 修改 package.json 文件 "devDependencies": {"vue/compiler-sfc": "^3.0.7","axios": …...

根目录0xa0属性对应的Ntfs!_SCB中的FileObject是什么时候被建立的----NTFS源代码分析--重要

根目录0xa0属性对应的Ntfs!_SCB中的FileObject是什么时候被建立的 第一部分&#xff1a; 0: kd> g Breakpoint 9 hit Ntfs!ReadIndexBuffer: f7173886 55 push ebp 0: kd> kc # 00 Ntfs!ReadIndexBuffer 01 Ntfs!FindFirstIndexEntry 02 Ntfs!NtfsUpda…...

前端中slice和splic的区别

1. slice slice 用于从数组中提取一部分元素&#xff0c;返回一个新的数组。 特点&#xff1a; 不修改原数组&#xff1a;slice 不会改变原数组&#xff0c;而是返回一个新的数组。提取数组的部分&#xff1a;slice 会根据指定的开始索引和结束索引提取数组的一部分。不包含…...

SpringAI实战:ChatModel智能对话全解

一、引言&#xff1a;Spring AI 与 Chat Model 的核心价值 &#x1f680; 在 Java 生态中集成大模型能力&#xff0c;Spring AI 提供了高效的解决方案 &#x1f916;。其中 Chat Model 作为核心交互组件&#xff0c;通过标准化接口简化了与大语言模型&#xff08;LLM&#xff0…...

使用SSE解决获取状态不一致问题

使用SSE解决获取状态不一致问题 1. 问题描述2. SSE介绍2.1 SSE 的工作原理2.2 SSE 的事件格式规范2.3 SSE与其他技术对比2.4 SSE 的优缺点 3. 实战代码 1. 问题描述 目前做的一个功能是上传多个文件&#xff0c;这个上传文件是整体功能的一部分&#xff0c;文件在上传的过程中…...