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 相关文章推荐
jQuery数组处理方法汇总
Jun 20 Javascript
Web开发之JavaScript
Mar 29 Javascript
jquery和雅虎的yql服务实现天气预报服务示例
Feb 08 Javascript
中文输入法不触发onkeyup事件的解决办法
Jul 09 Javascript
javascript数组排序汇总
Jul 07 Javascript
初步使用Node连接Mysql数据库
Mar 03 Javascript
jQuery Easyui DataGrid点击某个单元格即进入编辑状态焦点移开后保存数据
Aug 15 Javascript
js 动态生成json对象、时时更新json对象的方法
Dec 02 Javascript
基于axios封装fetch方法及调用实例
Feb 05 Javascript
使用Vue开发动态刷新Echarts组件的教程详解
Mar 22 Javascript
Node.js笔记之process模块解读
May 31 Javascript
React优化子组件render的使用
May 12 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
PHP操作数组的一些函数整理介绍
2011/07/17 PHP
获取php页面执行时间,数据库读写次数,函数调用次数等(THINKphp)
2013/06/03 PHP
PHP 5.3新增魔术方法__invoke概述
2014/07/23 PHP
PHP生成随机密码4种方法及性能对比
2020/12/11 PHP
通过MSXML2自动获取QQ个人头像及在线情况(给初学者)
2007/01/22 Javascript
JavaScript 判断判断某个对象是Object还是一个Array
2010/01/28 Javascript
javascript实现div浮动在网页最顶上并带关闭按钮效果实例
2013/08/13 Javascript
关闭浏览器输入框自动补齐 兼容IE,FF,Chrome等主流浏览器
2014/02/11 Javascript
javascript设计模式Constructor(构造器)模式
2016/08/19 Javascript
vue2 前后端分离项目ajax跨域session问题解决方法
2017/04/27 Javascript
Webpack 服务器端代码打包的示例代码
2017/09/19 Javascript
js实现点击按钮复制文本功能
2020/07/20 Javascript
VeeValidate在vue项目里表单校验应用案例
2018/05/09 Javascript
解决iview多表头动态更改列元素发生的错误的方法
2018/11/02 Javascript
详解小程序如何动态绑定点击的执行方法
2019/11/26 Javascript
[00:43]FTP典藏礼包 DOTA2三大英雄霸气新套装
2014/03/21 DOTA
[02:33]2018 DOTA2亚洲邀请赛回顾视频 再次拾起那些美妙的时刻
2018/04/10 DOTA
Python3里的super()和__class__使用介绍
2015/04/23 Python
Python中进程和线程的区别详解
2017/10/29 Python
Python GUI编程 文本弹窗的实例
2019/06/11 Python
CSS3实现王者匹配时的粒子动画效果
2019/04/12 HTML / CSS
伊芙丽官方旗舰店:中国淑女一线品牌
2017/12/01 全球购物
美国在线自行车商店:Jenson USA
2018/05/22 全球购物
澳大利亚工具仓库:Tools Warehouse
2018/10/15 全球购物
荷兰在线钓鱼商店:Raven
2019/06/26 全球购物
德国高尔夫商店:Par71.de
2020/11/29 全球购物
应届生.NET方向面试题
2015/05/23 面试题
什么是索引指示器
2012/08/20 面试题
2014年元旦感言
2014/03/06 职场文书
社团活动总结范文
2014/04/26 职场文书
正风肃纪剖析材料
2014/09/30 职场文书
高考学习决心书
2015/02/04 职场文书
《女娲补天》教学反思
2016/02/20 职场文书
2016年党员岗位承诺书
2016/03/24 职场文书
如何用threejs实现实时多边形折射
2021/05/07 Javascript
Python中Numpy和Matplotlib的基本使用指南
2021/11/02 Python