【echarts】实现单线与多线滚轮联动、隐藏拖拽、关闭动画

news2024/9/20 18:39:01

单线滚轮联动

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts DataZoom</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.0/dist/echarts.min.js"></script>
</head>
<body>
    <div id="chart" style="width: 600px; height: 400px;"></div>

    <script>
        // 初始化echarts实例
        var myChart = echarts.init(document.getElementById('chart'));

        // 模拟数据
        var data1 = [10, 20, 30, 40, 50, 60, 70, 80, 90];

        // 配置项
        var option = {
            xAxis: {
                type: 'category',
                data: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                name: 'Line 1',
                type: 'line',
                data: data1
            }],
            dataZoom: [{
                type: 'inside',
                xAxisIndex: 0,
                start: 0,
                end: 100
            }, {
                type: 'inside',
                yAxisIndex: 0,
                start: 0,
                end: 100
            }]
        };

        // 使用刚指定的配置项和数据显示图表
        myChart.setOption(option);
    </script>
</body>
</html>

在这里插入图片描述

单线鼠标拖动

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts DataZoom</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.0/dist/echarts.min.js"></script>
</head>
<body>
    <div id="chart" style="width: 600px; height: 400px;"></div>

    <script>
        // 初始化echarts实例
        var myChart = echarts.init(document.getElementById('chart'));

        // 模拟数据
        var data1 = [10, 20, 30, 40, 50, 60, 70, 80, 90];

        // 配置项
        var option = {
            xAxis: {
                type: 'category',
                data: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                name: 'Line 1',
                type: 'line',
                data: data1
            }],
            dataZoom: [{
                type: 'inside',
                xAxisIndex: 0,
                start: 0,
                end: 100
            }, {
                type: 'inside',
                yAxisIndex: 0,
                start: 0,
                end: 100
            }, {
                type: 'slider',
                xAxisIndex: 0,
                start: 0,
                end: 100
            }, {
                type: 'slider',
                yAxisIndex: 0,
                start: 0,
                end: 100
            }
            ]
        };

        // 使用刚指定的配置项和数据显示图表
        myChart.setOption(option);
    </script>
</body>
</html>

在这里插入图片描述

多线滚轮联动

要通过鼠标滚轮联动变化echarts中的两组线，可以使用echarts的dataZoom组件来实现。dataZoom组件可以通过鼠标滚轮来缩放和平移图表的数据视图。

以下是一个简单的示例代码，展示了如何在echarts中使用dataZoom组件来实现鼠标滚轮联动变化：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts DataZoom</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.0/dist/echarts.min.js"></script>
</head>
<body>
    <div id="chart" style="width: 600px; height: 400px;"></div>

    <script>
        // 初始化echarts实例
        var myChart = echarts.init(document.getElementById('chart'));

        // 模拟数据
        var data1 = [10, 20, 30, 40, 50, 60, 70, 80, 90];
        var data2 = [5, 15, 25, 35, 45, 55, 65, 75, 85];

        // 配置项
        var option = {
            xAxis: {
                type: 'category',
                data: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                name: 'Line 1',
                type: 'line',
                data: data1
            }, {
                name: 'Line 2',
                type: 'line',
                data: data2
            }],
            dataZoom: [{
                type: 'inside',
                xAxisIndex: 0,
                start: 0,
                end: 100
            }, {
                type: 'inside',
                yAxisIndex: 0,
                start: 0,
                end: 100
            }]
        };

        // 使用刚指定的配置项和数据显示图表
        myChart.setOption(option);
    </script>
</body>
</html>

在这个示例中，我们使用dataZoom组件来实现鼠标滚轮联动变化。dataZoom组件包含两个部分：水平方向的xAxis和垂直方向的yAxis。我们在配置项dataZoom中定义了两个inside类型的dataZoom，分别与x轴

在这里插入图片描述

多线鼠标拖动

在echarts中实现鼠标拖动联动变化，可以使用dataZoom组件的slider类型。slider类型的dataZoom可以通过拖动滑块来选择数据范围。

以下是修改后的示例代码，演示了如何在echarts中使用dataZoom组件的slider类型来实现鼠标拖动联动变化：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts DataZoom</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.0/dist/echarts.min.js"></script>
</head>
<body>
    <div id="chart" style="width: 600px; height: 400px;"></div>

    <script>
        // 初始化echarts实例
        var myChart = echarts.init(document.getElementById('chart'));

        // 模拟数据
        var data1 = [10, 20, 30, 40, 50, 60, 70, 80, 90];
        var data2 = [5, 15, 25, 35, 45, 55, 65, 75, 85];

        // 配置项
        var option = {
            xAxis: {
                type: 'category',
                data: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                name: 'Line 1',
                type: 'line',
                data: data1
            }, {
                name: 'Line 2',
                type: 'line',
                data: data2
            }],
            dataZoom: [{
                type: 'slider',
                xAxisIndex: 0,
                start: 0,
                end: 100
            }, {
                type: 'slider',
                yAxisIndex: 0,
                start: 0,
                end: 100
            }]
        };

        // 使用刚指定的配置项和数据显示图表
        myChart.setOption(option);
    </script>
