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 毫秒转时间示例代码
Sep 22 Javascript
jquery实现倒计时代码分享
Jun 13 Javascript
Javascript基础教程之数据类型 (数值 Number)
Jan 18 Javascript
TypeScript Type Innference(类型判断)
Mar 10 Javascript
JS实现点击登录弹出窗口同时背景色渐变动画效果
Mar 25 Javascript
Node.JS中事件轮询(Event Loop)的解析
Feb 25 Javascript
JS实现简单拖拽效果
Jun 21 Javascript
详解React Native开源时间日期选择器组件(react-native-datetime)
Sep 13 Javascript
完美解决iview 的select下拉框选项错位的问题
Mar 02 Javascript
vue动态添加路由addRoutes之不能将动态路由存入缓存的解决
Feb 19 Javascript
详解js中的原型,原型对象,原型链
Jul 16 Javascript
vue实现滑动解锁功能
Mar 03 Vue.js
使用 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
PHPnow安装服务[apache_pn]失败的问题的解决方法
2010/09/10 PHP
PHP代码优化的53个细节
2014/03/03 PHP
zf框架的zend_cache缓存使用方法(zend框架)
2014/03/14 PHP
codeigniter框架The URI you submitted has disallowed characters错误解决方法
2014/05/06 PHP
php+mysql大量用户登录解决方案分析
2014/12/29 PHP
PHP+JS实现的商品秒杀倒计时用法示例
2016/11/15 PHP
通过jQuery源码学习javascript(一)
2012/12/27 Javascript
js验证是否为数字的总结
2013/04/14 Javascript
Array 重排序方法和操作方法的简单实例
2014/01/24 Javascript
JS去掉第一个字符和最后一个字符的实现代码
2014/02/20 Javascript
关于JavaScript的变量的数据类型的判断方法
2015/08/14 Javascript
JS根据浏览器窗口大小实时动态改变网页文字大小的方法
2016/02/25 Javascript
Ubuntu系统下Angularjs开发环境安装
2016/09/01 Javascript
jquery实现拖动效果(代码分享)
2017/01/25 Javascript
JavaScript实现动态添加Form表单元素的方法示例
2017/08/14 Javascript
jQuery实现滚动到底部时自动加载更多的方法示例
2018/02/18 jQuery
Node Puppeteer图像识别实现百度指数爬虫的示例
2018/02/22 Javascript
浅谈Vue2.0中v-for迭代语法的变化(key、index)
2018/03/06 Javascript
vue中引入mxGraph的步骤详解
2019/05/17 Javascript
这15个Vue指令,让你的项目开发爽到爆
2019/10/11 Javascript
JS实现可视化音频效果的实例代码
2020/01/16 Javascript
python字符串连接方式汇总
2014/08/21 Python
正确理解python中的关键字“with”与上下文管理器
2017/04/21 Python
Python yield与实现方法代码分析
2018/02/06 Python
浅谈Python批处理文件夹中的txt文件
2019/03/11 Python
浅谈python的输入输出,注释,基本数据类型
2019/04/02 Python
Python 类,property属性(简化属性的操作),@property,property()用法示例
2019/10/12 Python
localStorage、sessionStorage使用总结
2017/11/17 HTML / CSS
百思买加拿大:Best Buy Canada
2018/03/20 全球购物
法国女性内衣购物网站:Glamuse
2019/05/13 全球购物
印尼购物网站:iLOTTE
2019/10/16 全球购物
初中物理教学反思
2014/01/14 职场文书
护士实习求职信
2014/06/22 职场文书
2015年政协委员工作总结
2015/05/20 职场文书
如何写好开幕词?
2019/06/24 职场文书
MySQL库表太大怎么办? 数据库分库分表项目实践
2022/04/11 MySQL