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

Flask RESTful 示例

目录 1. 环境准备2. 安装依赖3. 修改main.py4. 运行应用5. API使用示例获取所有任务获取单个任务创建新任务更新任务删除任务 中文乱码问题&#xff1a; 下面创建一个简单的Flask RESTful API示例。首先&#xff0c;我们需要创建环境&#xff0c;安装必要的依赖&#xff0c;然后…...

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

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

Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动

一、前言说明 在2011版本的gb28181协议中&#xff0c;拉取视频流只要求udp方式&#xff0c;从2016开始要求新增支持tcp被动和tcp主动两种方式&#xff0c;udp理论上会丢包的&#xff0c;所以实际使用过程可能会出现画面花屏的情况&#xff0c;而tcp肯定不丢包&#xff0c;起码…...

shell脚本--常见案例

1、自动备份文件或目录 2、批量重命名文件 3、查找并删除指定名称的文件&#xff1a; 4、批量删除文件 5、查找并替换文件内容 6、批量创建文件 7、创建文件夹并移动文件 8、在文件夹中查找文件...

ssc377d修改flash分区大小

1、flash的分区默认分配16M、 / # df -h Filesystem Size Used Available Use% Mounted on /dev/root 1.9M 1.9M 0 100% / /dev/mtdblock4 3.0M...

基于服务器使用 apt 安装、配置 Nginx

&#x1f9fe; 一、查看可安装的 Nginx 版本 首先&#xff0c;你可以运行以下命令查看可用版本&#xff1a; apt-cache madison nginx-core输出示例&#xff1a; nginx-core | 1.18.0-6ubuntu14.6 | http://archive.ubuntu.com/ubuntu focal-updates/main amd64 Packages ng…...

【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍,多层嵌套定位示例

文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解(初学者版) 1. static(默认值) 2. relative(相对定位) 3. absolute(绝对定位) 4. fixed(固定定位) 5. sticky(粘性定位) 三、定位元素的层级关系(z-i…...

【服务器压力测试】本地PC电脑作为服务器运行时出现卡顿和资源紧张(Windows/Linux)

要让本地PC电脑作为服务器运行时出现卡顿和资源紧张的情况&#xff0c;可以通过以下几种方式模拟或触发&#xff1a; 1. 增加CPU负载 运行大量计算密集型任务&#xff0c;例如&#xff1a; 使用多线程循环执行复杂计算&#xff08;如数学运算、加密解密等&#xff09;。运行图…...

QT: `long long` 类型转换为 `QString` 2025.6.5

在 Qt 中&#xff0c;将 long long 类型转换为 QString 可以通过以下两种常用方法实现&#xff1a; 方法 1&#xff1a;使用 QString::number() 直接调用 QString 的静态方法 number()&#xff0c;将数值转换为字符串&#xff1a; long long value 1234567890123456789LL; …...

九天毕昇深度学习平台 | 如何安装库?

pip install 库名 -i https://pypi.tuna.tsinghua.edu.cn/simple --user 举个例子&#xff1a; 报错 ModuleNotFoundError: No module named torch 那么我需要安装 torch pip install torch -i https://pypi.tuna.tsinghua.edu.cn/simple --user pip install 库名&#x…...