vue3(setup语法糖)+typescript+echarts5大屏可视化项目(底部附源码地址)

news2024/11/27 12:58:18

最近在学习echarts5想结合着自己所学的vue3+ts结合起来做个demo,

效果图如下:
登录页
在这里插入图片描述
首页:
在这里插入图片描述
每个模块支持放大全屏的功能
在这里插入图片描述

踩坑:

  1. echarts实例化不建议使用ref,echarts内部机制导致的
  2. 在main.ts中将echarts挂载到app的实例上

let app = createApp(App)
app.config.globalProperties.$charts = echarts;
app.use(router).mount('#app')

求github小心心哈哈哈~
GitHub项目地址

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/524824.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

企业战略管理:精要

一、企业战略管理的概念与流派 国内外学者对企业战略和企业战略管理的各种理解— 安索夫:企业在确定战略前,应该先确定自己的经营性质安德鲁斯:企业战略管理是一个决策模式,决定企业的目标,提出实现目标的方针和计划&…

新能源 石油化工 HJL-98/B数字式电流继电器 瞬时动作,过负荷、短路保护 JOSEF约瑟

名称:数字式交流电流继电器,品牌:JOSEF约瑟,型号:HJL-98/B,动作电流:30500mA,工作电压:AC220V/AC380V,安装方式:柜内导轨,零序孔径&am…

基于STM32F103C8T6的物联网温湿度光照烟雾监测系统

1、系统组成:STM32F103C8T6最小系统、S8050三极管、有源高电平触发蜂鸣器、ESP8266_01S模块、DHT11温湿度传感器、0.96OLED显示屏、BH1750光照度传感器、MQ2烟雾浓度传感器、LED灯、碳膜电阻(300欧)、独立按键、排针若干、杜邦线若干、微信小…

使用docker构建并部署MySQL5.7镜像

使用docker构建并部署MySQL5.7镜像 前言一、docker中部署MySQL主要有哪几种方式?二、CentOS 镜像中构建 MySQL 容器1.编写Dockerfile2.初始化MySQL 三、MySQL 官方镜像中构建容器1. 拉取官方镜像2. 运行镜像3. 配置镜像外网访问 四、MySQL 容器初始化脚本1. 将sql文…

一不小心,你就掉进了Spring延迟初始化的坑!

前言 书接上回&#xff0c;之前我们有聊到 Spring 的延迟初始化机制&#xff0c;是什么&#xff0c;有什么作用。今天跟各位大佬分享一下&#xff0c;我在使用 Spring 延迟初始化踩过的一些坑。 List<坑> 坑列表 new ArrayList<>(2); 首先&#xff0c;让我们回顾…

STM32-单通道ADC采集(DMA读取)实验

关于ADC的一些原理和实验我们已经有了2篇笔记&#xff0c;链接如下&#xff1a; 关于ADC的笔记1_Mr_rustylake的博客-CSDN博客 STM32-ADC单通道采集实验_Mr_rustylake的博客-CSDN博客 实验要求&#xff1a;通过ADC1通道1&#xff08;PA1&#xff09;采集电位器的电压&#x…

专升本资料怎么找?可以通过哪些渠道找到?

统招专升本专科生每个人只有一次考试的机会&#xff0c;近年来越来越多的人注意到学历的重要性&#xff0c;报考的人也越来越多&#xff0c;竞争激烈。 所以想要成功上岸&#xff0c;光靠靠努力可不行&#xff0c;拥有一个好的复习资料你就成功了一半。 随着粉丝量越来越大&am…

让思维结构化: 美团四大名著之 <金字塔原理>

目录 什么是金字塔原理 纵向结构 横向结构 如何构建金字塔模型 纵向结构 自上而下法 自下而上法 总结 自下而上思考 自上而下表达&#xff0c;结论先行 横向结构 时间顺序 空间顺序 重要性顺序 演绎推理 SCQA方法 序言&#xff08;前言/引言&#xff09;&#x…

如何降低OBS推流直播延迟的问题?

使用推流OBS工具进行直播推流操作时&#xff0c;默认的推流关键帧间隔是10秒&#xff0c;而客户端在播放时&#xff0c;通常需要3个关键帧的数据才会开始播放&#xff0c;为了实现更低的延迟&#xff0c;您需要在推流时将关键帧的间隔设置的小一些&#xff0c;您可以逐步调整这…

Netty(4)

