移动端使用 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 -*- # -*…
阅读更多...
考研数学——高数：高斯公式

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

助记: 关于积分时什么时候可以将变量整体代入积分式的问题：在积分过程中，如果某一整体恒为常量，则可以直接替换为定值，常见于对线或面的积分。 而在这题，用高斯公式之前是面积分，如果有这个整体出现的话是…
阅读更多...
党费收缴管理系统（十八）关于支付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 …
阅读更多...
mac输入su命令报错如何重置密码

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

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

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

一、遥想星空up主的方法 由于我有卡位结构，无法做到劈腿，而且底盘也不一样，无法使用此方法 但是其代码思想是可以借鉴的。 参考视频： 【【开源啦！】无刷轮腿平衡机器人】 【精准空降到 01:16】 https://www.bilibili…
阅读更多...
LLM - 大语言模型的自注意力(Self-Attention)机制基础 概述

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

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

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

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

LeetCode.2864. 最大二进制奇数

题目 2864. 最大二进制奇数 分析 这道题目其实我们只需要保证最后一位是1，其余的1都放在最前面，这样得到的就是最大二进制奇数。 所以，我们先统计给定的字符串有多少个 1，多少个 0，把其中一个 1 放在最后一位&…
阅读更多...
LORA_ LOW-RANK ADAPTATION OF LARGE LANGUAGE MODELS

LORA_ LOW-RANK ADAPTATION OF LARGE LANGUAGE MODELS

paper: https://arxiv.org/pdf/2106.09685.pdf code: https://github.com/microsoft/LoRA 摘要 作者提出了低秩自适应，或称LoRA，它冻结了预先训练的模型权值，并将可训练的秩分解矩阵注入变压器架构的每一层，大大减少了下游任务的…
阅读更多...
Python爬虫实战入门：豆瓣电影Top250(保你会，不会来打我)

Python爬虫实战入门：豆瓣电影Top250(保你会，不会来打我)

文章目录 需求所需第三方库requests模块lxml模块了解 lxml模块和xpath语法xpath语法-基础节点选择语法 实战教程完整代码 需求 目标网站: https://movie.douban.com/top250 需求: 爬取电影中文名、英文名、电影详情页链接、导演、主演、上映年份、国籍、类型、评分、评分人数, …
阅读更多...
AIGC笔记--关节点6D位姿按比例融合

AIGC笔记--关节点6D位姿按比例融合

1--核心代码 6D位姿一般指平移向量和旋转向量，Maya软件中关节点的6D位姿指的是相对平移向量和欧拉旋转向量； 为了按比例融合两个Pose，首先需要将欧拉旋转向量转换为旋转矩阵，在将旋转矩阵转换为四元数，利用球面线性插值…
阅读更多...
springboot项目自定义切面增强方法功能（springboot记录日志）

springboot项目自定义切面增强方法功能（springboot记录日志）

说明 背景：记录系统接口日志入库，包含接口方法、入参、回参、响应时间、操作人、操作时间等信息。 方案：添加自定义切面处理 一、自定义切面注解 package com.gstanzer.supervise.annotation;import com.gstanzer.supervise.enums.Busine…
阅读更多...
中宣部防沉迷系统PHP版本(管局防沉迷验证-PHP-全版本-接口测试样例)

中宣部防沉迷系统PHP版本(管局防沉迷验证-PHP-全版本-接口测试样例)

现在对接游戏，无论是登录还是支付都是要去对接防沉迷实名认证接口，但前期的话你要登录网络游戏防沉迷实名认证系统进行接口测试，$appid ，$bizId，$key去接口测试页面找（正式上线在密钥管理）&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023