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

单线滚轮联动

<!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配置项。在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

为什么软件可以被破解，但是压缩包却破解不了？

为什么软件可以被破解，但是压缩包却破解不了？

为什么软件可以被破解&#xff0c;但是压缩包却破解不了&#xff1f; 软件的加密和压缩包的加密不是同一种加密。 压缩包的加密是传统意义上数据的加密&#xff0c;就是用一个密钥&#xff08;密码&#xff09;&#xff0c;对原始数据进行一些数学运算&#xff0c;得到一个密文…
阅读更多...
数据结构与算法之美学习笔记：19 | 散列表（中）：如何打造一个工业级水平的散列表？

数据结构与算法之美学习笔记：19 | 散列表（中）：如何打造一个工业级水平的散列表？

目录 前言如何设计散列函数&#xff1f;装载因子过大了怎么办&#xff1f;如何避免低效的扩容&#xff1f;如何选择冲突解决方法&#xff1f;工业级散列表举例分析解答开篇内容小结 前言 本节课程思维导图&#xff1a; 今天&#xff0c;我们就来学习一下&#xff0c;如何设计一…
阅读更多...
计算机视觉：使用opencv实现车牌识别

计算机视觉：使用opencv实现车牌识别

1 引言 汽车车牌识别&#xff08;License Plate Recognition&#xff09;是一个日常生活中的普遍应用&#xff0c;特别是在智能交通系统中&#xff0c;汽车牌照识别发挥了巨大的作用。汽车牌照的自动识别技术是把处理图像的方法与计算机的软件技术相连接在一起&#xff0c;以准…
阅读更多...
芯向未来｜紫光展锐CEO任奇伟博士受邀主持ICCAD 2023高峰论坛

芯向未来｜紫光展锐CEO任奇伟博士受邀主持ICCAD 2023高峰论坛

11月10日至11日&#xff0c;中国集成电路设计业2023年会暨广州集成电路产业创新发展高峰论坛&#xff08;ICCAD 2023&#xff09;在广州保利世贸博览馆召开&#xff0c;本届年会以“湾区有你&#xff0c;芯向未来”为主题&#xff0c;分开幕式、高峰论坛、7场专题研讨、产业展览…
阅读更多...
全局代码规范配置 （ Eslint ）

全局代码规范配置 （ Eslint ）

项目团队开发 为了保证统一的代码格式规范&#xff0c;可以借助两个插件以及 eslint 自由配置进行 首先需要在 vscode 安装 Eslint Prettier - Code formatter 安装所需依赖 pnpm install --save-dev eslint eslint-plugin-react eslint-plugin-react-hooks eslint…
阅读更多...
球星马布里申请香港高才通计划落户香港拿身份！谈谈香港身份的好处！

球星马布里申请香港高才通计划落户香港拿身份！谈谈香港身份的好处！

球星马布里申请香港高才通计划落户香港拿身份&#xff01;谈谈香港身份的好处&#xff01; 据香港政府新闻网14日消息&#xff0c;前美国职业篮球联赛球员马布里&#xff0c;日前向香港人才服务办公室递交高端人才通行证计划的申请。香港劳工及福利局局长孙玉菡与他会面&#x…
阅读更多...
黄金投资面对K线图有哪些好用的交易策略？

黄金投资面对K线图有哪些好用的交易策略？

在现货黄金交易中&#xff0c;学会观察K线图能够帮助投资者进行市场分析&#xff0c;根据K线图呈现出来的市场走势制定交易策略&#xff0c;是技术分析的主要作用。在黄金买卖过程中掌握K线交易技巧能够提升理财效率&#xff0c;所以这也就成为了炒金者的必修课。 K线图是以交…
阅读更多...
使用手机作为电脑的麦克风和摄像头外设

使用手机作为电脑的麦克风和摄像头外设

工具 Iriun Iriun 电脑端安装&#xff1a;Iriun Android: Iriun 4K Webcam for PC and Mac - Apps on Google Play Apple: Iriun Webcam for PC and Mac on the App Store 基础功能免费&#xff0c;普通使用足够了。 付费功能&#xff1a; 使用 这里有介绍&#xff1a…
阅读更多...
中国人民大学与加拿大女王大学金融硕士——人生下半场，用实力为自己“撑腰”

中国人民大学与加拿大女王大学金融硕士——人生下半场，用实力为自己“撑腰”

人生如同一场漫长的旅程&#xff0c;每个人都在不断地前行&#xff0c;经历着种种的人生阶段。当我们迈入人生的下半场&#xff0c;我们不再是无知少年&#xff0c;而是逐渐成为社会的中坚力量。在这个阶段&#xff0c;我们不仅要面对更多的挑战和压力&#xff0c;还需要用实力…
阅读更多...
VulnHub DC-6

VulnHub DC-6

&#x1f36c; 博主介绍&#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;我是 hacker-routing &#xff0c;很高兴认识大家~ ✨主攻领域&#xff1a;【渗透领域】【应急响应】 【python】 【VulnHub靶场复现】【面试分析】 &#x1f389;点赞➕评论➕收藏…
阅读更多...
【多线程面试题二十五】、说说你对AQS的理解