</body>
</html>

在这个示例中，我们将dataZoom组件的类型改为slider，并定义了两个slider类型的dataZoom，分别与x轴和y轴关联。通过拖动滑块，可以选择数据的范围，从而实现鼠标拖动联动变化。

在这里插入图片描述

隐藏拖拽的slider

隐藏拖拽的slider。你可以使用dataZoom组件的show属性来控制slider的显示和隐藏。

以下是一个示例代码，演示了如何隐藏拖拽的slider：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts DataZoom</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.0/dist/echarts.min.js"></script>
</head>
<body>
    <div id="chart" style="width: 600px; height: 400px;"></div>

    <script>
        // 初始化echarts实例
        var myChart = echarts.init(document.getElementById('chart'));

        // 模拟数据
        var data1 = [10, 20, 30, 40, 50, 60, 70, 80, 90];
        var data2 = [5, 15, 25, 35, 45, 55, 65, 75, 85];

        // 配置项
        var option = {
            xAxis: {
                type: 'category',
                data: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                name: 'Line 1',
                type: 'line',
                data: data1
            }, {
                name: 'Line 2',
                type: 'line',
                data: data2
            }],
            dataZoom: [{
                type: 'slider',
                xAxisIndex: 0,
                start: 0,
                end: 100,
                show: false  // 隐藏x轴的slider
            }, {
                type: 'slider',
                yAxisIndex: 0,
                start: 0,
                end: 100,
                show: false  // 隐藏y轴的slider
            }]
        };

        // 使用刚指定的配置项和数据显示图表
        myChart.setOption(option);
    </script>
</body>
</html>

在这个示例中，我们将dataZoom组件中的slider的show属性设置为false，从而隐藏了拖拽的slider。你可以根据需要选择隐藏x轴的slider、y轴的slider或者同时隐藏两者。

请根据实际需求修改代码，并根据你的图表要求设置相应的show属性。

在这里插入图片描述

关闭动画效果

实现鼠标移到图表时不闪动，可以使用echarts的animation配置项来控制图表的动画效果。

以下是一个示例代码，演示了如何在echarts中禁用图表的动画效果：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts Disable Animation</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.2.0/dist/echarts.min.js"></script>
</head>
<body>
    <div id="chart" style="width: 600px; height: 400px;"></div>

    <script>
        // 初始化echarts实例
        var myChart = echarts.init(document.getElementById('chart'));

        // 模拟数据
        var data1 = [10, 20, 30, 40, 50, 60, 70, 80, 90];
        var data2 = [5, 15, 25, 35, 45, 55, 65, 75, 85];

        // 配置项
        var option = {
            xAxis: {
                type: 'category',
                data: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                name: 'Line 1',
                type: 'line',
                data: data1
            }, {
                name: 'Line 2',
                type: 'line',
                data: data2
            }],
            animation: false  // 禁用动画效果
        };

        // 使用刚指定的配置项和数据显示图表
        myChart.setOption(option);
    </script>
</body>
</html>

在这个示例中，我们将配置项animation设置为false，从而禁用了图表的动画效果。这样，当鼠标移到图表上时，就不会出现闪动的效果。

请根据实际需求修改代码，并根据你的图表要求设置相应的animation配置项。在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

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

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

相关文章

京东数据挖掘（京东数据采集）：2023年Q3电脑行业数据分析报告

京东数据挖掘（京东数据采集）：2023年Q3电脑行业数据分析报告

近年来&#xff0c;在远程办公、远程教育等需求的刺激下&#xff0c;电脑的销售增长较为显著。不过&#xff0c;随着市场的成熟乃至饱和&#xff0c;电脑销售市场也逐渐出现增长困难、需求疲软等问题。 2023年第三季度&#xff0c;电脑市场的出货量同比下滑。根据鲸参谋电商数据…
阅读更多...
【ROS导航Navigation】四 | SLAM与导航 | 自主移动的地图构建 （更新ing）

【ROS导航Navigation】四 | SLAM与导航 | 自主移动的地图构建 （更新ing）

致谢&#xff1a;ROS赵虚左老师 Introduction Autolabor-ROS机器人入门课程《ROS理论与实践》零基础教程 参考赵虚左老师的实战教程 实现比较简单&#xff0c;步骤如下: 编写launch文件&#xff0c;集成SLAM与move_base相关节点&#xff1b;执行launch文件并测试。 <la…
阅读更多...
入门后端开发得学什么？这份超详细的后端开发学习路线图值得推荐！