Netty 文章目录 Netty6 Netty 核心模块6.1 EventLoopGroup 与 NioEventLoopGroup6.2 Bootstrap/ServerBootstrap6.3 ChannelPipline、ChannelHandler、ChannelHandlerContext6.3.1 三者的关系6.3.2 ChannelPipline6.3.3 ChannelHandler6.3.4 ChannelHandlerContext6.3.5 三者创…

微服务---Redis实用篇-黑马头条项目-优惠卷秒杀功能(使用java阻塞队列对秒杀进行异步优化)

Redis实用篇-黑马头条项目-优惠卷秒杀功能(使用java阻塞队列对秒杀进行异步优化) 1、秒杀优化 1.1 秒杀优化-异步秒杀思路 我们来回顾一下下单流程 当用户发起请求&#xff0c;此时会请求nginx&#xff0c;nginx会访问到tomcat&#xff0c;而tomcat中的程序&#xff0c;会进…

LeetCode_Day1 | 关于数组双指针及二分法查询

LeetCode_数组 704.二分查找1.题目描述2. 做题前要想明白什么3. 左闭右闭代码4.左闭右开代码5. 关于中间值溢出问题6. 图解举例(左闭右闭) 27.移除元素1. 题目描述2. 暴力法3. 快慢指针法4. 双向双指针法 704.二分查找 1.题目描述 给定一个 n 个元素有序的&#xff08;升序&a…

15天学习MySQL计划(运维篇)分库分表-监控-第十四天

15天学习MySQL计划分库分表-监控-第十四天 1.介绍 1.问题分析 ​ 随着互联网及移动互联网的发展&#xff0c;应用系统的数据量也是成指数式增加&#xff0c;若采用但数据进行数据存储&#xff0c;存在以下性能瓶颈&#xff1a; IO瓶颈&#xff1a;热点数据太多&#xff0c;数…

【2023/05/14】Apple I

Hello&#xff01;大家好&#xff0c;我是霜淮子&#xff0c;2023倒计时第9天。 Share I cannot choose the best.The best choose me. 译文&#xff1a; 我不能选择那最好的。 是那最好的选择我。 They throw their shadows before them who carry their lantern on thei…

MySQL基础-多表查询

本文介绍MySQL的多表查询 文章目录 多表关系一对多多对多一对一 查询内连接外连接自连接联合查询子查询标量子查询列子查询行子查询表子查询 多表查询案例 多表关系 一对多&#xff08;多对一&#xff09;多对多一对一 一对多 案例&#xff1a;部门与员工 关系&#xff1a;一…

Go Wails Docker图形界面管理工具 (4)

文章目录 1. 前言2. 效果图3. 代码 1. 前言 接上篇&#xff0c;本次添加Docker日志查看功能 2. 效果图 3. 代码 直接调用官方库 app.go func (a *App) Log(ID string) (string, error) {reader, err : Cli.ContainerLogs(context.Background(), ID, types.ContainerLogsOption…

最快鉴别网工能力的方法,就三个字

大家好&#xff0c;我是老杨。 可以投个票&#xff0c;让我了解了解你的近况。 转眼2023年都过去3天了&#xff0c;我这的人事部门又开始找我问招聘画像&#xff0c;每年这时候&#xff0c;我都得头痛一阵子。 从技术转管理之后&#xff0c;最明显的差异&#xff0c;就是从“…

TLS反调试

一、TLS概念 线程局部存储&#xff08;Thread Local Storage&#xff0c;TLS&#xff09;是一种线程级别的存储机制&#xff0c;它允许每个线程在运行时都拥有自己的私有变量&#xff0c;这些变量只能被该线程访问&#xff0c;而不会被其他线程所共享。 1、TLS的出现是为了解…

【 Python 全栈开发 ⑭ 】数据操作方法

文章目录 一、运算符&#xff08;1&#xff09;&#xff1a;加号二、运算符&#xff08;2&#xff09;&#xff1a;乘号三、in 与 not in四、len()五、del六、max() 与 min()七、数据类型转换 一、运算符&#xff08;1&#xff09;&#xff1a;加号 运算符 “” 的作用是 “合…

〖Web全栈开发②〗—网络编程基础(下)

〖Web全栈开发②〗—网络编程基础&#xff08;下&#xff09; &#xff08;一&#xff09;TCP 网络应用程序开发流程1. TCP 网络应用程序开发流程的介绍2. TCP 客户端程序开发流程的介绍3. TCP 服务端程序开发流程的介绍4. 小结 &#xff08;二&#xff09;socket之send和recv原…