echarts 如何设置(dataZoom)多个图形的数据区域一起联动缩放响应

数据区域联动缩放需要用到 dataZoom 的专属事件 dispatchAction
在这里插入图片描述
实现多个数据区域联动缩放功能

<div style="width:100%;height:320px;" id="test01"></div>
<div style="width:100%;height:320px;" id="test02"></div>
<div style="width:100%;height:320px;" id="test03"></div>
let option = {title:{text:'测试'},tooltip: {trigger: 'axis',backgroundColor: 'rgba(17,21,43,0.75)',textStyle:{color:'#FFFFFF'},axisPointer: {type: 'cross'},},legend: {right:'5%',data: ['测试']},grid: {left: '2%',right: '4%',bottom: 50,containLabel: true},dataZoom: [{show: true,height: 20}],xAxis: [{type: 'category',axisLine: { show: false },axisTick: { show: false },boundaryGap: ['20%', '20%'],data:[12,32,52,72,92]}],yAxis: [{type: 'value',name: '测试',axisLine: { show: false },axisTick: { show: false }}],series: [{name: '测试',type: 'line',symbol: 'circle',data: [12,13,43,56,78],xAxisIndex:0,}            ]}
let test1 = echarts.init(document.getElementById('test01'));
let test2 = echarts.init(document.getElementById('test02'));
let test3 = echarts.init(document.getElementById('test03'));option && test1.setOption(option);
option && test2.setOption(option);
option && test3.setOption(option);this.linkageZoom(test1,[test2,test3])linkageZoom(test1, arr){test1.on('datazoom', function(params) {arr.forEach(item => {item && item.dispatchAction({ // 触发 dataZoom 事件type: 'dataZoom',zoomLock: true, // 锁定整个图表的缩放功能xAxisIndex: params.xAxisIndex, // xAxisIndex 为当前操作的 xAxisIndex,用于确定对应的 xAxis 对象yAxisIndex: params.yAxisIndex, // yAxisIndex 为当前操作的 yAxisIndex,用于确定对应的 yAxis 对象start: params.start, // start 为当前操作的时间范围起始值end: params.end // end 为当前操作的时间范围结束值});})})
}

代码详解: test1的数据区域缩放改变后,会带动 test2,test3的数据区域缩放一起改变,并且 test2 test3的数据区域缩放可以单独拖动改变

echarts区域缩放相关链接: https://echarts.apache.org/zh/api.html#action.dataZoom.dataZoom

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

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

相关文章

ssm 项目 连接 redis 报错 : 可能是 不加 密码就不报错了

ssm 项目 连接 redis 报错 &#xff1a; 可能是 不加 密码就不报错了**

MAC(M1芯片)编译Java项目慢且发热严重问题解决方案

目录 一、背景二、排查三、解决四、效果以及结果展示五、总结 一、背景 使用idea编译项目等操作&#xff0c;经常性发热严重&#xff0c;并且时间慢。直到昨天编译一个项目用时30分钟&#xff0c;电脑温度很高&#xff0c;并且有烧灼的味道&#xff0c;于是有了此篇文章。 二、…

C++(六个默认成员函数)

目录 六个默认成员函数构造函数析构函数拷贝构造函数 总结 六个默认成员函数 默认成员函数的概念&#xff1a;如果用户不显式写&#xff0c;编译器会自动生成的函数&#xff0c;就是默认成员函数 构造函数 构造函数是六个默认成员函数之一&#xff0c;构造函数的功能类似于init…

C#面:什么链式委托

链式委托是指将多个委托实例连接在一起&#xff0c;形成一个委托链&#xff0c;使得多个方法可以按照一定的顺序依次被调用。 在C#中&#xff0c;可以使用""运算符来连接多个委托实例&#xff0c;形成一个新的委托实例。 当调用链式委托时&#xff0c;每个委托实例都…

懒人必备!4个PS抠图技巧,让你轻松处理复杂背景!

今天带给大家的又是一个绝对重要的知识&#xff0c;那就是“抠图”&#xff01; 在我们的设计中&#xff0c;抠图可以说是最常见的运用啦&#xff0c;简单的PS抠图我们都会&#xff0c;但是最令我们头痛的人物或者动物的毛发的抠图了&#xff0c;很多人都抠不好&#xff0c;我…

合并单元格的excel文件转换成json数据格式

github地址: https://github.com/CodeWang-Ay/DataProcess 类型1 需求1: 类似于数据格式: https://blog.csdn.net/qq_44072222/article/details/120884158 目标json格式 {"位置": 1, "名称": "nba球员", "国家": "美国"…

华为机试题

目录 第一章、HJ1计算字符串最后一个单词的长度&#xff0c;单词以空格隔开。1.1&#xff09;描述1.2&#xff09;解题第二章、算法题HJ2 计算某字符出现次数1.1&#xff09;题目描述1.2&#xff09;解题思路与答案第三章、算法题HJ3 明明的随机数1.1&#xff09;题目描述1.2&a…

eBPF专题一 | 手把手教你用eBPF诊断MySQL(含源码)

DBdoctor 是一款数据库内核级性能诊断工具&#xff0c;利用eBPF技术深入数据库内核&#xff0c;致力于解决数据库的一切性能问题。 被称之为“革命性”内核技术的eBPF一直以来都备受关注&#xff0c;而DBdoctor作为一款数据库性能诊断工具&#xff0c;首次将eBPF技术深入应用…

centos 安装 stable-diffusion 详细流程

一、准备环境 安装git 新版 先安装git 工具来更新git源码 &#xff0c; 载下源码后卸载git 版本(centos 默认1.8版本&#xff0c;说是安装会引起失败) 安装git 命令&#xff0c;可使用 git --version查看版本 sudo yum install git -y 卸载git命令 sudo yum remove git 正式…

golang 中 sync包

WaitGroup WaitGroup 的用途&#xff1a;它能够一直等到所有的 goroutine 执行完成&#xff0c;并且阻塞主线程的执行&#xff0c;直到所有的 goroutine 执行完成。 WaitGroup 总共有三个方法&#xff1a;Add(delta int), Done(), Wait()。简单的说一下这三个方法的作用。 Add&…

FPGA实现Canny算法(Verilog)

在边缘检测算法里面Sobel是比较简单的一个算法&#xff0c;但是其检测出来的边缘往往是比较粗的&#xff0c;效果不是很好&#xff0c;因为我们最理想的边缘肯定就是一个宽度为1的细线。 Canny算法在此基础上进行了改进&#xff0c;通过使用边缘的梯度信息进行非最大值抑制(NM…

PCL 点到圆柱的距离(3D)

文章目录 一、简介二、实现代码三、实现效果参考资料一、简介 这里的思路也很简单,我们只需要将点转换到圆柱坐标系下,在该系统中,点(0,0,0)为圆柱轴原点,(0,0,1)为圆柱轴方向,那么此时计算点到圆柱的距离就简单很多了,我们可以利用正射投影快速的获得距离结果。 二、实现…

【随笔】Git 高级篇 -- 最近标签距离查询 git describe(二十一)

&#x1f48c; 所属专栏&#xff1a;【Git】 &#x1f600; 作  者&#xff1a;我是夜阑的狗&#x1f436; &#x1f680; 个人简介&#xff1a;一个正在努力学技术的CV工程师&#xff0c;专注基础和实战分享 &#xff0c;欢迎咨询&#xff01; &#x1f496; 欢迎大…

【计算机毕业设计】企业仓储管理系统——后附源码

&#x1f389;**欢迎来到我的技术世界&#xff01;**&#x1f389; &#x1f4d8; 博主小档案&#xff1a; 一名来自世界500强的资深程序媛&#xff0c;毕业于国内知名985高校。 &#x1f527; 技术专长&#xff1a; 在深度学习任务中展现出卓越的能力&#xff0c;包括但不限于…

5.消息队列

消息队列 ​ 消息队列是一种常用的线程间通讯方式&#xff0c;用来传输数据。使用消息队列传输数据时有两种方法&#xff1a;拷贝&#xff1a;把数据、把变量的值复制进消息队列里&#xff1b;引用&#xff1a;把数据、把变量的地址复制进消息队列里。rtt使用拷贝值的方法。 …

python-pytorch实现CBOW 0.5.000

python-pytorch实现CBOW 0.5.000 数据加载、切词准备训练数据准备模型和参数训练保存模型加载模型简单预测获取词向量降维显示图使用词向量计算相似度参考 数据加载、切词 按照链接https://blog.csdn.net/m0_60688978/article/details/137538274操作后&#xff0c;可以获得的数…

由近期 RAGFlow 的火爆看 RAG 的现状与未来

4 月 1 日&#xff0c;InfiniFlow &#xff08;英飞流&#xff09;的端到端 RAG 解决方案 RAGFlow 正式开源&#xff0c;首日即获得了 github 千星&#xff0c;目前已接近 3000 star。在这之前&#xff0c;InfiniFlow 还开源了专门用于 RAG 场景的 AI 原生数据库 Infinity&…

用 ElementPlus 的日历组件 Calendar 自定义渲染

文章目录 需求分析1. 英文改为中文2. 修改样式3. 自定义头部4. 增删改功能接入需求 使用 ElementPlus中的 Calendar 组件完成自定义渲染 分析 1. 英文改为中文 转为中文的方式:用 ElementPlus的日历组件如何改为中文 2. 修改样式 附源码<template><el-calendar&…

[工程经验] 模块设计规范

模块设计规范 文章目录 模块设计规范1.需求2.概念与逻辑图3.主要的数据结构图4.算法5.接口定义 1.需求 根据需求文档&#xff0c;摘录模块的对应部分&#xff0c;细化到可指导开发的程度&#xff0c;并根据实现的需要进行拓展&#xff0c;落地为一份设计文档。 2.概念与逻辑图…

linux查看硬盘空间使用情况

df &#xff08;1&#xff09;查看磁盘空间的占用情况 -h是给大小带上单位 df -h 总空间不一定等于已用未用&#xff0c;系统可能留出来一点空间另做他用 &#xff08;2&#xff09;查看INode的使用情况 df -idu du命令比df命令复杂一点&#xff0c;是查看文件和目录占用的…