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读取xml
Nov 04 Javascript
js中设置元素class的三种方法小结
Aug 28 Javascript
JQuery slideshow的一个小问题(如何发现及解决过程)
Feb 06 Javascript
jquery.validate使用时遇到的问题
May 25 Javascript
JavaScript检测上传文件大小的方法
Jul 22 Javascript
深入理解js函数的作用域与this指向
May 28 Javascript
JavaScript自定义函数实现查找两个字符串最长公共子串的方法
Nov 24 Javascript
js实现显示手机号码效果
Mar 09 Javascript
微信小程序实现给循环列表添加点击样式实例
Apr 26 Javascript
vue.js的手脚架vue-cli项目搭建的步骤
Aug 30 Javascript
BACKBONE.JS 简单入门范例
Oct 17 Javascript
微信小程序拼接图片链接无底洞深入探究
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 if 想到的些问题
2008/03/22 PHP
PHP中判断变量为空的几种方法分享
2013/08/26 PHP
php用户注册页面利用js进行表单验证具体实例
2013/10/17 PHP
PHP在网页中动态生成PDF文件详细教程
2014/07/05 PHP
php出现web系统多域名登录失败的解决方法
2014/09/30 PHP
php动态绑定变量的用法
2015/06/16 PHP
tp5修改(实现即点即改)
2019/10/18 PHP
PHP全局使用Laravel辅助函数dd
2019/12/26 PHP
jQuery live( type, fn ) 委派事件实现
2009/10/11 Javascript
javascript倒计时功能实现代码
2012/06/07 Javascript
javascript仿php的print_r函数输出json数据
2013/09/13 Javascript
js 将json字符串转换为json对象的方法解析
2013/11/13 Javascript
jQuery(js)获取文字宽度(显示长度)示例代码
2013/12/31 Javascript
innerHTML中标签可以换行的方法汇总
2015/08/14 Javascript
JQuery菜单效果的两个实例讲解(3)
2015/09/17 Javascript
简单理解vue中el、template、replace元素
2016/10/27 Javascript
angularjs中使用ng-bind-html和ng-include的实例
2017/04/28 Javascript
js脚本编写简单刷票投票系统
2017/06/27 Javascript
webpack实用小功能介绍
2018/01/02 Javascript
mui框架 页面无法滚动的解决方法(推荐)
2018/01/25 Javascript
mpvue将vue项目转换为小程序
2018/09/30 Javascript
使用Promise封装小程序wx.request的实现方法
2019/11/13 Javascript
vue项目配置使用flow类型检查的步骤
2020/03/18 Javascript
Python中的错误和异常处理简单操作示例【try-except用法】
2017/07/25 Python
python 表格打印代码实例解析
2019/10/12 Python
python输出数组中指定元素的所有索引示例
2019/12/06 Python
Python BeautifulReport可视化报告代码实例
2020/04/13 Python
python3.8.1+selenium实现登录滑块验证功能
2020/05/22 Python
PyQt5实现简单的计算器
2020/05/30 Python
CSS3打造百度贴吧的3D翻牌效果示例
2017/01/04 HTML / CSS
微软日本官方网站:Microsoft日本
2017/11/26 全球购物
UGG澳洲官网:UGG Australia
2018/04/26 全球购物
关于运动会的口号
2014/06/07 职场文书
话题作文之呼唤
2019/12/18 职场文书
Java spring定时任务详解
2021/10/05 Java/Android
Z-Order加速Hudi大规模数据集方案分析
2022/03/31 Servers