echarts使用dataZoom属性，左右滑动时折线图混乱或显示不全问题的解决方案

最新推荐文章于 2023-09-10 18:12:59 发布
最新推荐文章于 2023-09-10 18:12:59 发布
阅读量3.6k 收藏 3
点赞数 2
分类专栏： Vue-cli 数据可视化 文章标签： 数据可视化 可视化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33763827/article/details/109577266
版权

问题复现

在这里插入图片描述

由图可知，8号数据为0且当前显示局部趋势与下方滑动条中趋势图形不符，排查问题发现是数据过滤的问题

解决方案

属性中加入filterMode: 'empty'

关于dataZoom中的filterMode属性可以查看官方文档
dataZoom-slider.filterMode

解决后效果图

在这里插入图片描述

不说别的就是很菜
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
echarts 折线图案例
weixin_44486632的博客
01-16 2150
var myChart = echarts.init(selft.$refs.chartsBox); var option = { //dataZoom-inside 内置型数据区域缩放组件 所谓内置 1平移：在坐标系中滑动拖拽进行数据区域平移。2缩放：PC端：鼠标在坐标系范围内滚轮滚动（MAC触控板类同;移动端：在移动端触屏上，支持两......
解决Echarts2竖直datazoom滑动后显示数据不全的问题
10-15
主要介绍了解决Echarts2竖直datazoom滑动后显示数据不全的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
G2Plot 折线图表错乱，不按顺序排列
Gonwe的博客
12-09 2205
解决 G2Plot 折线图表错乱，不按顺序排列
matplotlib画折线图画出来的图很乱
m0_52078372的博客
04-28 617
matplotlib折线图乱图求助！！！
解决echarts开启dataZoom后滑动图表展示的条数不固定
weixin_48025909的博客
01-06 694
设置start,end会导致滑动图表展示的条数不固定，需要固定条数设置startValue,endValue
python matplotlib 数据可视化折线图数据和坐标出现错位，不对齐的问题。
weixin_51799903的博客
12-06 3155
python matplotlib 数据可视化折线图数据和坐标出现错位，不对齐的问题。
自定义左右滑动折线图
08-24
自定义折线图，可以左右滑动或根据需求自己改动代码。
echart加入dataZoom后无法正常显示数据
xgbm_k的专栏
09-06 7677
要用echart做一幅动态折线图。考虑到点可能会比较多，所以准备把dataZoom加进去。结果加入dataZoom后折线图不显示了。先看早先的代码。这个代码在加入dataZoom后无法正常显示折线图。var charts = {}; var x_series = []; function createChart(id){ $("div#we").append("<div id=" + id
使用echarts动态绑定数据时数据混乱的问题
qq_40535197的博客
10-23 1267
背景：柱状图根据单选按钮来确定展示叠加柱状图还是普通的柱状图，使用dataset来动态设置数据，从叠加柱状图切换到普通柱状图的时候就出现了数据错乱的问题。 选择月的时候，本来应该只显示6条柱子的，结果多出了一条叠加的柱状图！！检查了option没有发现任何问题，dataset里面的数据也是对的，那就是之前的数据没有清理干净。 于是，查看echarts官方文档，发现了用echartsInstance. clear方法，可清空当前实例，会移除实例中所有的组件和图表，然后再用echartsInstance. s
解决Echarts-dataZoom在windows触屏（一体机）设备上无法触屏拖动问题。
DDDHL_的博客
12-18 2800
用echarts绘制了折线图，开启dataZoom功能后，在windows下用鼠标点击拖动与使用移动设备触屏拖动均正常。但是，如果是windows触屏设备，使用触屏时拖不动下方的dataZoom。
echarts实现横向和纵向滚动条、dataZoom及其滚动条设置
最新发布
細水、長流√的专栏
09-10 1万+
echart没有滚动条概念，有配置选项类似滚动条，通过手段模拟滚动条效果....省略很多字（难）
微信小程序在ios下Echarts图表不能滑动的问题解决
10-16
主要介绍了微信小程序在ios下Echarts图表不能滑动的解决方案,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,下面我们来一起学习下吧
解决echarts echarts数据动态更新和dataZoom被重置问题
11-20
1.全局绑定滚轮事件，获得dataZoom最新的位置： myChart.on('dataZoom',function(event){ if(event.batch){ start=event.batch[0].start; end=event.batch[0].end; }else{ start=event.start; end=event.end;...
el-drawer 设置抽屉内容的滚动显示(非整个抽屉的滚动&包括父子组件传参)
VVVVV
10-23 1万+
效果图 实现思路 在父组件中加入要执行交互的元素与el-drawer组件，还有我们要放在el-drawer中的内容组件 <template> <div class="home"> //执行交互的元素（这里用的是按钮） <el-button @click="drawer = true" type="primary">点我打开</el-button> // el-drawer组件 <el-drawer :v
在el-table中嵌套使用el-popover的坑与两种解决方案(v-model显示失效)
VVVVV
07-06 9704
使用出现的问题 根据element-ui文档与网上教程编写如下代码 <el-popover v-model="row.visible" trigger="click" > <span slot="reference" @click="row.visible=!row.visible">删除</span> </el-popover> 常规情况下，row中的visible属性会发生改变，但通过调试发现row属性并未改变，查看源码 所以<span s
IDEA2019.3.4 配置使用Prettier
VVVVV
03-24 7048
在Terminal中运行npm install --global prettier 打开File-Settings在Plugins中安装Prettier插件并且重启编译器 打开File-Settings 在其中添加Node解释器路径和你的Prettier安装路径，点击OK 在需要格式化的文件中用Shift+ctrl+A 如图所示也可以直接用ctrl+alt+Shift+P快捷键来美化当前文件...
【记录】vue-cli+element-ui 制作一个侧边栏组件（抽屉Drawer）
VVVVV
04-02 6344
用到的组件 el-drawer抽屉、el-button按钮 测试还用到了输入框等组件 功能 1.自由添加按钮，并可使按钮居中 2.抽屉里的内容由<slot>插入，用的具名插槽 3.鼠标悬停在按钮时出现文字 4.可指定侧边栏距离窗口最右侧的距离
vue+echarts同时实现地图热力图与线图(解决重叠问题)+markPoint属性巧用
VVVVV
10-28 6112
效果展示 需求解读 分辨率自适应 左右框内标题及内容都可动态配置 同时包括地图热力图与地图线图 出发点添加涟漪动画 markPoint根据数据不同动态展示是否高亮 热力图颜色数值范围由返回数据动态控制 难点分析 series.type为lines或effectScatter显示的前提为geo属性有值，而展示热力图却需要series.type为map，就涉及到geo与map两属性重叠与z轴level问题 线图需要准确知道起点与终点坐标，若边框、标题和边框内元素都脱离在canvas画布外会导致无法准确定
Vite尝鲜：快速创建一个vite项目
VVVVV
09-24 4953
简介： Vite 是一个由原生 ESM 驱动的 Web 开发构建工具。在开发环境下基于浏览器原生 ES imports 开发，在生产环境下基于 Rollup 打包。比webpack打包更加快速。 它主要具有以下特点： 1.快速的冷启动 2.即时的模块热更新 3.真正的按需编译 安装步骤： 全局安装vite npm i -g create-vite-app 创建vite项目 create-vite-app vue3-demo 运行vite项目 npm i npm run dev 注意点：
h5中echarts设置dataZoom无法左右滑动
06-13
在 H5 中，echarts 设置 dataZoom 后无法左右滑动的原因可能有以下几种： 1. dataZoom 的 `throttle` 参数设置过大，导致滑动事件响应不及时。可以尝试将 `throttle` 参数设置为较小的值，例如 50ms。 2. 页面中存在其他元素或脚本阻止了 dataZoom 的滑动事件。可以检查页面中是否有其他元素覆盖在 dataZoom 上，或者其他脚本修改了 dataZoom 的行为。 3. dataZoom 的 `orient` 参数设置不正确，导致无法滑动。可以尝试将 `orient` 参数设置为 'horizontal'，确保 dataZoom 是水平方向的。 4. dataZoom 的 `start` 和 `end` 参数设置不正确，导致无法滑动。可以尝试将 `start` 和 `end` 参数设置为合适的值，确保 dataZoom 能够滑动到需要的位置。 以下是一个示例代码，展示了如何在 H5 中使用 echarts 设置 dataZoom，同时解决左右滑动无效的问题： ```javascript option = { xAxis: { type: 'category', data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'] }, yAxis: { type: 'value' }, series: [{ type: 'bar', data: [120, 200, 150, 80, 70, 110, 130] }], dataZoom: [{ type: 'slider', start: 0, end: 50, throttle: 50, orient: 'horizontal' }] }; ``` 以上代码中，我们设置了 dataZoom 的 `throttle` 参数为 50ms，确保滑动事件响应及时；同时设置了 dataZoom 的 `orient` 参数为 'horizontal'，确保 dataZoom 是水平方向的。如果以上方法仍然无法解决问题，可以尝试检查页面中是否存在其他影响 dataZoom 滑动的因素。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值