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 继承详解(三)
Jul 13 Javascript
浏览器常用高宽的jquery插件
Feb 24 Javascript
jquery插件validate验证的小例子
May 08 Javascript
setTimeout内不支持jquery的选择器的解决方案
Apr 28 Javascript
简介JavaScript中的setDate()方法的使用
Jun 11 Javascript
JavaScript实现网站访问次数统计代码
Aug 12 Javascript
javascirpt实现2个iframe之间传值的方法
Jun 30 Javascript
AngularJS利用Controller完成URL跳转
Aug 09 Javascript
利用node.js+mongodb如何搭建一个简单登录注册的功能详解
Jul 30 Javascript
详解Vue中组件的缓存
Apr 20 Javascript
element日历calendar组件上月、今天、下月、日历块点击事件及模板源码
Jul 27 Javascript
Vue中使用import进行路由懒加载的原理分析
Apr 01 Vue.js
使用 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
PHP5.5在windows安装使用memcached服务端的方法
2014/04/16 PHP
PHP框架Swoole定时器Timer特性分析
2014/08/19 PHP
php实现指定字符串中查找子字符串的方法
2015/03/17 PHP
PHP stream_context_create()函数的使用示例
2015/05/12 PHP
php+mysql实现的二级联动菜单效果详解
2016/05/10 PHP
Yii2.0框架模型添加/修改/删除数据操作示例
2019/07/18 PHP
PHP设计模式之数据访问对象模式(DAO)原理与用法实例分析
2019/12/12 PHP
jQuery操作input type=radio的实现代码
2012/06/14 Javascript
JavaScript建立一个语法高亮输入框实现思路
2013/02/26 Javascript
JavaScript的strict模式与with关键字介绍
2014/02/08 Javascript
angularjs实现与服务器交互分享
2014/06/24 Javascript
javascript模拟post提交隐藏地址栏的参数
2014/09/03 Javascript
jQuery 实现侧边浮动导航菜单效果
2014/12/26 Javascript
jQuery使用toggleClass方法动态添加删除Class样式的方法
2015/03/26 Javascript
JavaScript对表格或元素按文本,数字或日期排序的方法
2015/05/26 Javascript
js+html5实现可在手机上玩的拼图游戏
2015/07/17 Javascript
Javascript控制div属性动态变化实例分析
2015/10/08 Javascript
jsonp跨域请求数据实现手机号码查询实例分析
2015/12/12 Javascript
javascript实现网页端解压并查看zip文件
2015/12/15 Javascript
JS实现颜色动态淡化效果
2017/03/06 Javascript
bootstrap表单按回车会自动刷新页面的解决办法
2017/03/08 Javascript
详解webpack + vue + node 打造单页面(入门篇)
2017/09/23 Javascript
js 根据对象数组中的属性进行排序实现代码
2019/09/12 Javascript
Python模块搜索概念介绍及模块安装方法介绍
2015/06/03 Python
python 3.5下xadmin的使用及修复源码bug
2017/05/10 Python
python网络爬虫之如何伪装逃过反爬虫程序的方法
2017/11/23 Python
简单了解python gevent 协程使用及作用
2019/07/22 Python
2021年的Python 时间轴和即将推出的功能详解
2020/07/27 Python
SpringBoot首页设置解析(推荐)
2021/02/11 Python
Mavi牛仔裤美国官网:土耳其著名牛仔品牌
2016/09/24 全球购物
Blue Nile蓝色尼罗河香港官网:世界最大在线钻石珠宝销售商
2020/05/07 全球购物
公务员转正鉴定材料
2014/02/11 职场文书
数控专业自荐书范文
2014/03/16 职场文书
商场收银员岗位职责
2015/04/07 职场文书
医院财务人员岗位职责
2015/04/14 职场文书
vue实现列表拖拽排序的示例代码
2022/04/08 Vue.js