移动端使用 echarts中 滚动条 dataZoom 改造为内容区域可以左右滚动

移动端使用 echarts中 滚动条 dataZoom 改造为内容区域可以左右滚动

直接上图 ：
在这里插入图片描述

主要是下面这段代码：

 "dataZoom": [{"type": "inside","show": false,"xAxisIndex": [0],"zoomOnMouseWheel": false,"moveOnMouseWheel": true,"moveOnMouseMove": true,"z": 4,"filterMode": "filter","startValue": 0,"endValue": 4,"disabled": false,"zoomLock": true,"preventDefaultMouseMove": true,"throttle": 100},{"type": "slider","realtime": true,"show": false,"height": 6,"width": 56,"xAxisIndex": [0],"fillerColor": "rgba(96, 172, 252,0.8)","borderColor": "rgba(96, 172, 252,0.6)","backgroundColor": "rgba(96, 172, 252,0.3)","showDataShadow": false,"showDetail": false,"left": 0,"bottom": 6,"moveHandleSize": 0,"z": 4,"filterMode": "filter","startValue": 0,"endValue": 4,"borderRadius": 3,"handleSize": "0","zoomLock": true,"brushSelect": false,"throttle": 100}],

下面的代码仅供参考：

 let dataZoomSlider = {"type": "slider","realtime": true,//拖动时，是否实时更新系列的视图。如果设置为 false，则只在拖拽结束的时候更新。"show": false,//是否显示 组件。如果设置为 false，不会显示，但是数据过滤的功能还存在。"height": normalFontSize(12),//滚动条高度"width": normalFontSize(112),//滚动条长度"xAxisIndex": [0],"fillerColor": "rgba(96, 172, 252,0.8)",//滑块填充颜色"borderColor": "rgba(96, 172, 252,0.6)",//滚动条边框颜色"backgroundColor": "rgba(96, 172, 252,0.3)",//滚动条背景颜色"showDataShadow": false,"showDetail": false,// "right": 50,"left": 0,"bottom": normalFontSize(12),"moveHandleSize": 0,"z": 4,"filterMode": "filter",// "start": 0,// // "end": 6,// "end": 4,startValue: 0,  // 重点在这   -- 开始的值endValue: 4,   // 重点在这   -- 结束的值"borderRadius": normalFontSize(6),//滚动条圆角// "dataBackground": {//     "lineStyle": {//         "color": "#ccc",//         "width": 0.5//     },//     "areaStyle": {//         "color": "#ccc",//         "opacity": 0.2//     }// },// "selectedDataBackground": {//     "lineStyle": {//         "color": "#eee",//         // "width": 0.5//     },//     "areaStyle": {//         "color": "#eee",//         "opacity": 0.2//     }// },// "handleIcon": "path://M-9.35,34.56V42m0-40V9.5m-2,0h4a2,2,0,0,1,2,2v21a2,2,0,0,1-2,2h-4a2,2,0,0,1-2-2v-21A2,2,0,0,1-11.35,9.5Z","handleSize": "0",//滑块左右两侧手柄大小，设为0则不显示// "handleStyle": {//     "color": "#fff",//     "borderColor": "#ccc"// },// "moveHandleIcon": "path://M-320.9-50L-320.9-50c18.1,0,27.1,9,27.1,27.1V85.7c0,18.1-9,27.1-27.1,27.1l0,0c-18.1,0-27.1-9-27.1-27.1V-22.9C-348-41-339-50-320.9-50z M-212.3-50L-212.3-50c18.1,0,27.1,9,27.1,27.1V85.7c0,18.1-9,27.1-27.1,27.1l0,0c-18.1,0-27.1-9-27.1-27.1V-22.9C-239.4-41-230.4-50-212.3-50z M-103.7-50L-103.7-50c18.1,0,27.1,9,27.1,27.1V85.7c0,18.1-9,27.1-27.1,27.1l0,0c-18.1,0-27.1-9-27.1-27.1V-22.9C-130.9-41-121.8-50-103.7-50z",// "moveHandleStyle": {//     "color": "#999",//     "opacity": 0.7// },"zoomLock": true,//true 则锁定选择区域的大小，也就是说，只能平移，不能缩放// "textStyle": {//     "color": "#333"// },"brushSelect": false,// "brushStyle": {//     "color": "rgba(96, 172, 252,0.3)"// },// "emphasis": {//     "handleStyle": {//         "borderColor": "#ccc"//     },//     "moveHandleStyle": {//         "color": "#ccc"//     }// },"throttle": 100,// "startValue": 0,// "endValue": val}let dataZoomInside = {"type": "inside",// width: 50,"show": false,"xAxisIndex": [0],"zoomOnMouseWheel": false,//滚轮是否触发缩放"moveOnMouseWheel": true,//鼠标滚轮能否触发平移"moveOnMouseMove": true,//鼠标移动能否触发平移"z": 4,"filterMode": "filter",// "start": 0,// // "end": 6,// "end": 5,startValue: 0,  // 重点在这   -- 开始的值endValue: 4,   // 重点在这   -- 结束的值"disabled": false,"zoomLock": true,//true 则锁定选择区域的大小，也就是说，只能平移，不能缩放"preventDefaultMouseMove": true,"throttle": 100,}option = {"color": ["#60acfc"],"tooltip": {"trigger": "axis","axisPointer": {"type": "shadow"},"confine": true,"extraCssText": "max-width:100%; white-space:pre-wrap"},"legend": {"right": "0%","top": "2%","itemWidth": 6,"itemHeight": 6,"icon": "rect","textStyle": {"color": "rgba(96, 172, 252,0.5)","width": 300,"overflow": "truncate","ellipsis": "..."}},"grid": {"left": "3%","right": "3%","bottom": "40","top": "20%","containLabel": true},"xAxis": [{"type": "category","data": ["类型1","类型2","类型3",],"axisTick": {"show": false},"axisLine": {"show": true,"lineStyle": {"color": "#ccc"}},"splitLine": {"show": false},"axisLabel": {"show": true,"color": "rgba(96, 172, 252,0.3)","fontSize": 13,"margin": 8,"showMaxLabel": true,"interval": 0}}],"yAxis": [{"type": "value","name": "单位：","position": "left","nameTextStyle": {"color": "rgba(96, 172, 252,0.5)","with": 80,"align": "left"},"splitLine": {"show": true,"lineStyle": {"type": "dashed","color": "#ccc"}},"axisTick": {"show": false},"axisLabel": {"show": true,"color": "rgba(96, 172, 252,0.6)","fontSize": 14},"minInterval": 1,"alignTicks": false,"max": 200}],"dataZoom": [{"type": "inside","show": false,"xAxisIndex": [0],"zoomOnMouseWheel": false,"moveOnMouseWheel": true,"moveOnMouseMove": true,"z": 4,"filterMode": "filter","startValue": 0,"endValue": 4,"disabled": false,"zoomLock": true,"preventDefaultMouseMove": true,"throttle": 100},{"type": "slider","realtime": true,"show": false,"height": 6,"width": 56,"xAxisIndex": [0],"fillerColor": "rgba(96, 172, 252,0.8)","borderColor": "rgba(96, 172, 252,0.6)","backgroundColor": "rgba(96, 172, 2520.3)","showDataShadow": false,"showDetail": false,"left": 0,"bottom": 6,"moveHandleSize": 0,"z": 4,"filterMode": "filter","startValue": 0,"endValue": 4,"borderRadius": 3,"handleSize": "0","zoomLock": true,"brushSelect": false,"throttle": 100}],"series": [{"data": ["100","101","102",],"type": "bar","symbol": "none","name": "数量","barWidth": 12,"yAxisIndex": 0,"label": {"show": true,"position": "top","color": "rgba(96, 172, 252,0.6)","fontSize": 14},"areaStyle": {"opacity": 0,"color": {"colorStops": [{"offset": 0,"color": "rgba(96, 172, 252,0.3)"},{"offset": 1,"color": "rgba(96, 172, 252,0)"}],"x": 0,"y": 0,"x2": 0,"y2": 1,"type": "linear","global": false}}}]
}

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

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

