uniapp vue3 微信小程序使用echarts显示图表
真是恶心到家了研究了一天半的时间终于搞出来了现在和大家分享一下代码。templateview classchart-containercanvas idmyChart type2d canvas-idmyChart stylewidth: 100%; height: 400px;/canvas/view/templatescript setupimport {onMounted,nextTick,getCurrentInstance,onUnmounted} from vueimport * as echarts from echartslet chartInstance nullconst proxy getCurrentInstance().proxyconst loopInit () {nextTick(() {const query uni.createSelectorQuery().in(proxy)query.select(#myChart).fields({node: true,size: true}).exec(res {// 先判断节点是否获取成功避免空指针报错if (!res || !res[0]) returnconst canvas res[0].nodecanvas.addEventListener () {}canvas.removeEventListener () {}// 如果后续还遇到类似preventDefault的报错也可以同步补全canvas.preventDefault () {}// 从selectorQuery结果中拿到容器的实际宽高const {width,height} res[0]// 传入小程序环境必需的初始化配置const chartInstance echarts.init(canvas, null, {width: width,height: height,devicePixelRatio: uni.getSystemInfoSync().pixelRatio,useDirtyRect: false, // 小程序环境关闭脏矩形优化避免兼容问题useCoarsePointer: true, // 适配移动端触摸交互pointerSize: 40 // 适配触摸点击的热区大小})const option {title: { text: 示例图表 },tooltip: {},xAxis: { data: [A, B, C, D, E] },yAxis: {},series: [{name: 销量,type: bar,data: [10, 20, 30, 40, 50]}]}chartInstance.setOption(option)})})}onMounted(() {nextTick(() {// 延迟400ms再启动循环给组件canvas渲染时间setTimeout(loopInit, 400)})})onUnmounted(() {if (chartInstance) {chartInstance.dispose()chartInstance null}})/script

相关新闻

41-深链拉起只到首页-用Want解析和兜底页接住入口

41-深链拉起只到首页-用Want解析和兜底页接住入口

第41篇|深链拉起只到首页:把 Want 解析、冷启动暂存和兜底页接成闭环 摘要:HarmonyOS 应用被短信、浏览器、分享卡片或推送拉起后只停在首页,通常不是某个按钮跳转写错,而是外部 Want、应用启动、Navigation 就绪、登录…

2026/7/22 23:32:41 阅读更多 →
PDK在芯片设计中的核心作用与实战解析

PDK在芯片设计中的核心作用与实战解析

1. 从一块硅片说起:晶圆制造的基础认知我第一次接触PDK这个概念,是在半导体厂实习期间。那天产线主管拿着一片闪着金属光泽的硅片对我说:"知道吗?这片直径300mm的硅片上,藏着整个集成电路产业的命脉。"当时我…

2026/7/22 17:41:38 阅读更多 →
CXL技术解析:超低延迟与内存一致性的突破

CXL技术解析:超低延迟与内存一致性的突破

1. CXL技术背景与核心价值 在数据中心和高性能计算领域,内存墙问题已成为制约系统性能的关键瓶颈。传统PCIe总线虽然提供了设备互联能力,但其半双工通信机制和较高的协议开销导致延迟难以突破100ns量级。Compute Express Link(CXL&#xff09…

2026/7/22 21:50:23 阅读更多 →

最新新闻

Springboot整合百度人脸识别功能实现注册和登录

Springboot整合百度人脸识别功能实现注册和登录

超详细多种人脸识别教程请参考CSDN中CodeDevMaster大佬的教程,链接如下:Java借助百度云人脸识别实现人脸注册、登录功能的完整示例_百度api 视频流人脸识别 java-CSDN博客 本文档的百度AI人脸识别主要用于人脸登录等功能类似于手机上的面容解锁&#xff…

2026/7/23 18:22:30 阅读更多 →
JAVA练习326- 下一个排列

JAVA练习326- 下一个排列

题目概览 整数数组的一个 排列 就是将其所有成员以序列或线性顺序排列。 例如,arr [1,2,3] ,以下这些都可以视作 arr 的排列:[1,2,3]、[1,3,2]、[3,1,2]、[2,3,1] 。 整数数组的 下一个排列 是指其整数的下一个字典序更大的排列。更正式…

2026/7/23 18:22:30 阅读更多 →
电流镜电路分析仿真电路结果与分析

电流镜电路分析仿真电路结果与分析

电流镜电路 目录电流镜电路电流镜电路分析仿真电路结果与分析实际电路搭建为什么不读万用表电流档位?电流镜电路分析仿真电路结果与分析 电流镜电路是一种电流复制技术,利用三极管的电流特性,选取两同类型的三极管(β\betaβ相同)&#xff0c…

2026/7/23 18:22:30 阅读更多 →
Django毕业设计-基于 Django 的鲜花线上销售与配送管理系统 个性化鲜花定制电商平台的设计与实现(源码+LW+部署文档+全bao+远程调试+代码讲解等)

Django毕业设计-基于 Django 的鲜花线上销售与配送管理系统 个性化鲜花定制电商平台的设计与实现(源码+LW+部署文档+全bao+远程调试+代码讲解等)

博主介绍:✌️码农一枚 ,专注于大学生项目实战开发、讲解和毕业🚢文撰写修改等。全栈领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java、小程序技术领域和毕业项目实战 ✌️技术范围:&am…

2026/7/23 18:22:30 阅读更多 →
滞回运放电路仿真和分析

滞回运放电路仿真和分析

滞回比较电路分析 目录滞回比较电路分析过零滞回比较电路仿真分析波形图改进的波形图滞回比较电路仿真过零滞回比较电路仿真 正反馈运放电路构成比较器电路,由于运放本身就具有很大的开环增益,所有即便是带正反馈也并不会有什么影响,此处的正…

2026/7/23 18:22:30 阅读更多 →
Django毕设项目:基于Python的 智慧校园疫情防控信息化管理系统 校园防疫台账数字化管理系统设计与实现(源码+文档,讲解、调试运行,定制等)

Django毕设项目:基于Python的 智慧校园疫情防控信息化管理系统 校园防疫台账数字化管理系统设计与实现(源码+文档,讲解、调试运行,定制等)

博主介绍:✌️码农一枚 ,专注于大学生项目实战开发、讲解和毕业🚢文撰写修改等。全栈领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java、小程序技术领域和毕业项目实战 ✌️技术范围:&am…

2026/7/23 18:21:30 阅读更多 →

日新闻

从单点好评到指数级传播:AI副业主理人必须掌握的4层口碑渗透模型(含ROI测算表)

从单点好评到指数级传播:AI副业主理人必须掌握的4层口碑渗透模型(含ROI测算表)

更多请点击: https://intelliparadigm.com 第一章:从单点好评到指数级传播:AI副业主理人必须掌握的4层口碑渗透模型(含ROI测算表) 当AI副业主理人不再仅满足于单次服务交付,而是主动构建可复用、可裂变、可…

2026/7/23 0:00:25 阅读更多 →
AI写作开头钩子设计:为什么你的AI文案完读率不足18%?——基于2,346篇A/B测试报告的归因分析

AI写作开头钩子设计:为什么你的AI文案完读率不足18%?——基于2,346篇A/B测试报告的归因分析

更多请点击: https://codechina.net 第一章:AI写作开头钩子设计:为什么你的AI文案完读率不足18%?——基于2,346篇A/B测试报告的归因分析 在对2,346篇跨行业AI生成文案的A/B测试数据进行聚类分析后,我们发现&#xff1…

2026/7/23 0:01:26 阅读更多 →
Chitchatter完整指南:免费开源的终极点对点安全聊天工具

Chitchatter完整指南:免费开源的终极点对点安全聊天工具

Chitchatter完整指南:免费开源的终极点对点安全聊天工具 【免费下载链接】chitchatter Secure peer-to-peer chat that is serverless, decentralized, and ephemeral 项目地址: https://gitcode.com/gh_mirrors/ch/chitchatter Chitchatter是一款革命性的安…

2026/7/23 0:01:26 阅读更多 →

周新闻

Go语言静态资源打包方案对比与实践指南

Go语言静态资源打包方案对比与实践指南

1. 项目背景与核心需求在Go语言开发中,我们经常需要处理静态资源文件的打包问题。无论是Web应用的模板文件、前端资源,还是配置文件、证书等,都需要随程序一起分发。传统做法是将这些文件与编译后的二进制文件放在同一目录下,但这…

2026/7/22 8:58:19 阅读更多 →
Go语言实现高性能LDAP认证服务的架构与实践

Go语言实现高性能LDAP认证服务的架构与实践

1. 项目背景与核心价值LDAP(轻量级目录访问协议)作为企业级身份认证的黄金标准,已经服务了超过80%的财富500强公司。我在金融科技领域实施统一认证体系时,发现传统Java方案存在启动慢、内存占用高等痛点。而Go语言凭借其协程并发模…

2026/7/22 19:43:43 阅读更多 →
【AI面试官实战指南】:用ChatGPT模拟10类高频技术岗面试,3天提升应答精准度92%

【AI面试官实战指南】:用ChatGPT模拟10类高频技术岗面试,3天提升应答精准度92%

更多请点击: https://intelliparadigm.com 第一章:AI面试官实战指南的核心价值与适用场景 AI面试官并非替代人类HR的“黑箱工具”,而是以可解释、可审计、可迭代的方式,赋能招聘全链路的关键基础设施。其核心价值在于将主观经验沉…

2026/7/23 17:49:47 阅读更多 →

月新闻