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 相关文章推荐
判断目标是否是window,document,和拥有tagName的Element的代码
May 31 Javascript
JQuery教学之性能优化
May 14 Javascript
js给selected添加options的方法
May 06 Javascript
AngularJS 使用$sce控制代码安全检查
Jan 05 Javascript
JS组件系列之Bootstrap table表格组件神器【终结篇】
May 10 Javascript
jQuery中text() val()和html()的区别实例详解
Jun 28 Javascript
用Vue.js实现监听属性的变化
Nov 17 Javascript
javascript 组合按键事件监听实现代码
Feb 21 Javascript
Angular 4依赖注入学习教程之ClassProvider的使用(三)
Jun 04 Javascript
在knockoutjs 上自己实现的flux(实例讲解)
Dec 18 Javascript
Vue实现点击时间获取时间段查询功能
Aug 21 Javascript
基于vue循环列表时点击跳转页面的方法
Aug 31 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
德劲1103的维修打理经验
2021/03/02 无线电
数据库的日期格式转换
2006/10/09 PHP
探讨如何把session存入数据库
2013/06/07 PHP
PHP中array_merge和array相加的区别分析
2013/06/17 PHP
PHP中使用hidef扩展代替define提高性能
2015/04/09 PHP
php+redis实现商城秒杀功能
2020/11/19 PHP
Display SQL Server Login Mode
2007/06/21 Javascript
[原创]后缀就扩展名为js的文件是什么文件
2007/12/06 Javascript
用JavaScrpt实现文件夹简单轻松加密的实现方法图文
2008/09/08 Javascript
JavaScript实现网页图片等比例缩放实现代码及调用方式
2013/02/25 Javascript
Extjs中通过Tree加载右侧TabPanel具体实现
2013/05/05 Javascript
js 用CreateElement动态创建标签示例
2013/11/20 Javascript
javascript拖拽上传类库DropzoneJS使用方法
2013/12/05 Javascript
jQuery实现的Div窗口震动特效
2014/06/09 Javascript
完美兼容IE,chrome,ff的设为首页、加入收藏及保存到桌面js代码
2014/12/17 Javascript
JavaScript中的this关键字使用方法总结
2015/03/13 Javascript
基于jquery实现百度新闻导航菜单滑动动画
2016/03/15 Javascript
Vue官网todoMVC示例代码
2018/01/29 Javascript
Vue自定义指令上报Google Analytics事件统计的方法
2019/02/25 Javascript
pandas将DataFrame的列变成行索引的方法
2018/04/10 Python
Django对数据库进行添加与更新的例子
2019/07/12 Python
Python Django实现layui风格+django分页功能的例子
2019/08/29 Python
python 两个数据库postgresql对比
2019/10/21 Python
Django对接支付宝实现支付宝充值金币功能示例
2019/12/17 Python
python+selenium+PhantomJS抓取网页动态加载内容
2020/02/25 Python
python实现银行实战系统
2020/02/26 Python
python如何解析复杂sql,实现数据库和表的提取的实例剖析
2020/05/15 Python
解决django migrate报错ORA-02000: missing ALWAYS keyword
2020/07/02 Python
css3强大的动画效果animate使用说明及浏览器兼容介绍
2013/01/09 HTML / CSS
西尔斯百货官网:Sears
2016/09/06 全球购物
银行存款证明样本
2014/01/17 职场文书
保险公司演讲稿
2014/09/02 职场文书
学习教师敬业奉献模范事迹材料思想汇报
2014/09/19 职场文书
博士论文答辩开场白
2015/06/01 职场文书
再见,2019我们不负使命;你好,2020我们砥砺前行
2020/01/03 职场文书
关于Oracle12C默认用户名system密码不正确的解决方案
2021/10/16 Oracle