相关文章

Clickhouse 单机部署安装

Clickhouse 单机部署安装

前言 在大数据的时代背景下，数据的处理和分析能力成为企业竞争力的关键。ClickHouse，作为一款由俄国Yandex公司开发的分布式数据分析型数据库，凭借其卓越的性能和稳定性，赢得了业界的广泛关注。本文将介绍ClickHouse的基本概念、…
阅读更多...
Qt/QML编程之路：基于QWidget编程及各种2D/3D/PIC绘制的示例(45)

Qt/QML编程之路：基于QWidget编程及各种2D/3D/PIC绘制的示例(45)

关于使用GWidget，这里有一个示例，看了之后很多图形绘制，控件使用，及最基本的QWidget编程都比较清楚了。ui的绘制： 运行后的界面如 工程中有非常丰富的关于各种图形的绘制，比如上图中circle，还有image。有下面一段readme的说明： # EasyQPainter Various operation pra…
阅读更多...
回到街头 - 数字时尚嘉年华：Web3的时尚未来，4月香港兰桂坊盛大启幕

回到街头 - 数字时尚嘉年华：Web3的时尚未来，4月香港兰桂坊盛大启幕

随着区块链技术的不断发展，Web3世界正在逐渐改变我们的生活方式。作为这一变革的重要推动者，Vertex Labs荣幸地宣布，将在香港举办一场前所未有的“回到街头-数字时尚嘉年华”。这不仅是一场时尚与科技的完美结合，更是全球顶级IP和…
阅读更多...
Linux arrch64系统架构 py文件运行时的编码问题解决

