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 相关文章推荐
使用onbeforeunload属性后的副作用
Mar 08 Javascript
jquery JSON的解析方式
Jul 25 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战一)
Aug 21 Javascript
从零学JSON之JSON数据结构
May 19 Javascript
js实现仿网易点击弹出提示同时背景变暗效果
Aug 13 Javascript
微信小程序  modal详解及实例代码
Nov 09 Javascript
结合mint-ui移动端下拉加载实践方法总结
Nov 08 Javascript
Node.js 使用request模块下载文件的实例
Sep 05 Javascript
vue template中slot-scope/scope的使用方法
Sep 06 Javascript
使用Vue.observable()进行状态管理的实例代码详解
May 26 Javascript
vue打包通过image-webpack-loader插件对图片压缩优化操作
Nov 12 Javascript
angular8.5集成TinyMce5的使用和详细配置(推荐)
Nov 16 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代码
2008/04/09 PHP
PHP数组操作类实例
2015/07/11 PHP
PHP中phar包的使用教程
2017/06/14 PHP
PHP实现微信提现功能(微信商城)
2019/11/21 PHP
学习js所必须要知道的一些
2007/03/07 Javascript
javascript打开新窗口同时关闭旧窗口
2009/01/16 Javascript
jQuery输入城市查看地图使用介绍
2013/05/08 Javascript
倒记时60刷新网页的js代码
2014/02/18 Javascript
Jquery实现侧边栏跟随滚动条固定(兼容IE6)
2014/04/02 Javascript
学习JavaScript设计模式之享元模式
2016/01/18 Javascript
js创建数组的简单方法
2016/07/27 Javascript
layui框架table 数据表格的方法级渲染详解
2018/08/19 Javascript
详解JavaScript事件循环机制
2018/09/07 Javascript
优雅的在React项目中使用Redux的方法
2018/11/10 Javascript
javascript中一些奇葩的日期换算方法总结
2018/11/14 Javascript
微信小程序仿知乎实现评论留言功能
2018/11/28 Javascript
react的滑动图片验证码组件的示例代码
2019/02/27 Javascript
Layui 数据表格批量删除和多条件搜索的实例
2019/09/04 Javascript
[01:00:04]DOTA2上海特级锦标赛B组小组赛#1 Alliance VS Spirit第二局
2016/02/26 DOTA
python 默认参数问题的陷阱
2016/02/29 Python
Python控制Firefox方法总结
2019/06/03 Python
python实现自动化上线脚本的示例
2019/07/01 Python
Python利用神经网络解决非线性回归问题实例详解
2019/07/19 Python
jupyter notebook实现显示行号
2020/04/13 Python
Python制作一个仿QQ办公版的图形登录界面
2020/09/22 Python
Python的两道面试题
2013/06/29 面试题
便利店投资创业计划书
2014/02/08 职场文书
财务管理职业生涯规划书
2014/02/26 职场文书
党的群众路线学习材料
2014/05/16 职场文书
2014年学习厉行节约反对浪费思想汇报
2014/09/10 职场文书
面试感谢信范文
2015/01/22 职场文书
明星邀请函
2015/02/02 职场文书
清明节扫墓活动总结
2015/02/09 职场文书
2015年行风建设工作总结
2015/05/15 职场文书
新闻稿标题
2015/07/18 职场文书
解决SpringBoot文件上传临时目录找不到的问题
2021/07/01 Java/Android