vue3+TS+vite中Echarts的安装与使用
概述
技术栈:Vue3+Ts+Vite+Echarts
简述:图文详解,教你如何在Vue项目中引入Echarts,封装Echarts组件,并实现常用Echats图列
文章目录
一,效果图
二,引入Echarts
2.1安装Echarts
2.2main.ts中引入
2.3Echarts组件封装
三,使用
3.1柱形图(为例)
文章正文
一效果图
静态效果

动态效果

2.1安装Echarts
2.1.1 npm
npm i echarts --save
2.2.2 pnpm
pnpm i echarts -s
2.2main.ts中引入
//引入echarts
import * as echarts from 'echarts'
app.config.globalProperties.$echarts = echarts;
2.3Echarts组件封装
在/src/components/echartsComp.vue文件中写入以下代码
<template><div ref="myChartsRef" :style="{ height: height, width: width }" :option="option" />
</template><script setup lang="ts">
import { ECharts, EChartsOption, init } from 'echarts';
import { ref, watch, onMounted, onBeforeUnmount } from 'vue';// 定义props泛型
interface Props {width?: string;height?: string;option: EChartsOption;
}
const props = withDefaults(defineProps<Props>(), {width: '100%',height: '100%',option: () => ({})
});const myChartsRef = ref<HTMLDivElement>();
let myChart: ECharts;
// eslint-disable-next-line no-undef
let timer: string | number | NodeJS.Timeout | undefined;// 初始化echarts
const initChart = (): void => {if (myChart !== undefined) {myChart.dispose();}myChart = init(myChartsRef.value as HTMLDivElement);// 拿到option配置项,渲染echartsmyChart?.setOption(props.option, true);
};// 重新渲染echarts
const resizeChart = (): void => {timer = setTimeout(() => {if (myChart) {myChart.resize();}}, 50);
};
// 挂载
onMounted(() => {initChart();window.addEventListener('resize', resizeChart);
});
// 挂载前
onBeforeUnmount(() => {window.removeEventListener('resize', resizeChart);clearTimeout(timer);timer = 0;
});// 监听器
watch(props.option,() => {initChart();},{deep: true}
);
</script>
三,使用(以柱状图为例)
效果图