Linux arrch64系统架构 py文件运行时的编码问题解决

问题： 因为要测试一些东西，所以必须有中文数据来做支撑，之前用的架构是x86，现在一个服务器的架构为arrch64，下列编码都挨个都进行声明，但是无法解决问题，总是报错 # -*- coding: gbk -*- # -*…
阅读更多...
考研数学——高数：高斯公式

考研数学——高数：高斯公式

助记: 关于积分时什么时候可以将变量整体代入积分式的问题：在积分过程中，如果某一整体恒为常量，则可以直接替换为定值，常见于对线或面的积分。 而在这题，用高斯公式之前是面积分，如果有这个整体出现的话是…
阅读更多...
在C#中使用NModbus4通信库执行【读】操作

在C#中使用NModbus4通信库执行【读】操作

在工业自动化和控制系统中，Modbus协议是一种广泛使用的通信协议。它是一种基于主从结构的串行通信协议，简单、可靠且易于实现。在C#中，可以使用NModbus4库来执行Modbus通信。本文将详细介绍如何使用NModbus4库在C#中执行Modbus读操作。 1. N…
阅读更多...
掌握Go语言：深入理解Go语言数组，基本原理与示例解析（15）

掌握Go语言：深入理解Go语言数组，基本原理与示例解析（15）

理解数组是理解编程语言中基本数据结构的重要一步。在Go语言中，数组是具有固定长度且由相同数据类型的元素组成的有序集合。下面我们将更详细地解释Go语言数组的各个方面。 1. 声明数组 在Go语言中，声明数组需要指定数组的长度和元素类型。语法如下&am…
阅读更多...
党费收缴管理系统（十八）关于支付total和payer_total差异的情况处理

党费收缴管理系统（十八）关于支付total和payer_total差异的情况处理

