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、题目如下: 2、个人Python代码实现如下: 代码如下: class Solution: def calPoints(self, operations: List[str]) -> int: i 0 #用于遍历元素的下标 while i < len(operations): …...
SpringCloud------Eureka修改实例显示信息、服务发现Discovery、自我保护(六)
SpringCloud------Eureka修改实例显示信息、服务发现Discovery、自我保护(六) 1.actuator微服务信息完善 2.服务发现Discovery 3.Eureka自我保护 actuator微服务信息完善 web和actuator依赖用于图形化监控 1.主机名称:服务名称修改 新增…...
Java 远程debug,IDEA 远程 Debug 调试
有时候我们需要进行远程的debug,本文研究如何进行远程debug,以及使用 IDEA 远程debug的过程中的细节。看完可以解决你的一些疑惑。 配置 远程debug的服务,以SpringBoot微服务为例。 首先,启动SpringBoot需要加上特定的参数。 …...
将webrtc的音频模式改为共享模式
修改音频设备模式:打开文件modules/audio_device/include/audio_device.h,将AudioDeviceModule::kPlatformDefaultAudioProcessing为true改为false。这将禁用默认的音频处理,使得可以修改音频设备模式。 修改音频设备模式的初始化:打开文件modules/audio_device/audio_dev…...
[ICLR 2022]How Much Can CLIP Benefit Vision-and-Language Tasks?
论文网址:pdf 英文是纯手打的!论文原文的summarizing and paraphrasing。可能会出现难以避免的拼写错误和语法错误,若有发现欢迎评论指正!文章偏向于笔记,谨慎食用 目录 1. 心得 2. 论文逐段精读 2.1. Abstract 2…...
《通信之道——从微积分到 5G》读书总结
第1章 绪 论 1.1 这是一本什么样的书 通信技术,说到底就是数学。 那些最基础、最本质的部分。 1.2 什么是通信 通信 发送方 接收方 承载信息的信号 解调出其中承载的信息 信息在发送方那里被加工成信号(调制) 把信息从信号中抽取出来&am…...
【服务器压力测试】本地PC电脑作为服务器运行时出现卡顿和资源紧张(Windows/Linux)
要让本地PC电脑作为服务器运行时出现卡顿和资源紧张的情况,可以通过以下几种方式模拟或触发: 1. 增加CPU负载 运行大量计算密集型任务,例如: 使用多线程循环执行复杂计算(如数学运算、加密解密等)。运行图…...
爬虫基础学习day2
# 爬虫设计领域 工商:企查查、天眼查短视频:抖音、快手、西瓜 ---> 飞瓜电商:京东、淘宝、聚美优品、亚马逊 ---> 分析店铺经营决策标题、排名航空:抓取所有航空公司价格 ---> 去哪儿自媒体:采集自媒体数据进…...
Java多线程实现之Thread类深度解析
Java多线程实现之Thread类深度解析 一、多线程基础概念1.1 什么是线程1.2 多线程的优势1.3 Java多线程模型 二、Thread类的基本结构与构造函数2.1 Thread类的继承关系2.2 构造函数 三、创建和启动线程3.1 继承Thread类创建线程3.2 实现Runnable接口创建线程 四、Thread类的核心…...
《C++ 模板》
目录 函数模板 类模板 非类型模板参数 模板特化 函数模板特化 类模板的特化 模板,就像一个模具,里面可以将不同类型的材料做成一个形状,其分为函数模板和类模板。 函数模板 函数模板可以简化函数重载的代码。格式:templa…...
【C++特殊工具与技术】优化内存分配(一):C++中的内存分配
目录 一、C 内存的基本概念 1.1 内存的物理与逻辑结构 1.2 C 程序的内存区域划分 二、栈内存分配 2.1 栈内存的特点 2.2 栈内存分配示例 三、堆内存分配 3.1 new和delete操作符 4.2 内存泄漏与悬空指针问题 4.3 new和delete的重载 四、智能指针…...
C++课设:简易日历程序(支持传统节假日 + 二十四节气 + 个人纪念日管理)
名人说:路漫漫其修远兮,吾将上下而求索。—— 屈原《离骚》 创作者:Code_流苏(CSDN)(一个喜欢古诗词和编程的Coder😊) 专栏介绍:《编程项目实战》 目录 一、为什么要开发一个日历程序?1. 深入理解时间算法2. 练习面向对象设计3. 学习数据结构应用二、核心算法深度解析…...
Razor编程中@Html的方法使用大全
文章目录 1. 基础HTML辅助方法1.1 Html.ActionLink()1.2 Html.RouteLink()1.3 Html.Display() / Html.DisplayFor()1.4 Html.Editor() / Html.EditorFor()1.5 Html.Label() / Html.LabelFor()1.6 Html.TextBox() / Html.TextBoxFor() 2. 表单相关辅助方法2.1 Html.BeginForm() …...
基于Java+VUE+MariaDB实现(Web)仿小米商城
仿小米商城 环境安装 nodejs maven JDK11 运行 mvn clean install -DskipTestscd adminmvn spring-boot:runcd ../webmvn spring-boot:runcd ../xiaomi-store-admin-vuenpm installnpm run servecd ../xiaomi-store-vuenpm installnpm run serve 注意:运行前…...