1,在需要的组件中引入该封装的组件
2,在需要的位置引入该组件
<template><div class="common-layout"><el-main><div :style="{ width: '100%', height: '100%' }"><Echarts :option="option" /></div></el-main></div>
</template><script setup lang="ts">
//引入ref实现响应式数据
import { reactive ,ref} from 'vue';
// 引入封装好的组件
import Echarts from '../components/echartsComp.vue';const option = reactive({backgroundColor: '#fff',title:{text:'数据统计',align: 'center',},grid: {containLabel: true,bottom: '5%',top: '20%',left: '5%',right: '5%',},tooltip: {trigger: 'axis',axisPointer: {type: 'shadow',},},legend: {top: '10%',right: '40%',data: ['订单', '销售额'],itemWidth: 18,itemHeight: 18,itemGap: 30,textStyle: {fontSize: 10,color: 'black',padding: [0, 0, 0, 10],},},xAxis: {// name: "班级",triggerEvent: true,data: ['2023/05/17', '2023/05/18', '2023/03/19', '2023/05/19', '2023/05/20', '2023/05/21', '2023/05/22'],axisLabel: {show: true,fontSize: 14,color: '#C9D2FA',rotate: 10, // 设置旋转角度为30度align: 'right', verticalAlign: 'top',},axisLine: {show: false,lineStyle: {show: false,color: '#F3F3F3',width: 2,},},axisTick: {show: false,},},yAxis: [{// name: '单位:万',// type: 'value',// nameTextStyle: {// color: '#444444',// },axisLabel: {interval: 0,show: true,fontSize: 18,color: '#C9D2FA',},axisLine: {show: false,// lineStyle: {// color: "#F3F3F3",// width: 2// }},axisTick: {show: false,},splitLine: {lineStyle: {type: 'dashed',color: '#3E4A82',},},},],series: [{name: '订单',type: 'bar',align: 'center',silent: true,itemStyle: {normal: {color: '#2F8FFF',},},label: {show: true,color: '#2F8FFF',fontSize: 14,position: 'top', // 显示位置,可选值有 'top', 'bottom', 'inside', 'outside'formatter: '{c}', // 标签内容格式器,这里表示显示数据值},data: [120, 75, 90, 102, 130, 75, 99],},{name: '销售额',type: 'bar',silent: true,itemStyle: {normal: {color: '#47B558',},},label: {show: true,color: '#47B558',fontSize: 14,position: 'top', // 显示位置,可选值有 'top', 'bottom', 'inside', 'outside'formatter: '{c}', // 标签内容格式器,这里表示显示数据值},data: [102, 130, 75, 99, 120, 75, 90],},],})
</script>
相关文章:
vue3+TS+vite中Echarts的安装与使用
概述 技术栈:Vue3TsViteEcharts 简述:图文详解,教你如何在Vue项目中引入Echarts,封装Echarts组件,并实现常用Echats图列 文章目录 一,效果图 二,引入Echarts 2.1安装Echarts 2.2main.ts中引…...
期末算法分析程序填空题
目录 5-1 最小生成树(普里姆算法) 5-2 快速排序(分治法) 输入样例: 输出样例: 5-3 归并排序(递归法) 输入样例: 输出样例: 5-4 求解编辑距离问题(动态规划法)…...
搭建android开发环境 android studio
1、环境介绍 在进行安卓开发时,需要掌握java,需要安卓SDK,需要一款编辑器,还需要软件的测试环境(真机或虚拟机)。 早起开发安卓app,使用的是eclipse加安卓SDK,需要自行搭建。 目前开…...
R语言6种将字符转成数字的方法,写在新年来临之际
咱们临床研究中,拿到数据后首先要对数据进行清洗,把数据变成咱们想要的格式,才能进行下一步分析,其中数据中的字符转成数字是个重要的内容,因为字符中常含有特殊符号,不利于分析,转成数字后才能…...
RocketMQ学习笔记(持续更新中......)
目录 1. 单机搭建 2. 测试RocketMQ 3. 集群搭建 4. 集群启动 5. RocketMQ-DashBoard搭建 6. 不同类型消息发送 1.同步消息 2. 异步消息发送 3. 单向发送消息 7. 消费消息 1. 单机搭建 1. 先从rocketmq官网下载二进制包,ftp上传至linux服务器,…...
强化学习的基础概念
这节课会介绍一些基本的概念,并结合例子讲解。 在马尔科夫决策框架下介绍这些概念 本博客是基于西湖大学强化学习课程的视屏进行笔记的,这是链接: 课程链接 目录 强化学习的基本概念 state和state space Action和Action Space State transiti…...
excel怎么删除右边无限列(亲测有效)
excel怎么删除右边无限列(亲测有效) 网上很多只用第1步的,删除了根本没用,还是存在,但是隐藏后取消隐藏却是可以的。 找到右边要删除的列的第一个空白列,选中整个列按“ctrlshift>(向右的小箭头)”&am…...
STM32-笔记23-超声波传感器HC-SR04
一、简介 HC-SR04 工作参数: • 探测距离:2~600cm • 探测精度:0.1cm1% • 感应角度:<15 • 输出方式:GPIO • 工作电压:DC 3~5.5V • 工作电流:5.3mA • 工作温度:-40~85℃ 怎么…...
Linux | Ubuntu零基础安装学习cURL文件传输工具
目录 介绍 检查安装包 下载安装 手册 介绍 cURL是一个利用URL语法在命令行下工作的文件传输工具,首次发行于1997年12。cURL支持多种协议,包括FTP、FTPS、HTTP、HTTPS、TFTP、SFTP、Gopher、SCP、Telnet、DICT、FILE、LDAP、LDAPS、IMAP、POP3…...
什么是 GPT?Transformer 工作原理的动画展示
大家读完觉得有意义记得关注和点赞!!! 目录 1 图解 “Generative Pre-trained Transformer”(GPT) 1.1 Generative:生成式 1.1.1 可视化 1.1.2 生成式 vs. 判别式(译注) 1.2 Pr…...
SpringCloudAlibaba实战入门之路由网关Gateway过滤器(十三)
承接上篇,我们知道除了断言,还有一个重要的功能是过滤器,本节课我们就讲一下常见的网关过滤器及其一般使用。 一、Filter介绍 类似SpringMVC里面的的拦截器Interceptor,Servlet的过滤器。“pre”和“post”分别会在请求被执行前调用和被执行后调用,用来修改请求和响应信…...
电路仿真软件PSIM简介
在从事开关电源相关产品开发的工程师或者正在学习开关电源的学习者,常常会用到各种仿真软件进行电路的仿真,不仅可以快速验证电路参数,还能清楚知道各器件的工作状态。 现在的电路仿真软件很多,例如matlab、Multisim、Simplis&…...
C语言:调试的概念和调试器的选择
所谓调试(Dubug),就是跟踪程序的运行过程,从而发现程序的逻辑错误(思路错误),或者隐藏的缺陷(Bug)。 在调试的过程中,我们可以监控程序的每一个细节ÿ…...
25. C++继承 1 (继承的概念与基础使用, 继承的复制兼容规则,继承的作用域)
⭐上篇模板文章:24. C模板 2 (非类型模板参数,模板的特化与模板的分离编译)-CSDN博客 ⭐本篇代码:c学习 橘子真甜/c-learning-of-yzc - 码云 - 开源中国 (gitee.com) ⭐标⭐是比较重要的部分 目录 一. 继承的基础使用 1.1 继承的格式 1.2 …...
git 退出编辑模式
在使用 Git 时,有时需要进入编辑器来输入提交信息或进行其他编辑操作。不同的系统和配置可能会导致使用不同的编辑器。以下是几种常见 Git 编辑器的退出方法: Vim 编辑器: 保存并退出: 按下 Esc 键退出编辑模式。输入 :w…...
内容营销与传统营销方式有哪些差别?
在互联网高度发达的当下,碎片化的信息接收方式,让用户对于营销信息拥有较高的敏感度。这一现状,也使得众多传统营销方式正在逐渐失效。想要稳定推广效率,内容营销是当下不少品牌的共同选择。接下来,就让我们来了解下内…...
EasyExcel(读取操作和填充操作)
文章目录 1.准备Read.xlsx(具有两个sheet)2.读取第一个sheet中的数据1.模板2.方法3.结果 3.读取所有sheet中的数据1.模板2.方法3.结果 EasyExcel填充1.简单填充1.准备 Fill01.xlsx2.无模版3.方法4.结果 2.列表填充1.准备 Fill02.xlsx2.模板3.方法4.结果 …...
【华为OD-E卷 - 机房布局 100分(python、java、c++、js、c)】
【华为OD-E卷 - 机房布局 100分(python、java、c、js、c)】 题目 小明正在规划一个大型数据中心机房,为了使得机柜上的机器都能正常满负荷工作,需要确保在每个机柜边上至少要有一个电箱。 为了简化题目,假设这个机房…...
【竞技宝】LOL:IG新赛季分组被质疑
北京时间2024年12月31日,今天已经2024年的最后一天,在进入一月之后,英雄联盟将迎来全新的2025赛季。而目前新赛季第一阶段的抽签结果已经全部出炉,其中人气最高的IG战队在本次抽签中抽到了“绝世好签”引来了网友们的质疑。 首先介…...
ChatBI来啦!NBAI 正式上线 NL2SQL 功能
NebulaAI 现已正式上线 NL2SQL 功能,免费开放使用! 什么是 NL2SQL?NL2SQL 即通过自然语言交互,用户可以轻松查询、分析和管理数据库中的数据(ChatBI),从此摆脱传统复杂的数据库操作。 欢迎免费…...
自然语言处理——循环神经网络
自然语言处理——循环神经网络 循环神经网络应用到基于机器学习的自然语言处理任务序列到类别同步的序列到序列模式异步的序列到序列模式 参数学习和长程依赖问题基于门控的循环神经网络门控循环单元(GRU)长短期记忆神经网络(LSTM)…...
OPenCV CUDA模块图像处理-----对图像执行 均值漂移滤波(Mean Shift Filtering)函数meanShiftFiltering()
操作系统:ubuntu22.04 OpenCV版本:OpenCV4.9 IDE:Visual Studio Code 编程语言:C11 算法描述 在 GPU 上对图像执行 均值漂移滤波(Mean Shift Filtering),用于图像分割或平滑处理。 该函数将输入图像中的…...
mac:大模型系列测试
0 MAC 前几天经过学生优惠以及国补17K入手了mac studio,然后这两天亲自测试其模型行运用能力如何,是否支持微调、推理速度等能力。下面进入正文。 1 mac 与 unsloth 按照下面的进行安装以及测试,是可以跑通文章里面的代码。训练速度也是很快的。 注意…...
MFE(微前端) Module Federation:Webpack.config.js文件中每个属性的含义解释
以Module Federation 插件详为例,Webpack.config.js它可能的配置和含义如下: 前言 Module Federation 的Webpack.config.js核心配置包括: name filename(定义应用标识) remotes(引用远程模块࿰…...
企业大模型服务合规指南:深度解析备案与登记制度
伴随AI技术的爆炸式发展,尤其是大模型(LLM)在各行各业的深度应用和整合,企业利用AI技术提升效率、创新服务的步伐不断加快。无论是像DeepSeek这样的前沿技术提供者,还是积极拥抱AI转型的传统企业,在面向公众…...
Django RBAC项目后端实战 - 03 DRF权限控制实现
项目背景 在上一篇文章中,我们完成了JWT认证系统的集成。本篇文章将实现基于Redis的RBAC权限控制系统,为系统提供细粒度的权限控制。 开发目标 实现基于Redis的权限缓存机制开发DRF权限控制类实现权限管理API配置权限白名单 前置配置 在开始开发权限…...
【版本控制】GitHub Desktop 入门教程与开源协作全流程解析
目录 0 引言1 GitHub Desktop 入门教程1.1 安装与基础配置1.2 核心功能使用指南仓库管理日常开发流程分支管理 2 GitHub 开源协作流程详解2.1 Fork & Pull Request 模型2.2 完整协作流程步骤步骤 1: Fork(创建个人副本)步骤 2: Clone(克隆…...
JUC并发编程(二)Monitor/自旋/轻量级/锁膨胀/wait/notify/锁消除
目录 一 基础 1 概念 2 卖票问题 3 转账问题 二 锁机制与优化策略 0 Monitor 1 轻量级锁 2 锁膨胀 3 自旋 4 偏向锁 5 锁消除 6 wait /notify 7 sleep与wait的对比 8 join原理 一 基础 1 概念 临界区 一段代码块内如果存在对共享资源的多线程读写操作…...
Linux信号保存与处理机制详解
Linux信号的保存与处理涉及多个关键机制,以下是详细的总结: 1. 信号的保存 进程描述符(task_struct):每个进程的PCB中包含信号相关信息。 pending信号集:记录已到达但未处理的信号(未决信号&a…...
本地部署drawDB结合内网穿透技术实现数据库远程管控方案
文章目录 前言1. Windows本地部署DrawDB2. 安装Cpolar内网穿透3. 实现公网访问DrawDB4. 固定DrawDB公网地址 前言 在数字化浪潮席卷全球的背景下,数据治理能力正日益成为构建现代企业核心竞争力的关键因素。无论是全球500强企业的数据中枢系统,还是初创…...
