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

Vue3项目中使用ECharts图表并实现自适应效果

文章目录

  • 一、Vue3项目安装ECharts
  • 二、引入、使用ECharts
    • 1.创建图表组件,并在父组件中引入使用
    • 2.引入ECharts
    • 3.ECharts图表自适应
  • 总结


一、Vue3项目安装ECharts

在项目中输入如下代码:

npm install echarts --save

在这里插入图片描述
安装完成可以在package.json中看到:
在这里插入图片描述

二、引入、使用ECharts

1.创建图表组件,并在父组件中引入使用

创建ECharts图表的文件barCharts.vue,将它引入并在父组件中使用。在使用setup时,我们把组件直接引入进来,就可以直接使用了,不用像Vue2那样需要注册了。
在父组件中创建一个有宽高的容器,里面放ECharts组件,ECharts图表的大小就默认是该容器的大小。
在这里插入图片描述

2.引入ECharts

在需要使用ECharts的页面引入ECharts:

import * as echarts from "echarts";

创建ECharts容器,绑定ref属性,在TypeScript中创建相同名称的ref,就可以利用ref获取ECharts实例了。
注意:Vue3中是没有this的,不能像Vue2一样操作ref!
在这里插入图片描述
获取实例之后,就写图表的配置项,再用setOption方法把写的配置项显示出来。我这里配置项就是拷贝的ECharts官方的饼图配置。
在这里插入图片描述
效果如下所示:
在这里插入图片描述

3.ECharts图表自适应

当浏览器窗口变化时,图表需要随着窗口的变化而变化。可以利用window.addEventListener方法监听窗口的变化,当窗口变化时,让需要自适应的ECharts实例调用一下ECharts官方提供的resize方法就好了。

在这里插入图片描述
效果如下所示:
可以看到图表会随着浏览器的变化而变化,这就是自适应了。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述


总结

以上就是今天要分享的关于Vue3中使用ECharts的用法。

相关文章:

Vue3项目中使用ECharts图表并实现自适应效果

文章目录 一、Vue3项目安装ECharts二、引入、使用ECharts1.创建图表组件,并在父组件中引入使用2.引入ECharts3.ECharts图表自适应 总结 一、Vue3项目安装ECharts 在项目中输入如下代码: npm install echarts --save安装完成可以在package.json中看到&a…...

快速跑通环信IM Android Demo

1、以Android 4.0.0 Demo为例 https://www.easemob.com/download/demo (下载别的版本的demo 可以修改版本号直接下载就就可以) https://downloadsdk.easemob.com/downloads/easemob-sdk-4.0.0.zip 运行时遇到以下报错在项目build.gradle中添加运行时遇…...

leetcode解题思路分析(一百三十九)1190 - 1196 题

反转每对括号间的子串 给出一个字符串 s(仅含有小写英文字母和括号)。请你按照从括号内到外的顺序,逐层反转每对匹配括号中的字符串,并返回最终的结果。注意,您的结果中 不应 包含任何括号。 可以简单的用栈保存当前层…...

PHP+vue基于web的小区物业管理管理系统1995a

小区物业管理系统主要是对小区物业以及居民信息进行管理,方便用户使用该资源的一种有效手段。能有效地对物业以及用户信息进行管理并为广大用户服务是该管理系统的基本要求,同时用户也可以及时了解最新的物业信息,方便地查询相关物业情况。基…...

区间预测 | MATLAB实现QRCNN卷积神经网络分位数回归时间序列区间预测

区间预测 | MATLAB实现QRCNN卷积神经网络分位数回归时间序列区间预测 目录 区间预测 | MATLAB实现QRCNN卷积神经网络分位数回归时间序列区间预测效果一览基本介绍模型描述程序设计参考资料 效果一览 基本介绍 区间预测 | MATLAB实现QRCNN卷积神经网络分位数回归时间序列区间预测…...

【AI 导航网站】为了更好的收集 AI 资源,我开发了一个 AI 导航网站

AI 导航网站 目前 AI 应用正呈迸发式增长,然而一个人获取资源的途径有限,对于目前存在的AI工具不能很好的收集总结,所以基于此,我开发了这个一个AI导航网站,希望通过它,收集出目前存在的热门的AI应用&…...

谈谈HMI 的自动化生成技术

人机界面(HMI)是自动化领域不可或缺重要组成部分。尽管人机界面系统的设计看上去并没有太大的技术门槛,但是设计一个HMI系统的工作量是巨大的。如果你没有足够的耐心便完成不了一个通用的HMI系统。构建UI控件库是一个似乎永远完不成的事情&am…...

