Echarts图表在移动端会影响页面的滚动,请问该怎么解决? 10C

在移动端使用Echarts图表,当指头移到图表上,页面就无法滚动了。
如果页面Echarts图表就一个,面积又不大,则带来的问题还不是很明显。如果页面Echarts图表又多又大,那就相当悲剧了,页面跟卡住了似的。请问有没有解决的办法?非常感谢!

0

5个回答

0
u011218527
阿琛Bonnie 这个网址根本没给出解决方案呀,官方也并没有修复这个bug
2 年多之前 回复

换个echart.min.js版本试试

0

我觉得当指头进入图表以后,可能就不能响应图表外层的拖动效果了,可以尝试一个笨方法,在页面上留一条区域,和图表区域区分开,手指放到上面时可以触发拖动效果,但是不会进入图表区域

0

我感觉应该是由于焦点问题吧

0

在如果图表不要求可以拖动的话,可以直接在图标上覆盖一个透明层,如果要求拖动,不妨试试 @王蛇无毒 说的,分区域来处理

0
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
Echarts图表在移动端和小程序中影响页面的滚动的解决办法
Echats图表在移动端显示后,当手指在图表区域内滑动,会影响页面的滚动。h5页面没有亲测,小程序页面,经排查,是因为触发了touchStart、touchMove和touchEnd方法。 一、h5页面解决方法 1.如果可以的话,移动端建议使用highCharts代替echarts,感觉highcharts更适合移动端。 2.如果不需要与图表进行交互,而只是纯展示的时候,可以用一个透明的元素...
echarts 移动端 滑动 不好用
如果遇到 在手机端使用 echarts 在手 滑动到 统计图表的时候, 滚动无法生效,卡顿的情况; 需要 更新 使用的 echarts 版本 就可以解决,新版版本echarts 解决了此问题 官方 提问和 解释 https://github.com/ecomfe/echarts/issues/5897可以在此下载 最近版本echarts https://github.com/ecomfe
[问题探讨]H5移动端无限懒加载echarts图表引起的IOS闪退问题
背景:Vue+Echarts+mintUI开发移动端app 问题:Echarts图表在IOS端懒加载多个时出现闪退 问题分析: 频繁操作App直到闪退出现,监控内存使用情况后发现,在操作过程中内存一直升高,到600M时软件闪退; 考虑从两方面解决: 一,减轻echarts图表渲染的压力(只渲染视口内的图表); 二,抑制频繁请求,减轻内存压力(抑制无效请求); 一,减轻echarts图...
web移动端浮层滚动带动底层元素滚动问题解决
当我们写了这样一个结构的时候 <div class="box"> <p> 拉开了就开始的放假老实交代方会计师 拉开了就开始的放假老实交代方会计师 拉开了就开始的放假老实交代方会计师 拉开了就开始的放假老实交代方会计师 拉开了就开始的放假老实交代方会计师 拉开了就开始的...
解决 vue 中拖动时多个页面互相影响的问题 (使用前端路由,当切换到新路由时,想要页面滚到顶部)
在路由中,添加 scrollBehavior (to, from, savedPosition) {return { x: 0, y: 0 } }当切换到新路由时,想要页面滚到顶部 export default new Router({     routes: [ {        path: '/',        name: 'Home',       component: Home...
echarts微信小程序图表不跟随滑动问题
使用echarts时界面滑动时,图标不跟随滑动,浮在元素上方。 【 问题原因】该布局中含有position:fixed或absulote的元素,导致echarts图表也被固定了儿无法滑动。 【 解决方法】所有父级元素(有包含ec-canvas的所有view元素)的position不可为fixed或absulote,将其改为其他,另外兄弟元素可以为position:absulote,不能是f...
react-native-echarts 在手机上 图表出现滚动条解决方法
修改 native-echarts 包--> src --> components --> Echarts --> index.js 文件
移动端弹框内容过多,需要滑动的时,页面也会跟着一起滑动
使用场景: 移动端弹框内容和较多,需要滑动,但是body页面也会随之一起滑动,会干扰用户的关注点,体验效果不好,所以就需要在弹框滑动时,禁止页面滑动,并且需要记录点击弹框时页面距离顶部的距离,否则在页面滑动过一段距离时,点击弹框,页面会瞬间调到顶部。 在试了一些网上的方法后,最后总结出以下方法,在移动端测试过是OK的,但是没有测试过所有的机型。 // 点击弹框时 // 需要先获取去body的t...
Vue 组件间滚动条互相影响 详情页列表页滚动条相互影响的解决方案 (或许就是你的正解)
今天踩了一个坑 也是自己理解不深的原因吧 写Vue列表页到详情页的跳转的时候 详情页怎样布局都会带有列表页的滚动条 后来发现是路由的关系 受组件的影响 以为详情页要和列表页嵌套在一起 后来发现路由拆开就好了 错误的写法 {path:'/list/:id', component: listLazy , name:'list',children:[ {path:'/detail/:
关于echarts动态图表tab切换出现的问题
记笔记,免忘记! 新界面改版,设计图含有饼状图和折线图的tab切换,移动端上写饼状图和折线图什么的完全不知道要怎么动手。本人比较小白。后来求助广大历害的网络,使用了echarts.min.js 这个来写饼状图和折线图,果然简单有效。不过头一次用这个js还真是不太会啊..../(ㄒoㄒ)/~~   echart官网 我是把页面布局弄完最后才写饼状图和折线图。最后tab切换时发现一个问题。就是第一...
echarts实现折线图(移动端自适应)
<!DOCTYPE html> <html style="height: 100%">    <head>        <meta charset="utf-8">    </head>    <body>        <div id="echarts-line"
vue 移动端 ECharts 使用后小结
vue 移动端使用ECharts 本博客主要讲述ECharts在Vue移动端项目中的一些使用归类,本博客所例举的例子是bar 柱形图。 前提:需引入ECharts,即在page.json中引入 "dependencies": { "echarts": "^3.6.2&am
Echartsjs 柱形图加折线图 启用datazoom,滑动图标之后更新数据,不能覆盖原数据的问题。
1、最近使用echartsjs,有个需求是柱形图和折线图一起绘制,查看当天数据,有个切换的按钮,可以选择按小时查询或者按天查询,按小时查询的数据较多,启动datazoom,鼠标滑动查看。 2、问题复现:初始化按天查看,没有问题,切换之后按小时查看没有问题,滑动查看没有问题,问题出现在,滑动之后,如果要切换回按天查看,按小时查看的折线数据会出现在图标上。 3、解决办法:网上查到的 .setOpt...
解决移动端页面滑动穿透问题
前几天遇到移动端页面穿透问题相信很多人也遇到过相应的情况    这个问题特别顽固  电脑端用谷歌移动界面测试没有问题 但是安卓 ios 还是会有问题  而且安卓 和 ios 下面两种放法  支持还不一样导致这个问题弄了很久     内容有点多请详细阅读!!!! 就像这个情况 滑动答案的时候 答案到了底部继续滑动 题干的页面也会跟着滑动 为了解决这个问题 也上网找了很多相关问题 但是都没有解
可能完美解决移动端滚动穿透
引言: 目前百度上提供的大量解决方法
解决Echarts使用tab切换时只显示第一个tab中图表,其他tab中图表不显示或显示不全问题
近期项目中也使用到了Echarts来画图表,也是两个tab切换页面中都存在图表,页面加载完成后都对所有图表进行了初始化和绘制,然而在tab切换中出现了如下动图中的问题: 图中可以看到,第一个tab显示是很正常的,但是第二个tab中内容显示不完整。 我的解决方式如下: 1--在tab导航中加入radio单选按钮并隐藏,当第二个tab被选中的时候,再初始化图表数据
echarts选项卡切换效果,并且自适应随着窗口大小变大变小。
首先先来个效果图: 这个是缩小后的窗口: 切换效果: 下面是代码:我用的是echarts3.0的,首先要去官网把echarts.min.js下载下来 我写的是bootstrap的网页 HTML: <div class="row"> <div class="col-lg-12"> <div class="wrapper
h5做echarts图表Tab切换时图表被压缩或不显示的问题
项目中遇到的坑,在这里记录一下 单纯的写个tab切换图表,是这样显示的。。。 很明显的可以看出来在tab切换的时候第二张图表是被压缩显示的。 但是,只要我们在切换的时候调用一下被使用的函数,图表就会完整显示。 代码展示: HTML &amp;lt;div class=&quot;totalTab&quot;&amp;gt; &amp;lt;ul class=&quot;tab&quot; style=&quot;margin-top: 10px;&quot;&amp;gt; ...
关于echarts 同页面多图表同实例名resize只变一个的解决方法
今天项目中做一个客户决策分析的echarts图表分析,在同一页面有多个图,在浏览器改变大小的同事图表也要跟着变化,但是单纯的使用 window.addEventListener("resize",function(){             $Chart.myChart.resize();      }); 时不行的 ,作用的只是最后一个
移动端开发touchmove事件preventDefault引发页面不能滚动问题
项目中,用到了一个可在页面中的拖拽小图标,由于拖动过程中不能引发页面的拖动@touchmove事件对应函数中加入: document.addEventListener(&quot;touchmove&quot;,this.preventDefault,false); preventDefault(e) { e.preventDefault(); } 但实际拖动之后,发现长页面上下也无法拖动...
echarts切换tab时,第一个图表显示,第二个图表不显示的解决办法
首先这种情况,我在网上看到了好多人问,确实也有正解,但是只是说出了其错误出现的原因,并没有给出解决方法。 我也是深受其害,所以呢,在这里记录一下,分享给还在困扰着的你们,迅速找出解决办法。 首先,我先简单介绍一下,我这里出现错误的情境。 原来刚刚遇到这个问题的时候,是在点击多个tab选项之后,出现了地图不显示的情况,然后呢,我就一直在根据打开多个tab之后,地图不显示这个思路进行寻找bu
echarts对于移动端的处理
通过media实现的 $(function() { // 多列柱形图 var mychar = echarts.init(document.getElementById('bar')); var option = { baseOption : { t...
解决echarts的柱状图、折线图点击非图表图形元素不会触发click事件
需求说明:echarts的click事件,只当点击到图形元素是才会触发,对于当一组数据最大值和最小值相差较大时,数值较小的图形元素太小不好点击触发,现在我需要点击事件来获得点击事件的params的data数据,即series中传入的原始数据项data内的某条记录。如何通过点击空白区域也能触发获取到数据。 解决思路: 1)使用getZr()添加图表的整个canvas区域的点击事件,并获取para...
移动端position:fixed滚动页面会产生抖动的有效解决办法
前言 这个问题其实是老问题了,在没有硬件加速的浏览器APP中都能见到这个问题,比如安卓机自带的浏览器等等,不过,所有机型的微信浏览器都没有这个问题。这个bug具体说,就是fixed元素在最前端,并且overflow:hidden,当滚动这个元素的时候,我们期望的是它纹丝不动,然而,这个元素会抖动。 如果你希望能在任何移动浏览器正常显示,那么本文对你有用。 ...
移动web 页面显示echarts图表
play框架,使用jquery mobile做的移动web,显示柱状图、折线图、饼图 图表数据动态获取,记录一下<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="/public/lib/
移动端(APP、微信)混合开发下ECharts图横屏旋转
在移动开发中,图表是一种常见的数据统计形式,但是在手机有限的屏幕中实现图文结合,图标会显示不清晰,这时需要图表能够支持横向旋转功能,以angularJS下ECharts图表为例,通过如下代码即可实现旋转: var options = { animation: 'fade', // What animation to use rotateOption: $scope...
echarts图表,Tab切换问题
        由于公司对于大数据展示的需求,我只能学习了百度的Echarts,在去年的这个时候,刚刚接触Echarts由于不是很明白,还花了一点钱买了当时页面链接的视频教程。买完发现视频和官方文档描述的一样,这我就很尴尬了,看了两集,感觉这钱白花了,直接上手撸项目。。。        在我用Echarts的时候,天还是那么蓝,我还是那么帅(哈哈,很皮),言归正传,当时版本还是2.0版本横行的时代...
解决移动端,模态框、弹框滑动滚动,底部页面随着滑动、穿透的问题
移动端有个比较头疼的问题,就是 在模态框、弹框中滑动,底部页面也随着滑动的问题。本文将从 触摸事件、点击事件的顺序来解决这个问题。 首先我们要明白 touch 和click 的执行顺序问题: 当一个用户在点击屏幕的时候,系统会触发touch事件和click事件,touch事件优先处理,touch事件经过 捕获,处理, 冒泡 一系列流程处理完成后, 才回去触发click事件,click有200-...
js-解决echarts在使用tab情况下现实不全的问题
加载echarts后,发现除了第一个tab,其他tab里面的图表都没有写渲染出来。但是,如果设置为active之后,就能够渲染出来。$(document).ready(function(){ $("#ios").removeClass("active"); $("#jmeter").removeClass("active");
一个手机图表(echarts)折线图的封装
//定义一组颜色值,按顺序取出 var colorGroup = ["#6ca3c4","#76bfa3","#ea8f7a","#499acd","#ba97c9","#98bd76","#e0ab57"]; //获取手机屏幕宽度 var iWidth = document.documentElement.clientWidth; //定义一个对象的混入的方法 function mixin(sou
echarts的折线图、柱状图在移动端横屏展示
我以前按照网上的方法就会出现一下问题:点击打开链接 问题:旋转了页面确实可以横屏查看了,但是在使用x轴的绑定点击事件时发现,折线图只是看起来横屏了,实际的坐标数据并没有随着页面旋转而旋转。 现在我找到了另外一种方法,完美的避免了该问题。 思路: 代码样例:【这是我直接在echarts官方样例中进行修改的,大家可以看看它原本的形式,可以直接复制这代码到echarts官方样例中查看】 ...
解决Bootstrap 标签页(Tab)插件切换echarts不显示问题
问题:          在echarts跟bootstrap选项卡整合的时候,默认第一个选中选项卡可以正常加载echarts图表,但是切换其他选项的时候不能渲染出其他选项卡echarts图表。 解决办法: //解决tab切换不显示问题 在加载窗口后重新渲染。 $('a[data-toggle="pill"]').on('shown.bs.tab', function(e) { f
可以左右拖动和快速滑动的折线统计图
使用surfaceview开发的折线统计图,可以左右滑动,手指快速滚动后可以有快速滚动的效果,只需要传入一个对应的list 既可以使用。
关于Echarts使用问题之图表自适应浏览器窗口缩放图形
       最近在开发过程中使用echarts做图形报表,开发场景为:单页面有多个图表,展示图表效果是没什么问题。当我调整浏览器窗口大小的时候,问题来了:图表不会根据浏览器的窗口大小而进行适应性的调整大小,这个问题很严重,非常影响用户的体验,作为一个合格的程序员,我们一定要解决这个问题。后来翻阅文档找到了合适的解决方案。 ##### 解决方案一:(适用于单页单图表)            在...
vue tab切换,echartst图表宽度只有100px问题解决
解决思路:直接将图表的宽高写死 1.将图表放进一个div里面 &amp;amp;amp;lt;div class=&amp;amp;quot;echarts&amp;amp;quot;&amp;amp;amp;gt; &amp;amp;amp;lt;div id=&amp;amp;quot;myChart&amp;amp;quot; :style=&amp;amp;quot;{width:'100%',height:'150px'}&amp;amp;quot;&amp;amp;amp;g
单个WEB页面展示多个Echarts图表
单个WEB页面展示多个Echarts图表   由于业务的需要,需要把多个数据报表放到同一个页面上,同时,对该页面添加一键导出EXCEL、WORD、PDF功能   Echarts初级上手比较简单,直接依葫芦画瓢照着DEMO修改,拉取数据展示即可,但如果同时需要把十几个、几十个展示出来且放到同一个页面上就稍微复杂些了,需要考虑到页面拉取数据并发问题,数据拉取速率、界面展示等等诸多问题 最开始...
vue中使用echarts图表自适应的几种基本解决方案
1.使用window.onresize let myChart = echarts.init(document.getElementById(dom)) window.onresize = function () { myChat.resize() } 优点:可以根据窗口大小实现自适应 缺点: 多个图表自适应写法比较麻烦(当一个页面的图表太多时,这样写法不是很灵活); let myCh...
实现echarts图表滚动,设置自定义滚动条
echarts自带的dataZoom设置后触发的鼠标滚轮滚动事件会放大缩小echarts图表本身,而不是我们想要的图表滚动效果。 并且要实现自定义滚动条还是需要自己设置的滚动条用得舒服。通过dataZoom配置项设置很是麻烦。 于是想出了通过内嵌高度溢出的图表,外层使用高度固定的div来设置滚动条。 &amp;lt;el-scrollbar style=&quot;height:235px;&quot;&amp;gt; ...
轮播插件+echarts图表
效果如图,底部的小圆点是自己加的,通过判断(判断 某一个class名称)找到index,然后给到下面小圆点上面注意: 这个轮播插件改过源码,因为不能阻止默认,就加了一个阻止默认事件,但不影响,若介意的同学可以去jq22.com上面重新下载 这个就是插件 //然后在默认的dom基础上 把内容改成你自己的 &lt;div id=&quot;Main-Content&quot;&gt; &lt;d
echarts图表溢出,超出原点坐标左边
今天突然发现加载图表的时候图表的柱形图居然溢出了原点,看起来有点怪怪的 后来对比文档发觉是这个要设置option中的这个属性为true才行,设置为false就会溢出原点。 ...
文章热词 机器学习教程 Objective-C培训 交互设计视频教程 颜色模型 设计制作学习
相关热词 mysql关联查询两次本表 native底部 react extjs glyph 图标 区块链会影响内存价格 该怎么学习python