入门后端开发得学什么？这份超详细的后端开发学习路线图值得推荐！

后端开发, 无疑是一个极为关键的领域&#xff0c;涉及到我们每日互联网生活的每个细节。每当你在网上浏览、搜索或进行购物等活动时&#xff0c;背后都有大量的后端技术作为支撑。而随着技术的日益进步&#xff0c;人们对于高效、稳定和安全的网络服务的需求也越来越高。 另一…
阅读更多...
[C/C++] 数据结构 链表OJ题:相交链表(寻找两个链表的相交起始结点)

[C/C++] 数据结构 链表OJ题:相交链表(寻找两个链表的相交起始结点)

题目描述: 给你两个单链表的头节点 headA 和 headB &#xff0c;请你找出并返回两个单链表相交的起始节点。如果两个链表不存在相交节点&#xff0c;返回 null 。 图示两个链表在节点 c1 开始相交&#xff1a; 题目数据 保证 整个链式结构中不存在环。 注意&#xff0c;函数返…
阅读更多...
Unity中Shader矩阵的乘法

Unity中Shader矩阵的乘法

文章目录 前言一、矩阵乘以标量二、矩阵和矩阵相乘1、第一个矩阵的列数必须 与 第二个矩阵的行数相等&#xff0c;否则无法相乘&#xff01;2、相乘的结果矩阵&#xff0c;行数由第一个矩阵的行数决定&#xff0c;列数由第二个矩阵的列数决定&#xff01; 三、单位矩阵四、矩阵…
阅读更多...
Django模版层

Django模版层

解析: forloop内置对象:运行结果解析 counter0: 从0开始计数 counter : 从1开始计数 first: True,判断循环的开始 last : Tues,判断循环的结束模版变量的书写 我们可以在html中编写python代码。 演示&#xff1a; {{ 填写变量 }}{% 填写类的 %}{{ d.0 }} {{ d.1 }…
阅读更多...
找风景视频素材，就上这5个网站。

找风景视频素材，就上这5个网站。

找风景视频素材那一定要上这6个网站&#xff0c;免费下载&#xff0c;赶紧收藏&#xff01; 1、菜鸟图库 https://www.sucai999.com/video.html?vNTYxMjky 菜鸟图库网素材非常丰富&#xff0c;网站主要还是以设计类素材为主&#xff0c;高清视频素材也很多&#xff0c;像风景…
阅读更多...
C++: 模板初阶

C++: 模板初阶

