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点击页面其它地方将某个显示的DIV隐藏
Jul 12 Javascript
js下拉菜单语言选项简单实现
Sep 23 Javascript
jQuery学习笔记之jQuery.fn.init()的参数分析
Jun 09 Javascript
JavaScript中的方法重载实例
Mar 16 Javascript
使用AngularJS实现可伸缩的页面切换的方法
Jun 19 Javascript
谷歌Chrome浏览器扩展程序开发小记
Jan 06 Javascript
jQuery实现的瀑布流加载效果示例
Sep 13 Javascript
使用BootStrap建立响应式网页——通栏轮播图(carousel)
Dec 21 Javascript
jquery 正整数数字校验正则表达式
Jan 10 Javascript
微信小程序实现下拉刷新和轮播图效果
Nov 21 Javascript
vue实现一个获取按键展示快捷键效果的Input组件
Jan 13 Vue.js
使用Canvas绘制一个游戏人物属性图
Mar 25 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
关于PHPDocument 代码注释规范的总结
2013/06/25 PHP
PHP 安全检测代码片段(分享)
2013/07/05 PHP
php仿微信红包分配算法的实现方法
2016/05/13 PHP
jQuery插件 tabBox实现代码
2010/02/09 Javascript
jQuery对象和DOM对象使用说明
2010/06/25 Javascript
利用谷歌地图API获取点与点的距离的js代码
2012/10/11 Javascript
javascript简单实现表格行间隔显示颜色并高亮显示
2013/11/29 Javascript
Node.js程序中的本地文件操作用法小结
2016/03/06 Javascript
jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)
2016/05/16 Javascript
移动适配的几种方案(三种方案)
2016/11/25 Javascript
Vue响应式添加、修改数组和对象的值
2017/03/20 Javascript
Vue实现购物车场景下的应用
2017/11/27 Javascript
详解vue中router-link标签所必备了解的属性
2019/04/15 Javascript
JavaScript实现背景自动切换小案例
2019/09/27 Javascript
Vue中component标签解决项目组件化操作
2020/09/04 Javascript
零基础写python爬虫之抓取百度贴吧代码分享
2014/11/06 Python
Python使用剪切板的方法
2017/06/06 Python
python中文分词,使用结巴分词对python进行分词(实例讲解)
2017/11/14 Python
分享一个简单的python读写文件脚本
2017/11/25 Python
python smtplib模块自动收发邮件功能(一)
2018/05/22 Python
Python实现多进程的四种方式
2019/02/22 Python
pytorch 获取层权重,对特定层注入hook, 提取中间层输出的方法
2019/08/17 Python
pandas的resample重采样的使用
2020/04/24 Python
浅谈html5 video 移动端填坑记
2018/01/15 HTML / CSS
中学生期末评语
2014/02/03 职场文书
物业经理自我鉴定
2014/03/03 职场文书
初中毕业生自我评价
2015/03/02 职场文书
现役军人家属慰问信
2015/03/24 职场文书
客户经理岗位职责大全
2015/04/09 职场文书
小区保洁员岗位职责
2015/04/10 职场文书
2015年行政助理工作总结
2015/04/30 职场文书
培养联系人考察意见
2015/06/01 职场文书
爱的教育读书笔记
2015/06/26 职场文书
求职信:会计求职的写作技巧
2019/04/24 职场文书
导游词之湖北武当山
2019/09/23 职场文书
在vue中import()语法不能传入变量的问题及解决
2022/04/01 Vue.js