使用Echart的dataZoom获取缩放区域开始到结束之间的所有数据

最新推荐文章于 2024-07-01 14:00:52 发布
最新推荐文章于 2024-07-01 14:00:52 发布
阅读量1.7k 收藏 2
点赞数 2
分类专栏： vue js echart 文章标签： echarts vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39548550/article/details/125603079
版权
vue 同时被 3 个专栏收录
19 篇文章 1 订阅
订阅专栏
js
14 篇文章 0 订阅
订阅专栏
echart
4 篇文章 0 订阅
订阅专栏

2022-07-04，今天天气凉爽，阴有局部小雨

近期在做项目的时候频繁用到了echart的缩放功能（dataZoom），同时需要获取缩放区域开始到结束之间的所有数据，找了半天的echart文档发现并没有直接获取开始到结束之间所有数据的方法，但是有个参数可以获取缩放区域开始的值和结束的值。第一个参数使用dataZoom的startValue，第二个参数使用endValue。获取到这两个值后可以通过js的slice方法传入开始和结束的值，然后去截取对应的数据。下面附上echart的方法和slice方法以及代码实现：

 

 

 

华北周黑鸭
关注
专栏目录
echarts vue element-ui 实现根据选择项年月日时间切换数据显示折线图，vue页面监听自适应（二）
总结前端开发中遇到的问题，分享前端知识
06-16 4149
实现根据选择项年月日时间切换数据显示折线图，vue页面监听自适应
echart折线图扩大点击区域并获取当前点的索引及数据
haoxinqing222的博客
04-18 2079
我们期望在鼠标随便点击的情况下，可以自动找到最近节点的数据，做一些事情，而不是去费力费眼的去找那个小小的折线节点点击。只有用户点击到点（对就是那个小小折线节点）的时候才能拿到返回数据或者进行下一步操作！2、在点击事件中获取索引去做一些事情。通常对echats做点击事件的时候。1、获取到当前节点的一些数据。
echarts通过dataZoom，实现x轴和y轴放大缩小，并获取缩放后的数据
q515518的博客
10-27 3221
echarts通过dataZoom，实现x轴和y轴放大缩小，并获取缩放后的数据
echart之dataZoom数据区域缩放组件
最新发布
weixin_44642382的博客
07-01 344
echart中的dataZoom数据区域缩放组件
echarts实现获取datazoom的起始值(包括x轴和y轴)
11-20
我就废话不多说了，大家还是直接看代码吧~ let option = {} //你的echarts图表的配置，这里我就不贴我的了 myChart.setOption(option); //开始 let startValue = myChart.getModel().option.dataZoom[0].startValue; let endValue = myChart.getModel().option.dataZoom[0].endValue; let start = myChart.getModel().option.xAxis[0].data[startValue];//起始X轴 le
vue echarts dataZoom 选中区域数据获取
诚实可靠小郎君
11-23 2966
vue echarts dataZoom 选中区域数据获取 <div id="detectLineBox" style="width: 98%;height: 300px;margin-top: 8px"></div> // 这个数据太麻烦了,我就不写json了,基本写到dataZoon 肯定数据这边没问题了 this.chartLine = echarts.init(document.getElementById('detectLineBox')); let _this =
echarts、v-charts中dataZoom事件，动态获取dataZoom滑动条改变后的数据
weixin_42296333的博客
09-02 9642
echarts： chart.on('datazoom',function(params){ console.log(params);//里面存有代表滑动条的起始的数字 let xAxis=chart.getModel().option.xAxis[0];//获取axis console.log(xAxis.data);//axis的标号数据 console.log(xAxis.rangeStart);//滑动条左端对应在xAxis.data的索引 console.log(xAxis.rangeE
Echats 之 dataZoom 范围刻度获取
smalCat的博客
05-09 4787
如果你来到这个篇笔记，那么你一定是在使用echarts的 所以 我们简单点，直接上标题的问题，如何获取datazoom刻度而不是百分比 echarts 内部有一个API，为`getOption` 这个方法能获取到echarts当前的option 那么如何获取刻度呢， // 首先 var myChart = echarts.init(el) let self.data.year ...
十、Echart图表 之 dataZoom区域缩放 基本使用与配置大全
weixin_55181759的博客
11-02 1万+
✨参照官网，dataZoom中有两个对象如下，这样写是因为type分为与两种缩放方式，当type类型不同时，里面配置的属性略有不同，请根据实际需求使用✨其他属性请参考一下内容💕解释xAxisIndex、yAxisIndex、、的含义及用法，以xAxisIndex为例filter。
echarts-:echarts插件饼图，以及柱状折线图（可缩放）手机端
05-01
同时，ECharts 的 `dataZoom` 组件允许你指定数据区域的缩放范围，以实现局部放大查看特定数据段的功能。 在实际应用中，你可能需要结合 `require` 或 `import` 语句将 ECharts 引入项目，然后初始化图表实例，配置...
echart dataZoom区域缩放
weixin_41195867的博客
06-17 2192
微信小程序场景遇到的问题： 使用dataZoom进行区域缩放，echart实例编辑器已编译出数据，但是在微信小程序上的显示，拖动数据区域，数据缺失，仅显示前3条！！！（echart实例编辑器：https://echarts.apache.org/examples/zh/editor.html?c=line-simple） 图片可以看出，微信上数据缺失； //代码片段 option = { xAxis: { type: 'category', data: ['Mon
08-Echarts配置系列之：dataZoom 区域缩放组件
youyudehan的博客
11-09 9902
简单快速了解 Echarts 中 dataZoom 区域缩放组件配置，并提供简单的示例代码参考
echarts：获取省、市、区/县、镇的地图数据
qq_45796592的博客
01-29 4058
echarts：获取省、市、区/县、镇的地图数据
Vue Echarts图表dataZoom缩放区域根据数据量显示
大家好，我是+V
11-04 4785
Vue Echarts图表dataZoom缩放区域根据数据量显示 当时用echarts图表显示数据的时候，比如折线图柱状图，当数据量太大的时候，需要设置 dataZoom实现区域缩放，但是当数据量比较少的时候又不希望出现区域缩放控件，所以说这个时候就需要根据数据量动态显示dataZoom。 在 echarts 图表的 option 配置中配置 dataZoom项： dataZoom: [{ type: 'slider', show: true, height: 20,
vue使用echarts是，动态获取数据，动态更新图表数据。
热门推荐
weixin_46371752的博客
03-07 1万+
vue使用echarts实现数据可视化，动态更新echarts上的数据，动态更新图表数据，vue和echarts结合，动态获取数据。
echarts datazoom滚动后的数据
weixin_41260876的博客
12-20 555
无
Echarts+VUE 实现双柱状图表效果并使用datazoom方法实现X轴数据过多时支持滚动和缩放
qq_35030421的博客
12-22 2003
先贴效果图： 前提：npm安装echarts依赖： npm install echarts--save 注意：使用npm的时候，我们直接通过require(‘echarts’)来引入，按需引入需要用到的方法，代码中都有体现； X轴数据过多时使用dataZoom属性实现，如下图代码块： 页面完整代码如下，可直接复制使用（其中chartsRelativeSize()方法是用于Echarts字体适配大屏的）： <template> <div class="a.
echart图点击表格获取对应数据
qq_35556763的博客
02-24 712
echart图点击表格获取对应数据
echart datazoom获取开始结束x坐标值
04-28
使用dataZoom组件的同时，也可以获取当前缩放状态下的x轴开始和结束坐标值。 首先，在数据轴上添加dataZoom组件： ```javascript dataZoom: [{ type: 'slider', //表示 slider 组件 start: 0, //起始位置 end: ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值