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

于 2024-03-14 16:22:30 发布
阅读量274 收藏
点赞数 1
分类专栏： Vue 移动端 文章标签： echarts 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42681295/article/details/136714199
版权

移动端使用 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
                }
            }
        }
    ]
}
牛先森家的牛奶
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js 简易版滚动条实例(适用于移动端H5开发)
10-19
下面小编就为大家带来一篇js 简易版滚动条实例(适用于移动端H5开发)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
解决Echarts2竖直datazoom滑动后显示数据不全的问题
10-15
主要介绍了解决Echarts2竖直datazoom滑动后显示数据不全的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
echarts 滚动条 dataZoom
最新发布
m0_70265923的博客
02-19 323
【代码】echarts 滚动条。
echarts实现获取datazoom的起始值(包括x轴和y轴)
10-15
主要介绍了echarts实现获取datazoom的起始值(包括x轴和y轴)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue 移动端 echarts 柱状图或折线图数据一页展示固定条数，且数据从右向左滑动。
qq_37309987的博客
08-04 1268
在进行移动端项目开发时，曾遇到这样的一个业务场景，有一个图表模块的开发，使用第三方组件echarts进行开发，以时间为统计维度数据从左向右展示，可视区域展示固定的3条数据，初始化时数据展示的最新日期的数据，用户可以从右向左滑动查看其他日期的数据。2、初始化时页面以最新的日期数据为起始展示数据，用户向左滑动可以看其他日期的数据；
08-Echarts配置系列之：dataZoom 区域缩放组件
youyudehan的博客
11-09 3485
简单快速了解 Echarts 中 dataZoom 区域缩放组件配置，并提供简单的示例代码参考
echarts的dataZoom属性在移动端 h5+环境中无法左右滑动问题
weixin_44492275的博客
01-11 2963
问题很迷 解决方法也很迷 dataZoom属性即使只有一条也要传入数组[] 不能直接传入对象{} // 这样不行 dataZoom:{ type: 'inside', start: 0, end: 50, }, // 这样就没问题 dataZoom:[ { type: 'inside', start: 0, end: 50, } ], ...
移动端echarts设置dataZoom之后，滚动时隐藏tooltip
gdutRex的博客
01-12 2685
需求 echart设置了datazoom同时也设置了tooltip的时候，左右滚动时候就会这样： 产品提出需求说要滚动的时候隐藏tooltip，要这样： 代码 这里其实需要记录状态，记录tooltip是否允许显示，如果不允许就关闭tooltip的显示，反之同理。 这里可以使用我上一篇文章提供的mixin的方法，可以阅读上一篇文章 引入了一个变量HIDE_ALL_TOOLTIP，监听它 watch: { // 动态隐藏tooltip HIDE_ALL_TOOLTIP(v) {
echarts主动触发datazoom事件
pingmeiniu的博客
07-23 6888
var myChart = echarts.init(document.getElementById("mapHourContainer")); myChart.dispatchAction({ type: 'dataZoom', // 可选，dataZoom 组件的 index，多个 dataZoom 组件时有用，默认为 0 dataZoomIndex: number,//一般不需要写 // 开始位置的百分比，0 - 100 sta.
学习使用jquery iScroll.js移动端滚动条插件
10-22
主要为大家详细介绍了jquery iScroll.js移动端滚动条插件的使用方法，以及iScroll.js使用注意事项，感兴趣的小伙伴们可以参考一下
支持移动端的jQuery滑动条拖动横向图片滚动特效
01-02
支持移动端的jQuery滑动条拖动横向图片滚动特效，基于jQuery插件mCustomScrollbar实现，支持定义向支持手动端响应式布局。
echarts实现横向和纵向滚动条、dataZoom及其滚动条设置
热门推荐
細水、長流√的专栏
09-10 1万+
echart没有滚动条概念，有配置选项类似滚动条，通过手段模拟滚动条效果....省略很多字（难）
echarts 柱状图带滑动条
qq_60808950的博客
04-24 988
echarts category图+dataZoom组件
Echarts使用小技巧
weixin_43157372的博客
06-24 7108
1、使用echarts柱状图时添加左右滚动功能 dataZoom:[ { type:"slider",//slider表示有滑动块的， show:true, xAxisIndex:[0],//表示x轴折叠 start:1,//数据窗口范围的起始百分比,表示1% end:35,//数据窗口范围的结束百分比,表示35%坐标 bottom:"20", }, ],
echarts使用dataZoom属性，左右滑动时折线图混乱或显示不全问题的解决方案
VVVVV
11-09 3623
问题复现 由图可知，8号数据为0且当前显示局部趋势与下方滑动条中趋势图形不符，排查问题发现是数据过滤的问题 解决方案 属性中加入filterMode: 'empty' 关于dataZoom中的filterMode属性可以查看官方文档 dataZoom-slider.filterMode 解决后效果图 ...
vue3 echarts滑动条datazoom怎么设置圆角
qq_46131497的博客
11-21 538
【代码】echarts滑动条datazoom怎么设置圆角。
Echarts图在移动端影响手机上下滑动问题
qq_32580307的博客
08-22 6760
场景：echarts图数据过多，就会要求设置datazoom属性可以左右拖动，但在手机端，整个页面只显示echarts图时会导致页面不能上下拖动。 解决办法：还是datazoom有个preventDefaultMouseMove属性，设为false， dataZoom: [{ type: 'inside', xAxisIndex: 0, ...
echarts 折线图 X轴 dataZoom 滚动条 禁止鼠标选取滚动条 只允许左右滑动
05-31
可以通过设置 dataZoom 组件的 `zoomLock` 属性来实现禁止鼠标选取滚动条，只允许左右滑动的效果。将 `zoomLock` 属性设置为 `true` 后，鼠标只能拖动滚动条进行左右滑动，不能进行区域选取。 示例代码如下： ```javascript option = { xAxis: { type: 'category', data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] }, yAxis: { type: 'value' }, dataZoom: { type: 'slider', zoomLock: true // 禁止鼠标选取滚动条，只允许左右滑动 }, series: [{ data: [120, 200, 150, 80, 70, 110, 130], type: 'line' }] }; ``` 在上述代码中，`dataZoom` 组件的 `type` 属性设置为 `slider`，表示使用滑动条组件。`zoomLock` 属性设置为 `true`，表示禁止鼠标选取滚动条，只允许左右滑动。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值