文章目录 一. 泛型编程二. 函数模板函数模板的原理函数模板的实例化隐式实例化: 让编译器根据实参推演模板参数的实际类型显示实例化: 在函数名后的<>中制定模板参数的世纪类型 模板参数的匹配原则 三. 类模板类模板的定义格式类模板的实例化 一. 泛型编程 如何实现一个…
阅读更多...
汽车FMCW毫米波雷达信号处理流程(推荐---基础详细---清楚的讲解了雷达的过程---强烈推荐）------假设每个Chirp采集M个样本点

汽车FMCW毫米波雷达信号处理流程(推荐---基础详细---清楚的讲解了雷达的过程---强烈推荐）------假设每个Chirp采集M个样本点

毫米波雷达在进行多目标检测时，TX发射一个Chirp，在不同距离下RX会接收到多个反射Chirp信号（仅以单个chirp为例）。 雷达通过接收不同物体的发射信号，并转为IF信号，利用傅里叶变换将产生一个具有不同的分离峰值的频谱，每个峰值表示在特定距离处存在物体。 请问，这种多目标…
阅读更多...
《持续交付：发布可靠软件的系统方法》- 读书笔记（十四）

《持续交付：发布可靠软件的系统方法》- 读书笔记（十四）

持续交付&#xff1a;发布可靠软件的系统方法&#xff08;十四&#xff09; 第 14 章 版本控制进阶14.1 引言14.2 版本控制的历史14.2.1 CVS14.2.2 SVN14.2.3 商业版本控制系统14.2.4 放弃悲观锁 14.3 分支与合并14.3.1 合并14.3.2 分支、流和持续集成 14.4 DVCS14.4.1 什么是 …
阅读更多...
云课五分钟-04一段代码学习-大模型分析C++

云课五分钟-04一段代码学习-大模型分析C++

前篇&#xff1a; 云课五分钟-03第一个开源游戏复现-贪吃蛇 经过01-03&#xff0c;基本了解云课最大的优势之一就是快速复现&#xff08;部署&#xff09;。 视频&#xff1a; 云课五分钟-04一段代码学习-大模型分析C AIGC大模型时代&#xff0c;学习编程语言的方式&#xf…
阅读更多...
腾讯待办停止运营怎么办?导出的ics文件数据怎么打开查看

腾讯待办停止运营怎么办?导出的ics文件数据怎么打开查看

待办提醒类工具是日常办公及生活中必不可少的工具&#xff0c;使用待办提醒类工具可以记录很多容易忘记的事情&#xff0c;其可以帮助大家轻松管理各项事务和提高办事的效率。而随着工作的不断变动&#xff0c;大家选择待办提醒类工具也会不断的发生改变。 比如就拿我自己的使…
阅读更多...
2023测试工程师做哪些准备，才能从众人中脱颖而出，不看后悔10年

2023测试工程师做哪些准备，才能从众人中脱颖而出，不看后悔10年

最近&#xff0c;裁员的声音此起披伏。貌似我们只有努力奔跑&#xff0c;这一块带有命运诅咒的“石头”才不会轻易的落到我们的头上。 在不是金三银四、金九银十的求职旺季外&#xff0c;还会有机会吗&#xff1f;我想&#xff0c;对于有能力的人来说&#xff0c;任何时候都可…
阅读更多...
（三）什么是Vite——Vite 主体流程(运行npm run dev后发生了什么？)

（三）什么是Vite——Vite 主体流程(运行npm run dev后发生了什么？)

什么是vite系列目录: &#xff08;一&#xff09;什么是Vite——vite介绍与使用-CSDN博客 &#xff08;二&#xff09;什么是Vite——Vite 和 Webpack 区别&#xff08;冷启动&#xff09;-CSDN博客 &#xff08;三&#xff09;什么是Vite——Vite 主体流程(运行npm run dev…
阅读更多...
慧眼APP开发项目

慧眼APP开发项目

目录 第1章 项目概述... 3 第2章 可行性分析... 4 2.1 技术可行性... 4 2.2 数据可行性... 4 2.3 应用可行性... 4 第3章 环境搭建... 5 3.1 模型搭建... 5 3.1.1 安装PaddleDetection. 5 3.1.2 自定义数据集... 5 3.2 APP搭建... 5 3.2.1 安装Android Studio. 5 3.…
阅读更多...
C++入门(1)—命名空间、缺省参数

C++入门(1)—命名空间、缺省参数

目录 一、什么是C 1、C关键字(C98) 2、C兼容C 二、C程序预处理指令 三、命名空间 1、命名冲突 第一种&#xff1a; 第二种&#xff1a; 2、域作用限定符 3、实现命名空间 4、命名空间冲突 5、访问命名空间 6、命名空间“std” 四、输入输出 1、定义 2、自动识…
阅读更多...
Python开源项目DifFace——人脸重建（Face Restoration），模糊清晰、划痕修复及黑白上色的实践

Python开源项目DifFace——人脸重建（Face Restoration），模糊清晰、划痕修复及黑白上色的实践

无论是自己、家人或是朋友、客户的照片&#xff0c;免不了有些是黑白的、被污损的、模糊的&#xff0c;总想着修复一下。作为一个程序员 或者 程序员的家属&#xff0c;当然都有责任满足他们的需求、实现他们的想法。除了这个&#xff0c;学习了本文的成果&#xff0c;或许你还…
阅读更多...
如何在面试中胜出？接口自动化面试题安排上

如何在面试中胜出？接口自动化面试题安排上

&#x1f4e2;专注于分享软件测试干货内容&#xff0c;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; 如有错误敬请指正&#xff01;&#x1f4e2;交流讨论&#xff1a;欢迎加入我们一起学习&#xff01;&#x1f4e2;资源分享&#xff1a;耗时200小时精选的「软件测试」资…
阅读更多...
Godot4.1 GDExtension 配置VisualStudio方法梳理以及快捷配置工具

Godot4.1 GDExtension 配置VisualStudio方法梳理以及快捷配置工具

写在最前 本篇教程基于之前教程&#xff0c;并且默认为Windows10&#xff0c;64位&#xff0c;Godot版本4.1.3如果遇到任何问题&#xff0c;欢迎及时提出&#xff0c;如果配置成功了请点个赞&#xff0c;球球啦。 之前教程 https://blog.csdn.net/qq_31805591/article/detai…
阅读更多...
天机学堂-1、项目搭建，微服务架构设计

天机学堂-1、项目搭建，微服务架构设计

1.学习背景 各位同学大家好&#xff0c;经过前面的学习我们已经掌握了《微服务架构》的核心技术栈。相信大家也体会到了微服务架构相对于项目一的单体架构要复杂很多&#xff0c;你的脑袋里也会有很多的问号&#xff1a; 微服务架构该如何拆分&#xff1f; 到了公司中我需要自…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023