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鼠标及对象坐标控制属性详细解析
Dec 14 Javascript
html的DOM中Event对象onabort事件用法实例
Jan 21 Javascript
JS正则截取两个字符串之间及字符串前后内容的方法
Jan 06 Javascript
JQuery查找子元素find()和遍历集合each的方法总结
Mar 07 Javascript
JavaScript中transform实现数字翻页效果
Mar 08 Javascript
关于meta viewport中target-densitydpi属性详解(推荐)
Aug 18 Javascript
原生JS实现的双色球功能示例
Feb 02 Javascript
jquery实现的简单轮播图功能【适合新手】
Aug 17 jQuery
微信小程序之判断页面滚动方向的示例代码
Aug 30 Javascript
vue 的点击事件获取当前点击的元素方法
Sep 15 Javascript
详解vue-router导航守卫
Jan 19 Javascript
Vue监听页面刷新和关闭功能
Jun 20 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
动易数据转成dedecms的php程序
2007/04/07 PHP
php基于表单密码验证与HTTP验证用法实例
2015/01/06 PHP
thinkPHP自定义类实现方法详解
2016/11/30 PHP
js版本A*寻路算法
2006/12/22 Javascript
JS检测图片大小的实例
2013/08/21 Javascript
javascript获取网页宽高方法汇总
2015/07/19 Javascript
jquery小火箭返回顶部代码分享
2015/08/19 Javascript
JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
2015/11/06 Javascript
jQuery position() 函数详解以及jQuery中position函数的应用
2015/12/14 Javascript
基于JavaScript将表单序列化类型的数据转化成对象的处理(允许对象中包含对象)
2015/12/28 Javascript
js+css绘制颜色动态变化的圈中圈效果
2016/01/27 Javascript
javascript瀑布流式图片懒加载实例
2020/06/28 Javascript
jQuery 监控键盘一段时间没输入
2016/04/22 Javascript
jquery实现表格中点击相应行变色功能效果【实例代码】
2016/05/09 Javascript
jQuery Validate 数组 全部验证问题
2017/01/12 Javascript
从零开始学习Node.js系列教程之基于connect和express框架的多页面实现数学运算示例
2017/04/13 Javascript
webpack+vuex+axios 跨域请求数据的示例代码
2018/03/06 Javascript
Vue.set()动态的新增与修改数据,触发视图更新的方法
2018/09/15 Javascript
微信小程序冒泡事件及其阻止方法实例分析
2018/12/06 Javascript
jquery实现下载图片功能
2019/07/18 jQuery
json字符串对象转换代码实例
2019/09/28 Javascript
vue下canvas裁剪图片实例讲解
2020/04/16 Javascript
[01:27:43]VGJ.S vs TNC Supermajor 败者组 BO3 第三场 6.6
2018/06/07 DOTA
分析python服务器拒绝服务攻击代码
2014/01/16 Python
全面解析Python的While循环语句的使用方法
2015/10/13 Python
Python文本相似性计算之编辑距离详解
2016/11/28 Python
Python3实现获取图片文字里中文的方法分析
2018/12/13 Python
Python 3 使用Pillow生成漂亮的分形树图片
2019/12/24 Python
python爬虫---requests库的用法详解
2020/09/28 Python
css3的transition属性详解
2014/12/15 HTML / CSS
国税会议欢迎词
2014/01/16 职场文书
办理房产过户的委托书
2014/09/14 职场文书
公司离职证明标准样本
2014/10/05 职场文书
出差报告怎么写
2014/11/06 职场文书
党小组推荐意见
2015/06/02 职场文书
Python实战之实现康威生命游戏
2021/04/26 Python