echarts中dataZoom拖拽不起效果

news2025/1/17 1:08:36

vue3项目中,echarts使用dataZoom进行区域拖动,拖动下图红色框,数据展示无变化拖动功能失效。
在这里插入图片描述
原因
vue3中使用了ref或者reactive等初始化图表的变量

//定义
let myChart = ref<any>(null);
//使用
myChart.value = echarts.init(chartRef.value);

改为

let myChart = shallowRef();
myChart.value = echarts.init(chartRef.value);

注解
ref方法会递归遍历对象的所有属性,使所有属性都具备响应性,当对象很复杂时,过多的监听会导致性能上的损耗,也会对echarts页面渲染出现问题。

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

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

相关文章

京东年度数据报告-2023全年度净水器十大热门品牌销量榜单

近年来&#xff0c;随着科技的不断发展和应用&#xff0c;净水器的技术得到持续创新和提高&#xff0c;产品品质和使用效果不断优化&#xff0c;这也进一步提升了净水器的市场竞争力&#xff0c;2023年&#xff0c;净水器市场的销售成绩呈现增长。 根据鲸参谋平台的数据显示&a…

了解单元测试

一&#xff0c;测试分类 1.1 E2E测试&#xff08;end to end端到端测试&#xff09; 属于黑盒测试。 主要通过测试框架&#xff0c;站在用户测试人员的角度&#xff0c;模拟用户的操作进行页面功能的验证&#xff0c;不管内部实现机制&#xff0c;完全模拟浏览器的行为。&am…

接口自动化—pytest命令行操作

学习目标&#xff1a; 1、pytest的不同的运行方法 2、pytest常见的命令行参数 3、如何添加自定义的pytest命令行参数 学习内容&#xff1a; 1、pytest的不同的运行方法 1.1主要有三种情况的运行方式&#xff1a; 1.1.1没有使用pytest框架&#xff0c;但是要运行包含test…

微信多功能投票小程序源码系统:送礼物+在线充值+票数汇总+创建活动+完整的代码安装包 附带完整的搭建教程

微信已成为人们日常生活中不可或缺的一部分。因此&#xff0c;微信小程序也受到了广大用户的欢迎。在这个背景下&#xff0c;多功能投票小程序应运而生&#xff0c;为各种活动提供了方便快捷的投票方式。本文将介绍一款微信多功能投票小程序源码系统&#xff0c;该系统具有送礼…

Python | Iter/genartor | 一文了解迭代器、生成器的含义\区别\优缺点

前提 一种技术的出现&#xff0c;需要考虑&#xff1a; 为了实现什么样的需求&#xff1b;遇到了什么样的问题&#xff1b;采用了什么样的方案&#xff1b;最终接近或达到了预期的效果。 概念 提前理解几个概念&#xff1a; 迭代 我们经常听到产品迭代、技术迭代、功能迭代…

Apache Doris (六十一): Spark Doris Connector - (1)-源码编译

🏡 个人主页:IT贫道_大数据OLAP体系技术栈,Apache Doris,Clickhouse 技术-CSDN博客 🚩 私聊博主:加入大数据技术讨论群聊,获取更多大数据资料。 🔔 博主个人B栈地址:豹哥教你学编程的个人空间-豹哥教你学编程个人主页-哔哩哔哩视频 目录 1. Spark Doris Connector…

开发者必备的 Github 加速工具(截至2024年01月)

开始闲聊前&#xff0c;我要感谢大神小青龍总结的博文&#xff1a;作为程序员不得不知道的几款Github加速神器&#xff0c;给我们介绍了常用&#xff08;较为合规&#x1f604;&#xff09;的加速方法。毕竟 github 是开发者绕不过的宝库。 背景 我用 Github 将近12年&#x…

drf知识--11

补充 # 研究simple-jwt提供的Token类&#xff1a; 1、RefreshToken:生成refresh token的类 2、AccessToken:生成refresh token的类 3、Token&#xff1a;他们俩的父类 4、str(RefreshToken的对象)---得到字符串 refresh token&#xff0c;Token类写了 …

【linux学习】linux概述

1. linux概述 操作系统主要的功能有两个部分&#xff0c;一是更有效率的控制计算机硬件资源&#xff08;主要通过核心来控制&#xff09;&#xff0c;二是为程序设计师提供更容易开发软件的环境&#xff08;系统呼叫提供软件开发环境&#xff09;。linux就是一套操作系统&…

台灯学生用哪个牌子最好?学生护眼台灯最好的品牌推荐

