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基础整理1
Dec 06 Javascript
JavaScript实现找出数组中最长的连续数字序列
Sep 03 Javascript
jQuery 中$(this).index与$.each的使用指南
Nov 20 Javascript
JavaScript常见的五种数组去重的方式
Dec 15 Javascript
微信小程序实现倒计时60s获取验证码
Apr 17 Javascript
浅谈vue的iview列表table render函数设置DOM属性值的方法
Sep 30 Javascript
深入理解ES6中let和闭包
Feb 22 Javascript
angular基于ng-alain定义自己的select组件示例
Feb 23 Javascript
angularJs在多个控制器中共享服务数据的方法
Sep 30 Javascript
JavaScript静态作用域和动态作用域实例详解
Jun 17 Javascript
解决微信小程序中的滚动穿透问题
Sep 16 Javascript
JavaScript实现下拉列表
Jan 20 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一维二维数组键排序方法实例总结
2014/11/13 PHP
PHP统计数值数组中出现频率最多的10个数字的方法
2015/04/20 PHP
基于PHP后台的Android新闻浏览客户端
2016/05/23 PHP
PHP内存缓存功能memcached示例
2016/10/19 PHP
PHP之认识(二)关于Traits的用法详解
2019/04/11 PHP
获取DOM对象的几种扩展及简写
2006/10/09 Javascript
关于文本框的一些限制控制总结~~
2010/04/15 Javascript
js和jquery如何获取图片真实的宽度和高度
2014/09/28 Javascript
javaScript中slice函数用法实例分析
2015/06/08 Javascript
Labelauty?jQuery单选框/复选框美化插件分享
2015/09/26 Javascript
学习JavaScript设计模式之模板方法模式
2016/01/20 Javascript
Web安全测试之XSS实例讲解
2016/08/15 Javascript
Angular.JS实现无限级的联动菜单(使用demo)
2017/02/08 Javascript
jQuery中.attr()和.data()的区别分析
2017/09/03 jQuery
JS逻辑运算符短路操作实例分析
2018/07/09 Javascript
微信 jssdk 签名错误invalid signature的解决方法
2019/01/14 Javascript
基于Vue 实现一个中规中矩loading组件
2019/04/03 Javascript
详解vue中v-bind:style效果的自定义指令
2020/01/21 Javascript
sharp.js安装过程中遇到的问题总结
2020/04/02 Javascript
详解ES6中class的实现原理
2020/10/03 Javascript
Python基于property实现类的特性操作示例
2018/06/15 Python
解决Pytorch 加载训练好的模型 遇到的error问题
2020/01/10 Python
详解Pytorch显存动态分配规律探索
2020/11/17 Python
前端制作动画的几种方式(css3,js)
2016/12/12 HTML / CSS
HTML5 canvas基本绘图之绘制阴影效果
2016/06/27 HTML / CSS
意大利奢侈品网站:Italist
2016/08/23 全球购物
运动会广播稿500字
2014/01/28 职场文书
讲座主持词
2014/03/20 职场文书
中学生操行评语大全
2014/04/24 职场文书
安全生产知识竞赛活动总结
2014/07/07 职场文书
党员批评与自我批评
2014/10/15 职场文书
2014年会计人员工作总结
2014/12/10 职场文书
党支部创先争优公开承诺书
2015/04/30 职场文书
因工资原因离职的辞职信范文
2015/05/12 职场文书
2016庆祝国庆67周年宣传语
2015/11/25 职场文书
mysql数据库如何转移到oracle
2022/12/24 MySQL