在前面我们将支付回调通知解密获取出来的数据 ，amount中有payer_total 和total两个值，正常情况下，这两个值应该是保持一致的。如果这两个值不一样，那么多半是党员缴纳过程使用了支付优惠券。 "amount":{"payer_t…
阅读更多...
什么是VPS？如何使用VPS？

什么是VPS？如何使用VPS？

什么是VPS？VPS有什么用？ VPS是Virtual Private Server的缩写，中文则为虚拟专用服务器，VPS是利用虚拟服务器软件在一台物理服务器上创建多个相互隔离的小服务器，是托管在机房物理服务器上的虚拟机。每个VPS服务器都可分…
阅读更多...
Figure与OpenAI 联手推出新机器人；荣耀首款「AI PC」即将发布

Figure与OpenAI 联手推出新机器人；荣耀首款「AI PC」即将发布

▶ Figure 与 OpenAI 联手推出新机器人 AI 机器人公司 Figure 发布了他们与 OpenAI 的合作成果，将 OpenAI 的大模型运用在其机器人 Figure 01 上。 据介绍，OpenAI 大模型加持的 Figure 01 机器人现在可以与人全面对话。 OpenAI 模型为机器人提供了高级…
阅读更多...
C# Onnx C2PNet 图像去雾 室内场景

C# Onnx C2PNet 图像去雾 室内场景

目录 介绍 效果 模型信息 项目 代码 下载 C# Onnx C2PNet 图像去雾 室内场景 介绍 github地址：GitHub - YuZheng9/C2PNet: [CVPR 2023] Curricular Contrastive Regularization for Physics-aware Single Image Dehazing [CVPR 2023] Curricular Contrasti…
阅读更多...
【蓝桥杯-单片机】基础模块：数码管

【蓝桥杯-单片机】基础模块：数码管

文章目录 【蓝桥杯-单片机】基础模块：数码管01 数码管原理图什么是位选和段选共阳极数码管和共阴极数码管的区分（1）共阳极数码管（Common Anode）：（2）共阴极数码管（Common …
阅读更多...
LinearLayout和RelativeLayout对比

LinearLayout和RelativeLayout对比

LinearLayout和RelativeLayout是Android中应用最为广泛的两种布局， 绝大部分UI均可以通过两种布局中的任何一种进行实现，其对比如下： LinearLayout： 1. LinearLayout可以实现子View按照权重分配显示区域，RelativeLayou…
阅读更多...
【力扣每日一题】力扣299猜数字游戏

【力扣每日一题】力扣299猜数字游戏

题目来源 力扣299猜数字游戏 题目概述 你在和朋友一起玩 猜数字（Bulls and Cows）游戏，该游戏规则如下： 写出一个秘密数字，并请朋友猜这个数字是多少。朋友每猜测一次，你就会给他一个包含下述信息的提示…
阅读更多...
mac输入su命令报错如何重置密码

mac输入su命令报错如何重置密码

diannao1xiejiandeMacBook-Air ~ % su Password: su: Sorry输入 sudo passwd 命令重置密码即可。
阅读更多...
【兔子机器人】实现从初始状态到站立

【兔子机器人】实现从初始状态到站立

一、遥想星空up主的方法 由于我有卡位结构，无法做到劈腿，而且底盘也不一样，无法使用此方法 但是其代码思想是可以借鉴的。 参考视频： 【【开源啦！】无刷轮腿平衡机器人】 【精准空降到 01:16】 https://www.bilibili…
阅读更多...
springboot项目jwt认证鉴权（企业级实现方案）

springboot项目jwt认证鉴权（企业级实现方案）

说明 背景&#xff1a;项目采用springcloud框架&#xff0c;用户鉴权从网关走的&#xff0c;但是当单独部署springboot服务时&#xff0c;没有鉴权第三方扫描通不过。 方案&#xff1a;在springboot微服务中单独集成jwt鉴权。 一、引入依赖 <dependency><groupId&g…
阅读更多...
LLM - 大语言模型的自注意力(Self-Attention)机制基础 概述

LLM - 大语言模型的自注意力(Self-Attention)机制基础 概述

欢迎关注我的CSDN&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://blog.csdn.net/caroline_wendy/article/details/136623432 注意力(Attention)机制是大型语言模型中的一个重要组成部分&#xff0c;帮助模型决定在处理信息时&#xff0c;所应该关注的部…
阅读更多...
52、WEB攻防——通用漏洞弱口令安全服务协议web应用

52、WEB攻防——通用漏洞弱口令安全服务协议web应用

文章目录 web类——加密&验证码后台服务类——SSH&RDP远程终端猜解应用类——zip&word文件压缩猜解 弱口令没有严格的定义&#xff0c;通常认为容易被别人猜测到或被破解工具破解的口令均为弱口令&#xff0c;通常与管理的安全意识和平台的初始化配置等相关&#x…
阅读更多...
LeetCode.2864. 最大二进制奇数

LeetCode.2864. 最大二进制奇数

题目 2864. 最大二进制奇数 分析 这道题目其实我们只需要保证最后一位是1&#xff0c;其余的1都放在最前面&#xff0c;这样得到的就是最大二进制奇数。 所以&#xff0c;我们先统计给定的字符串有多少个 1&#xff0c;多少个 0&#xff0c;把其中一个 1 放在最后一位&…
阅读更多...
最新文章

Copyright @ 2022~2023