docker安装elasticsearch

使用docker部署 部署elasticsearch # 拉取镜像 docker pull elasticsearch# 创建容器 docker run --name es -p 9200:9200 \-p 9300:9300 \-e "discovery.typesingle-node" \-e ES_JAVA_OPTS"-Xms64m -Xmx128m" \-v /home/es/conf/elasticsearch.yml:/…...

Docker:使用dockerFile创建镜像(war包和jar包)

1、使用war包打镜像 (1)在war的当前路径下,新建一个文件——Dockerfile (2)编辑Dockerfile文件 vim Dockerfile Dockerfile文件内容: FROM java:8 # 选择项目中要求的版本 MAINTAINER ylb …...

2.基础篇

目录 一、描述软件测试的生命周期(软件测试的流程) 二、如何描述一个bug 三、bug的级别(粗略划分) 四、bug的生命周期 五、因为一个bug和开发人员产生争执怎么办 六、如何设置弱网? 一、描述软件测试的生命周期&a…...

取代你的可能不是AI,而是比你更会使用AI的人

1、背景 从开始了解AI到现在已经1个月了,最明显的就是,产品层出不穷,以前只有技术人员才关系AI,现在各行各业都在关系AI,都希望通过它提高生产力和创造力; 在当今大数据和人工智能时代,职场和企…...

NECCS|全国大学生英语竞赛C类|词汇和语法|语法题|时态 非谓语动词 |19:00~20:15|完形填空·词性转化

14:35~14:45 15:45~16:2019:00~20:15 http://t.csdn.cn/XbsUy 目录 (一)时态 7. 将来进行时 8. 过去将来进行时 9. 现在完成时 10. 过去完成时​编辑 11. 将来完成时 12. 现在完成时 13. 过去完成进行时 (…...

【高等数学笔记】Stolz定理

文章目录 Stolz定理 ∗ ∞ \cfrac{*}{\infty} ∞∗​型 0 0 \cfrac{0}{0} 00​型 例子1. 算术平均数的极限2. Stolz定理可以被理解为“数列的洛必达法则”,它揭示了两个数列之比的极限和相邻两项之差的比的极限的关系。 Stolz定理 ∗ ∞ \cfrac{*}{\infty} ∞∗​型…...

【24】核心易中期刊推荐——图像处理研究大数据及智能处理研究

🚀🚀🚀NEW!!!核心易中期刊推荐栏目来啦 ~ 📚🍀 核心期刊在国内的应用范围非常广,核心期刊发表论文是国内很多作者晋升的硬性要求,并且在国内属于顶尖论文发表,具有很高的学术价值。在中文核心目录体系中,权威代表有CSSCI、CSCD和北大核心。其中,中文期刊的数…...

Codeforces Round 870 (Div. 2)【A、B、C、D】

文章目录 A. Trust Nobody(暴力)B. Lunatic Never Content(数学)C. Dreaming of Freedom(数学、暴力)D. Running Miles(前缀、后缀) 传送门 A. Trust Nobody(暴力) 题意:给出n个人的陈述,每个人陈述至少有ai个人说谎,让你求出可能是说谎人数…...

BetaFlight统一硬件AOCODARC H7DUAL配置文件讨论