【多线程面试题二十五】、说说你对AQS的理解

文章底部有个人公众号&#xff1a;热爱技术的小郑。主要分享开发知识、学习资料、毕业设计指导等。有兴趣的可以关注一下。为何分享&#xff1f; 踩过的坑没必要让别人在再踩&#xff0c;自己复盘也能加深记忆。利己利人、所谓双赢。 面试官&#xff1a;说说你对AQS的理解 参…
阅读更多...
Facebook游戏出海营销指南

Facebook游戏出海营销指南

当谈到Facebook游戏出海营销时&#xff0c;有一些关键的策略和指南可以帮助你在国际市场上取得成功。下面是一个详细的指南&#xff0c;帮助你了解如何有效地推广和推出你的游戏。 1、了解目标市场 在开始出海营销之前&#xff0c;你需要对你的目标市场进行深入的研究。了解该…
阅读更多...
11月15日星期三今日早报简报微语报早读

11月15日星期三今日早报简报微语报早读

1、2023胡润女企业家榜出炉&#xff1a;郭得胜夫人邝肖卿首次成为中国女首富&#xff0c;龙湖吴亚军蝉联中国白手起家女首富&#xff1b; 2、叶剑英元帅夫人吴博逝世&#xff0c;享年106岁&#xff1b; 3、外交部&#xff1a;所谓“联合国军”是冷战产物&#xff0c;于法无据…
阅读更多...
前端跨界面之间的通信解决方案

前端跨界面之间的通信解决方案

主要是这两个方案&#xff0c;其他的&#xff0c;还有 SharedWorker 、IndexedDB、WebSocket、Service Worker 如果是&#xff0c;父子嵌套 iframe 还可以使用 window.parent.postMessage(“需要传递的参数”, ‘*’) 1、localStorage 核心点 同源&#xff0c;不能跨域(协议、端…
阅读更多...
Matter 协议详解

Matter 协议详解

目录 1、Matter 协议发展 1.1、什么是Matter 1.2、Matter能做什么 2、整体介绍 3、架构介绍 3.1、Matter网络拓扑结构 3.2、标识符 3.2.1、Fabric引用和Fabric标识符 3.2.2、供应商标识符&#xff08;Vendor ID&#xff0c;VID&#xff09; 3.2.3、产品标识符&#x…
阅读更多...
【vue实战项目】通用管理系统：api封装、404页

【vue实战项目】通用管理系统：api封装、404页

前言 本文为博主的vue实战小项目系列中的第三篇&#xff0c;很适合后端或者才入门的小伙伴看&#xff0c;一个前端项目从0到1的保姆级教学。前面的内容&#xff1a; 【vue实战项目】通用管理系统&#xff1a;登录页-CSDN博客 【vue实战项目】通用管理系统&#xff1a;封装to…
阅读更多...
【VSCode】Visual Studio Code 配置简体中文环境教程

【VSCode】Visual Studio Code 配置简体中文环境教程

介绍 Visual Studio Code&#xff08;简称 VS Code&#xff09;是一款轻量级的代码编辑器&#xff0c;它支持多种编程语言&#xff0c;并且具有丰富的功能和插件扩展。如果你更喜欢使用简体中文界面&#xff0c;那么本教程将向你展示如何在 VS Code 中配置简体中文环境。 步骤…
阅读更多...
Django之模版层

Django之模版层

文章目录 模版语法传值模版语法传值特性模版语法标签语法格式if模板标签for模板标签with起别名 模版语法过滤器常用过滤器 自定义过滤器、标签、inclusion_tag自定义过滤器自定义标签自定义inclusion_tag 模版导入模版继承 模版语法传值 模板层三种语法{{}}:主要与数据值相关{%…
阅读更多...
YOLO目标检测——树叶检测数据集下载分享【含对应voc、coco和yolo三种格式标签】

YOLO目标检测——树叶检测数据集下载分享【含对应voc、coco和yolo三种格式标签】

实际项目应用&#xff1a;生物多样性研究、林业管理、环境监测和教育科研等方面数据集说明&#xff1a;树叶分类检测数据&#xff0c;真实场景的高质量图片数据&#xff0c;数据场景丰富&#xff0c;总共十个类别。标签说明&#xff1a;使用lableimg标注软件标注&#xff0c;标…
阅读更多...
【文件读取/包含】任意文件读取漏洞 afr_2

【文件读取/包含】任意文件读取漏洞 afr_2

1.1漏洞描述 漏洞名称任意文件读取漏洞 afr_2漏洞类型文件读取漏洞等级⭐⭐漏洞环境dockers攻击方式 1.2漏洞等级 高危 1.3影响版本 暂无 1.4漏洞复现 1.4.1.基础环境 靶场dockers工具BurpSuite 1.4.2.环境搭建 1.kali创建docker-compose.yml文件 touch docker-compose.ym…
阅读更多...
最新文章

Copyright @ 2022~2023