如今的家长对教育十分重视&#xff0c;不仅给孩子提供了各种别致的文具&#xff0c;为了孩子有更好的学习光线&#xff0c;还会购买各种护眼台灯&#xff0c;但各种选择五花八门。从无蓝光、无频闪到柔和光&#xff0c;各种宣传亮点层出不穷……为了为孩子选购一款优质的学习护…

P3704数字表格(莫比乌斯反演)

题目背景 Doris 刚刚学习了 fibonacci 数列。用 fi​ 表示数列的第 i 项&#xff0c;那么 00,11f0​0,f1​1 fn​fn−1​fn−2​,n≥2 题目描述 Doris 用老师的超级计算机生成了一个 nm 的表格&#xff0c; 第 i 行第 j 列的格子中的数是 gcd(i,j)​&#xff0c;其中gcd(…

企业数据治理的三个阶段:从起步到成熟的数据管理之旅

随着数字化时代的到来&#xff0c;企业数据已经成为企业的重要资产和驱动业务发展的重要力量。然而&#xff0c;要想充分利用数据的价值&#xff0c;企业需要对其数据进行有效的管理和治理。本文将对企业数据治理的三个阶段进行详细的探讨&#xff0c;以帮助企业了解其在数据治…

5600U PVE安装WIN10后直通核显

修改PVE系统配置 请先安装相同版本的PVE系统&#xff0c;其他版本如果存在问题请自行查找。 安装过程比较简单&#xff0c;具体方法请自行百度 1. 修改grub启动参数&#xff1a; 修改文件 /etc/default/grub 中 GRUB_CMDLINE_LINUX_DEFAULT 配置&#xff1a; GRUB_CMDLINE_LI…

七款人体感应报警器电路图

人体感应报警器电路图&#xff08;一&#xff09; 人体发出的红外线波长在9&#xff5e;10um之间&#xff0c;属远红外线区。我们利用热释电红外传感器及信号处理集成电路&#xff0c;组装成一个人体红外线感应开关电路报警器&#xff0c;它能依靠人体发出的微量红外线进行开关…

一键减低PNG像素,轻松优化图片质量!

在数字时代&#xff0c;我们每天都要处理大量的图片文件&#xff0c;从网站设计、广告素材到社交媒体图片等。PNG作为一种常用的无损压缩格式&#xff0c;在保证图片质量的同时&#xff0c;也占用了较大的存储空间。为了优化存储空间和提高加载速度&#xff0c;我们需要对PNG图…

获取小红书笔记详情API调用说明(含请求示例参数说明)

前言 小红书&#xff0c;是一个引领全球时尚潮流的社交电商平台。在这里&#xff0c;你可以发现世界各地的优质好物&#xff0c;从美妆护肤、穿搭时尚&#xff0c;到家居生活、旅行美食&#xff0c;一切应有尽有。同时&#xff0c;这里也是一个分享生活点滴的平台&#xff0c;…

CPU平台做视频智能分析,Lnton视频分析平台不仅支持流分析,同时也支持图片分析了

LntonAIServer最新v1.0.09版本支持图片分析了&#xff0c;经过几个月的研发&#xff0c;在原有的视频流分析的基础上&#xff0c;我们终于支持大家都非常期待的图片分析功能了&#xff0c;图片分析的功能加上&#xff0c;能有利于很多场景的展开&#xff0c;比如在烟火、明厨亮…

蓝牙技术在智能交通系统中的革新与应用

随着科技的不断进步&#xff0c;蓝牙技术已经成为智能交通系统中的一项关键技术。其无线连接和低功耗的特性为交通管理和车辆通信提供了新的解决方案。本文将深入探讨蓝牙技术在智能交通系统中的应用&#xff0c;以及其对交通效率、安全性和用户体验的积极影响。 1. 蓝牙技术在…

5G工业物联网网关:连接未来的智能工业

在当今数字化时代&#xff0c;工业物联网正迅速崛起&#xff0c;并引领着全球工业的数字转型。而5G工业物联网网关作为实现IIoT的关键基础设施&#xff0c;在连接未来的智能工业中发挥着举足轻重的作用。 什么是5G工业物联网网关 5G工业物联网网关是连接工业设备和5G网络的关键…

“晨曦记账本:筛选特定时间段内的借款信息,管理更轻松!“

晨曦记账本&#xff0c;为您的财务记录带来前所未有的便捷&#xff01;现在&#xff0c;我们推出了一项新功能&#xff0c;让您能够轻松筛选特定时间段内的借款信息。这不仅让您更轻松地管理借款记录&#xff0c;还能确保您的财务数据一目了然。 首先&#xff0c;我们要打开晨…