BetaFlight统一硬件AOCODARC H7DUAL配置文件讨论 1. 源由2. Review配置3. 分析整理3.1 生产商信息3.2 磁力计3.3 气压计3.4 陀螺仪3.5 串口RxTx3.6 板载Flash3.7 模拟OSD MAX74563.8 PPM接收机3.9 伺服器3.10 LED灯带3.11 蜂鸣器3.12 电机 X83.13 ADC(电压/电流/RSSI信号强度/空…...

力扣题库刷题笔记682-棒球比赛

1、题目如下&#xff1a; 2、个人Python代码实现如下&#xff1a; 代码如下&#xff1a; class Solution: def calPoints(self, operations: List[str]) -> int: i 0 #用于遍历元素的下标 while i < len(operations): …...

SpringCloud------Eureka修改实例显示信息、服务发现Discovery、自我保护(六)

SpringCloud------Eureka修改实例显示信息、服务发现Discovery、自我保护&#xff08;六&#xff09; 1.actuator微服务信息完善 2.服务发现Discovery 3.Eureka自我保护 actuator微服务信息完善 web和actuator依赖用于图形化监控 1.主机名称&#xff1a;服务名称修改 新增…...

Java 远程debug,IDEA 远程 Debug 调试

有时候我们需要进行远程的debug&#xff0c;本文研究如何进行远程debug&#xff0c;以及使用 IDEA 远程debug的过程中的细节。看完可以解决你的一些疑惑。 配置 远程debug的服务&#xff0c;以SpringBoot微服务为例。 首先&#xff0c;启动SpringBoot需要加上特定的参数。 …...

将webrtc的音频模式改为共享模式

修改音频设备模式:打开文件modules/audio_device/include/audio_device.h,将AudioDeviceModule::kPlatformDefaultAudioProcessing为true改为false。这将禁用默认的音频处理,使得可以修改音频设备模式。 修改音频设备模式的初始化:打开文件modules/audio_device/audio_dev…...

突破不可导策略的训练难题:零阶优化与强化学习的深度嵌合

强化学习&#xff08;Reinforcement Learning, RL&#xff09;是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程&#xff0c;然后使用强化学习的Actor-Critic机制&#xff08;中文译作“知行互动”机制&#xff09;&#xff0c;逐步迭代求解…...

简易版抽奖活动的设计技术方案

1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑,确保抽奖活动能够公平、公正、公开地进行,同时满足高并发访问、数据安全存储与高效处理等需求,为用户提供流畅的抽奖体验,助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...

大型活动交通拥堵治理的视觉算法应用

大型活动下智慧交通的视觉分析应用 一、背景与挑战 大型活动&#xff08;如演唱会、马拉松赛事、高考中考等&#xff09;期间&#xff0c;城市交通面临瞬时人流车流激增、传统摄像头模糊、交通拥堵识别滞后等问题。以演唱会为例&#xff0c;暖城商圈曾因观众集中离场导致周边…...

java 实现excel文件转pdf | 无水印 | 无限制

文章目录 目录 文章目录 前言 1.项目远程仓库配置 2.pom文件引入相关依赖 3.代码破解 二、Excel转PDF 1.代码实现 2.Aspose.License.xml 授权文件 总结 前言 java处理excel转pdf一直没找到什么好用的免费jar包工具,自己手写的难度,恐怕高级程序员花费一年的事件,也…...

CentOS下的分布式内存计算Spark环境部署

一、Spark 核心架构与应用场景 1.1 分布式计算引擎的核心优势 Spark 是基于内存的分布式计算框架&#xff0c;相比 MapReduce 具有以下核心优势&#xff1a; 内存计算&#xff1a;数据可常驻内存&#xff0c;迭代计算性能提升 10-100 倍&#xff08;文档段落&#xff1a;3-79…...

.Net Framework 4/C# 关键字(非常用,持续更新...)

一、is 关键字 is 关键字用于检查对象是否于给定类型兼容,如果兼容将返回 true,如果不兼容则返回 false,在进行类型转换前,可以先使用 is 关键字判断对象是否与指定类型兼容,如果兼容才进行转换,这样的转换是安全的。 例如有:首先创建一个字符串对象,然后将字符串对象隐…...

#Uniapp篇:chrome调试unapp适配

chrome调试设备----使用Android模拟机开发调试移动端页面 Chrome://inspect/#devices MuMu模拟器Edge浏览器&#xff1a;Android原生APP嵌入的H5页面元素定位 chrome://inspect/#devices uniapp单位适配 根路径下 postcss.config.js 需要装这些插件 “postcss”: “^8.5.…...

DeepSeek源码深度解析 × 华为仓颉语言编程精粹——从MoE架构到全场景开发生态

前言 在人工智能技术飞速发展的今天&#xff0c;深度学习与大模型技术已成为推动行业变革的核心驱动力&#xff0c;而高效、灵活的开发工具与编程语言则为技术创新提供了重要支撑。本书以两大前沿技术领域为核心&#xff0c;系统性地呈现了两部深度技术著作的精华&#xff1a;…...

SQL进阶之旅 Day 22:批处理与游标优化

【SQL进阶之旅 Day 22】批处理与游标优化 文章简述&#xff08;300字左右&#xff09; 在数据库开发中&#xff0c;面对大量数据的处理任务时&#xff0c;单条SQL语句往往无法满足性能需求。本篇文章聚焦“批处理与游标优化”&#xff0c;深入探讨如何通过批量操作和游标技术提…...

VSCode 没有添加Windows右键菜单

关键字&#xff1a;VSCode&#xff1b;Windows右键菜单&#xff1b;注册表。 文章目录 前言一、工程环境二、配置流程1.右键文件打开2.右键文件夹打开3.右键空白处打开文件夹 三、测试总结 前言 安装 VSCode 时没有注意&#xff0c;实际使用的时候发现 VSCode 在 Windows 菜单栏…...