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 相关文章推荐
Javascript 获取链接(url)参数的方法
Feb 15 Javascript
制作jquery遮罩层效果导航菜单代码分享
Dec 25 Javascript
jquery获取对象的方法足以应付常见的各种类型的对象
May 14 Javascript
手机号码,密码正则验证
Sep 04 Javascript
JavaScript和CSS交互的方法汇总
Dec 02 Javascript
JavaScript实现单击下拉框选择直接跳转页面的方法
Jul 02 Javascript
JQuery EasyUI的使用
Feb 24 Javascript
JS自定义函数对web前端上传的文件进行类型大小判断
Oct 19 Javascript
Vue.js事件处理器与表单控件绑定详解
Mar 20 Javascript
Vue2.0父子组件传递函数的教程详解
Oct 16 Javascript
layui点击导航栏刷新tab页的示例代码
Aug 14 Javascript
JS实现的自定义map方法示例
May 17 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
将数字格式的计算结果转为汉字格式
2006/10/09 PHP
mysql_num_rows VS COUNT 效率问题分析
2011/04/23 PHP
浅析php中抽象类和接口的概念以及区别
2013/06/27 PHP
提高php编程效率技巧
2015/08/13 PHP
Netbeans 8.2与PHP相关的新特性介绍
2016/10/08 PHP
js同时按下两个方向键
2007/12/01 Javascript
jQuery 位置插件
2008/12/25 Javascript
一个XML格式数据转换为图表的例子
2010/02/09 Javascript
利用location.hash实现跨域iframe自适应
2010/05/04 Javascript
jquery的键盘事件修改代码
2011/02/24 Javascript
javascript读写XML实现广告轮换(兼容IE、FF)
2013/08/09 Javascript
Js base64 加密解密介绍
2013/10/11 Javascript
深入理解javascript作用域第二篇之词法作用域和动态作用域
2016/07/24 Javascript
etmvc+jQuery EasyUI+combobox多值操作实现角色授权实例
2016/11/09 Javascript
Node.js 实现简单小说爬虫实例
2016/11/18 Javascript
$.browser.msie 为空或不是对象问题的多种解决方法
2017/03/19 Javascript
AngularJS动态绑定ng-options的ng-model实例代码
2017/06/21 Javascript
Javascript es7中比较实用的两个方法示例
2017/07/21 Javascript
微信小程序基础教程之worker线程的使用方法
2019/07/15 Javascript
Node 代理访问的实现
2019/09/19 Javascript
vue中使用v-for时为什么不能用index作为key
2020/04/04 Javascript
如何利用node转发请求详解
2020/09/17 Javascript
[47:12]TFT vs Secret Supermajor小组赛C组 BO3 第三场 6.3
2018/06/04 DOTA
Python进阶篇之字典操作总结
2016/11/16 Python
python email smtplib模块发送邮件代码实例
2018/04/26 Python
Python内置方法实现字符串的秘钥加解密(推荐)
2019/12/09 Python
微信小程序“圣诞帽”的实现思路详解
2017/12/28 HTML / CSS
Notino法国:购买香水和化妆品
2019/04/15 全球购物
英国排名第一的餐具品牌:Denby Pottery
2019/11/01 全球购物
德国便宜的宠物店:Brekz.de
2020/10/23 全球购物
机关工会开展学习雷锋活动总结
2014/03/01 职场文书
2015年安全生产目标责任书
2015/01/29 职场文书
悬空寺导游词
2015/02/05 职场文书
敬老院志愿者活动总结
2015/05/06 职场文书
行政后勤人员工作计划应该怎么写?
2019/08/16 职场文书
解决pytorch读取自制数据集出现过的问题
2021/05/31 Python