已实现: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实现雷达图、六边形图表
说实话,要说图表里,最强的应该属于echarts了,不管是接入难度上,还是样式多样性上,还有社区庞大程度上,都是首屈一指的,反观有的人习惯用chart.js了,这个无可厚非,但是如果…...
JUC并发编程-四大函数式接口、Stream 流式计算、ForkJoin并行执行任务
12. 四大函数式接口 新时代的程序员:lambda表达式、链式编程、函数式接口、Stream流式计算 函数式接口:只有一个方法的接口,可以有一些默认的方法 如:Runnable接口函数 1)Function 函数型接口 public class Functio…...
【Tomcat与网络4】Tomcat的连接器设计
目录 1 如何设计一个灵活可靠的连接器 2 主要组件介绍 在上一篇,我们介绍了Tomcat提供服务的整体结构,本文我们一起来看一下Tomcat的连接器的设计。 在前面我们提到Tomcat主要完成两个功能: 处理 Socket 连接,负责网络字节流与…...
k8s中调整Pod数量限制的方法
一、介绍 Kubernetes节点每个默认允许最多创建110个pod,有时可能由于主机配置扩容的问题,从而需要修改节点pod运行数量的限制。 即:需要调整Node节点的最大可运行Pod数量。 一般来说,只需要在kubelet启动命令中增加–max-pods参数…...
在Java中,实现扩展性通常有几种方法,其中包括接口、抽象类、插件架构和服务加载等方式
在Java中,实现扩展性通常有几种方法,其中包括接口、抽象类、插件架构和服务加载等方式。以下是如何使用接口来实现灵活的扩展和插件管理的一些基本指导: 定义基础接口: 创建一个或多个基础接口,这些接口定义了所有实现…...
【乳腺肿瘤诊断分类及预测】基于自适应SPREAD-PNN概率神经网络
课题名称:基于自适应SPREAD-PNN的乳腺肿瘤诊断分类及预测 版本日期:2023-06-15 运行方式: 直接运行PNN0501.m 文件即可 代码获取方式:私信博主或QQ:491052175 模型描述: 威斯康辛大学医学院经过多年的收集和整理&…...
蓝桥杯AT24C02问题记录
问题1:从这个图片上可以看出这两个在IIC的.c文件里延时时间不一样,第一张图使用了15个_nop_(); 12M晶振机器周期是 1/12M*121uS;nop()要延时1个指令周期。延时时间不对会对时序产生影响,时序不对,则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…...
订婚支出及共同生活消费是否属于彩礼?应否返还?
恋爱期间,男女双方为增进情感而互赠财物的现象十分普遍。而当双方关系结束时,赠送财物的一方要求对方返还时,法院能否支持其主张? 一起男方向女方及女方母亲索要彩礼及恋爱期间花销钱款引发的婚约财产纠纷案,法院综合双…...
MicroPython核心:优化
MicroPython使用多种优化方法来节省RAM,同时确保程序的高效执行,本文会讨论其中的一些优化。 提示: MicroPython 字符串驻留(string interning) 和映射和字典(Maps and Dictionaries) 详细介绍了对字符串和字典的其他…...
Opencv——霍夫变换
霍夫直线变换 霍夫直线变换(Hough Line Transform)用来做直线检测 为了加升大家对霍夫直线的理解,我在左图左上角大了一个点,然后在右图中绘制出来经过这点可能的所有直线 绘制经过某点的所有直线的示例代码如下,这个代码可以直接拷贝运行 import cv2 as cv import matplot…...
Github 2024-01-28 开源项目日报Top10
根据Github Trendings的统计,今日(2024-01-28统计)共有10个项目上榜。根据开发语言中项目的数量,汇总情况如下: 开发语言项目数量Python项目3TypeScript项目2Rust项目1HTML项目1JavaScript项目1Cuda项目1C#项目1非开发语言项目1 Nuxt&#…...
【大数据安全】大数据安全的挑战与对策基础设施安全
目录 一、大数据安全的挑战与对策 (一)数据加密技术 (二)大数据安全与隐私 (三)大数据安全保障体系 (四)华为大数据安全解决方案 二、基础设施安全 (一࿰…...
【LLM多模态】Cogview3、DALL-E3、CogVLM、CogVideo模型
note 文章目录 noteVisualGLM-6B模型图生文:CogVLM-17B模型1. 模型架构2. 模型效果 文生图:CogView3模型DALL-E3模型CogVideo模型网易伏羲-丹青模型Reference VisualGLM-6B模型 VisualGLM 是一个依赖于具体语言模型的多模态模型,而CogVLM则是…...
python爬虫学习之selenium_chrome handless的使用
目录 一、Chrome handless简介 二、Chrome handless的系统要求 三、Chrome handless的基本配置 (直接复制放在.py文件开头) 四、Chrome handless 的应用 五、Chrome handless的封装 一、Chrome handless简介 Chrome handless 模式,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年,一匹游戏业的黑马没有预兆地就这么出现了 这就是《幻兽帕鲁》 它首日销量轻松达到200万,5天时间手到擒来700万销量,直接收入超15亿,刷新多个游戏市场纪录。 同时在线玩家数高达…...
怎么查询鸿蒙真机支持的API版本
1、打开设备的开发者模式与USB调试并通过USB连接上电脑。 2、管理员身份运行cmd。 3、进入hdc.exe所在目录。(鸿蒙OS IDE的SDK下载目录中) 4、输入hdc shell,进入特殊模式 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…...
Scikit-learn的随机SVD真的能“超快”降维吗?先看清代价
先说结论随机SVD确实能大幅提升PCA速度,尤其在样本量大的场景,但代价是可控的精度损失和随机性引入这种优化更适合离线或准实时处理,在严格实时边缘系统中仍可能成为瓶颈,需要结合硬件加速选择随机SVD前,必须明确业务对…...
Symfony Monolog Bundle与现代日志系统:Sentry、Elasticsearch、Slack集成终极指南
Symfony Monolog Bundle与现代日志系统:Sentry、Elasticsearch、Slack集成终极指南 【免费下载链接】monolog-bundle Symfony Monolog Bundle 项目地址: https://gitcode.com/gh_mirrors/mo/monolog-bundle Symfony Monolog Bundle是Symfony框架中功能强大的…...
SEO 实战培训班在哪里_SEO 优化师培训在哪里
SEO 实战培训班在哪里_SEO 优化师培训在哪里 在当今数字化时代,网站的流量和排名直接关系到企业的生存和发展。这就是为什么越来来越多的企业和个人希望掌握SEO优化技能,成为一名优秀的SEO优化师。SEO 实战培训班在哪里呢?SEO 优化师培训在哪…...
OpenClaw故障排查:百川2-13B-4bits模型接口连接问题解决
OpenClaw故障排查:百川2-13B-4bits模型接口连接问题解决 1. 问题背景与现象描述 上周在尝试将本地部署的百川2-13B-4bits量化模型接入OpenClaw时,遇到了典型的Connection refused错误。这个问题困扰了我整整两天时间,期间尝试了各种常见解决…...
springboot基于深度学习的图书推荐系统_ry1n8702_c006
前言 随着互联网的普及和电子商务的发展,线上图书销售平台越来越多,用户在选择图书时面临海量数据的选择困难。传统的图书推荐方式,如书店的畅销书榜单、图书馆的分类推荐等,已经难以满足用户个性化、精准化的阅读需求。因此&…...
2026年,正规GEO优化排名公司将如何引领行业新潮流?
在AI搜索全面普及的当下,GEO(生成式引擎优化)成为企业突破曝光瓶颈的核心赛道。到2026年,正规GEO优化排名公司将凭借其专业能力和创新策略,引领行业迈向新的发展阶段。以[上海铪铪网络科技有限公司]为例,我…...
数据转换器(ADC/DAC)核心术语与工程实践解析
1. 数据转换器基础概念解析在电子工程领域,数据转换器(ADC/DAC)是连接模拟世界与数字系统的关键桥梁。作为一名从业十余年的硬件工程师,我经常遇到新手对这些专业术语感到困惑的情况。本文将系统梳理56个核心术语,结合…...
STM32单片机技术优势与应用指南
1. STM32的崛起背景与技术优势2007年之前,8位单片机市场被8051架构主导,16位市场则有MSP430等产品。这些传统MCU在简单控制领域表现出色,但随着物联网时代的到来,其局限性逐渐显现:性能瓶颈:8位机的处理能力…...
告别网络限制!哔咔漫画离线下载神器使用全攻略
告别网络限制!哔咔漫画离线下载神器使用全攻略 【免费下载链接】picacomic-downloader 哔咔漫画 picacomic pica漫画 bika漫画 PicACG 多线程下载器,带图形界面 带收藏夹,已打包exe 下载速度飞快 项目地址: https://gitcode.com/gh_mirrors…...
OpenClaw配置备份:Kimi-VL-A3B-Thinking模型参数迁移技巧
OpenClaw配置备份:Kimi-VL-A3B-Thinking模型参数迁移技巧 1. 为什么需要备份OpenClaw配置? 上周我的主力开发机突然硬盘故障,导致所有数据丢失。最让我痛心的不是代码——它们都有Git托管,而是花了两周精心调校的OpenClaw工作环…...
