echarts实现获取datazoom的起始值(包括x轴和y轴)


Posted in Javascript onJuly 20, 2020

我就废话不多说了,大家还是直接看代码吧~

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轴
let end = myChart.getModel().option.xAxis[0].data[endValue];//结束X轴
 
let startNum = obj.enddate.indexOf(start);
let endNum = obj.enddate.indexOf(end);
let arr = [];
for(let i = startNum;i <= endNum;i++){
 arr.push(obj.value[i]);
}
let max = Math.max.apply(null, arr);
let min = Math.min.apply(null, arr);
 
let ystartValue = myChart.getModel().option.dataZoom[1].startValue;//y轴datazoom最小值
let yendValue = myChart.getModel().option.dataZoom[1].endValue;//y轴datazoom最大值
let de = yendValue - ystartValue;//总区间数值大小
let minbili = (min-ystartValue)/de*100;
let maxbili = (max-ystartValue)/de*100;
this.min_max.push([Math.floor(minbili),Math.ceil(maxbili)]);//得到y轴datazoom的起始值
//结束

补充知识:echarts datazoom显示的位置设置

如下所示:

echarts实现获取datazoom的起始值(包括x轴和y轴)

以上这篇echarts实现获取datazoom的起始值(包括x轴和y轴)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 键盘记录实现(兼容FireFox和IE)
Feb 07 Javascript
Jquery下的26个实用小技巧(jQuery tips, tricks &amp; solutions)
Mar 01 Javascript
JavaScript实现页面滚动图片加载(仿lazyload效果)
Jul 22 Javascript
Android中资源文件(非代码部分)的使用概览
Dec 18 Javascript
文本有关的样式和jQuery求对象的高宽问题分别说明
Aug 30 Javascript
JavaScript中Math.SQRT2属性的使用详解
Jun 14 Javascript
jquery实现网页的页面平滑滚动效果代码
Nov 02 Javascript
jQuery文件上传控件 Uploadify 详解
Jun 20 Javascript
详解Node.js中exports和module.exports的区别
Apr 19 Javascript
Web技术实现移动监测的介绍
Sep 18 Javascript
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
Dec 18 jQuery
实例学习JavaScript读取和写入cookie
Jan 29 Javascript
使用 Github Actions 自动部署 Angular 应用到 Github Pages的方法
Jul 20 #Javascript
如何实现echarts markline标签名显示自己想要的
Jul 20 #Javascript
在Echarts图中给坐标轴加一个标识线markLine
Jul 20 #Javascript
jquery实现简单拖拽效果
Jul 20 #jQuery
在vue中使用echarts(折线图的demo,markline用法)
Jul 20 #Javascript
微信小程序实现时间戳格式转换
Jul 20 #Javascript
解决Vue + Echarts 使用markLine标线(precision精度问题)
Jul 20 #Javascript
You might like
967 个函式
2006/10/09 PHP
php 字符过滤类,用于过滤各类用户输入的数据
2009/05/27 PHP
深入探讨PHP中的内存管理问题
2011/08/31 PHP
php全排列递归算法代码
2012/10/09 PHP
Ajax,UTF-8还是GB2312 eval 还是execScript
2008/11/13 Javascript
JavaScript入门教程(3) js面向对象
2009/01/31 Javascript
JS 实现双色表格实现代码
2009/11/24 Javascript
javascript 节点排序 2
2011/01/31 Javascript
判断对象是否Window的实现代码
2012/01/10 Javascript
JavaScript自定义日期格式化函数详细解析
2014/01/14 Javascript
dreamweaver 8实现Jquery自动提示
2014/12/04 Javascript
详解js中Json的语法与格式
2016/11/22 Javascript
正则验证小数点后面只能有两位数的方法
2017/02/28 Javascript
js使用Promise实现简单的Ajax缓存
2018/11/14 Javascript
Web安全之XSS攻击与防御小结
2018/12/13 Javascript
Nuxt.js实现一个SSR的前端博客的示例代码
2019/09/06 Javascript
Echarts实现多条折线可拖拽效果
2019/12/19 Javascript
在vue中对数组值变化的监听与重新响应渲染操作
2020/07/17 Javascript
[55:48]VGJ.S vs TNC Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
python使用PythonMagick将jpg图片转换成ico图片的方法
2015/03/26 Python
Python-嵌套列表list的全面解析
2016/06/08 Python
python实现按任意键继续执行程序
2016/12/30 Python
python 生成器生成杨辉三角的方法(必看)
2017/04/10 Python
python爬虫实战之爬取京东商城实例教程
2017/04/24 Python
Python实现的计算器功能示例
2018/04/26 Python
Python实现多线程的两种方式分析
2018/08/29 Python
pandas每次多Sheet写入文件的方法
2018/12/10 Python
python f-string式格式化听语音流程讲解
2019/06/18 Python
python类共享变量操作
2020/09/03 Python
销售人员自我评价怎么写
2013/09/19 职场文书
光信息科学与技术专业职业生涯规划
2014/03/13 职场文书
暑假家长评语大全
2014/04/17 职场文书
报表员工作失误检讨书范文
2014/09/19 职场文书
适合青年人白手起家的创业项目分享
2019/08/16 职场文书
jquery插件实现搜索历史
2021/04/24 jQuery
MongoDB误操作后使用oplog恢复数据
2022/04/11 MongoDB