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实现的分页函数
Dec 22 Javascript
把textarea中字符串里含有的回车换行替换成&amp;lt;br&amp;gt;的javascript代码
Apr 20 Javascript
Extjs中DisplayField的日期或者数字格式化扩展
Sep 03 Javascript
选择器中含有空格在使用示例及注意事项
Jul 31 Javascript
清除div下面的所有标签的方法
Feb 17 Javascript
js实现缓冲运动效果的方法
Apr 10 Javascript
学习jQuey中的return false
Dec 18 Javascript
JS快速实现移动端拼图游戏
Sep 05 Javascript
微信小程序之小豆瓣图书实例
Nov 30 Javascript
BootStrap表单宽度设置方法
Mar 10 Javascript
打通前后端构建一个Vue+Express的开发环境
Jul 17 Javascript
layui 实现自动选择radio单选框(checked)的方法
Sep 03 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下用cookie统计用户访问网页次数的代码
2010/05/09 PHP
PHP实现文件下载断点续传详解
2014/10/15 PHP
PHP Laravel 上传图片、文件等类封装
2017/08/16 PHP
Javascript中的高阶函数介绍
2015/03/15 Javascript
使用jQuery制作Web页面遮罩层插件的实例教程
2016/05/26 Javascript
浅谈Vue.js 1.x 和 2.x 实例的生命周期
2017/07/25 Javascript
JS散列表碰撞处理、开链法、HashTable散列示例
2019/02/08 Javascript
在NPM发布自己造的轮子的方法步骤
2019/03/09 Javascript
Emberjs 通过 axios 下载文件的方法
2019/09/03 Javascript
VUE实现自身整体组件销毁的示例代码
2020/01/13 Javascript
es6中Promise 对象基本功能与用法实例分析
2020/02/23 Javascript
Vue+Java 通过websocket实现服务器与客户端双向通信操作
2020/09/22 Javascript
[01:18]一目了然!DOTA2DotA快捷操作对比第一弹
2014/07/01 DOTA
[02:36]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma 选手采访
2021/03/11 DOTA
Python和php通信乱码问题解决方法
2014/04/15 Python
python中使用xlrd、xlwt操作excel表格详解
2015/01/29 Python
python学习笔记--将python源文件打包成exe文件(pyinstaller)
2018/05/26 Python
python interpolate插值实例
2020/07/06 Python
浅析Python 条件控制语句
2020/07/15 Python
基于python实现简单网页服务器代码实例
2020/09/14 Python
CSS3 Columns分列式布局方法简介
2014/05/03 HTML / CSS
意大利体育用品网上商城:Nencini Sport
2016/08/18 全球购物
Lentiamo比利时:便宜的隐形眼镜
2020/02/14 全球购物
Linux的文件类型
2016/07/05 面试题
应届生幼儿园求职信
2013/11/12 职场文书
师范大学应届生求职信
2013/11/21 职场文书
土木工程专业个人求职信
2013/12/30 职场文书
单方离婚协议书范本(2014版)
2014/09/30 职场文书
2015年全国爱眼日活动小结
2015/02/27 职场文书
民事二审代理词
2015/05/25 职场文书
小学运动会宣传稿
2015/07/23 职场文书
2016机关干部作风建设心得体会
2016/01/21 职场文书
学习弘扬焦裕禄精神心得体会
2016/01/23 职场文书
导游词之烟台威海蓬莱
2019/11/14 职场文书
浅谈PostgreSQL表分区的三种方式
2021/06/29 PostgreSQL
分析ZooKeeper分布式锁的实现
2021/06/30 Java/Android