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 相关文章推荐
utf-8编码引起js输出中文乱码的解决办法
Jun 23 Javascript
IE下js调试工具Companion.JS
Oct 15 Javascript
jquery 圆形旋转图片滚动切换效果
Jan 19 Javascript
DOM中事件处理概览与原理的全面解析
Aug 16 Javascript
jQuery EasyUI右键菜单实现关闭标签/选项卡
Oct 10 Javascript
微信小程序 用户数据解密详细介绍
Jan 09 Javascript
Java与JavaScript中判断两字符串是否相等的区别
Mar 13 Javascript
vue引入jq插件的实例讲解
Sep 12 Javascript
基于twbsPagination.js分页插件使用心得(分享)
Oct 21 Javascript
详解滑动穿透(锁body)终极探索
Apr 16 Javascript
js 下拉菜单点击旁边收起实现(踩坑记)
Sep 29 Javascript
React生命周期原理与用法踩坑笔记
Apr 28 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
1.PHP简介
2006/10/09 PHP
PHP设计聊天室步步通
2006/10/09 PHP
用mysql触发器自动更新memcache的实现代码
2009/10/11 PHP
PHP并发查询MySQL的实例代码
2017/08/09 PHP
thinkPHP5框架auth权限控制类与用法示例
2018/06/12 PHP
Laravel5.5 数据库迁移:创建表与修改表示例
2019/10/23 PHP
数据结构之利用PHP实现二分搜索树
2020/10/25 PHP
网页里控制图片大小的相关代码
2006/06/13 Javascript
用htc组件制作windows选项卡
2007/01/13 Javascript
js 判断 enter 事件
2009/02/12 Javascript
javascript下利用arguments实现string.format函数
2010/08/24 Javascript
JS获得QQ号码的昵称,头像,生日的简单实例
2013/12/04 Javascript
获取JS中网页各种高宽与位置的方法总结
2016/07/27 Javascript
nodejs和php实现图片访问实时处理
2017/01/05 NodeJs
Vue组件通信实践记录(推荐)
2017/08/15 Javascript
vue js秒转天数小时分钟秒的实例代码
2018/08/08 Javascript
jQuery实现图片下载代码
2019/07/18 jQuery
JS+HTML实现自定义上传图片按钮并显示图片功能的方法分析
2020/02/12 Javascript
javascript将扁平的数据转为树形结构的高效率算法
2020/02/27 Javascript
Python转换HTML到Text纯文本的方法
2015/01/15 Python
python try except 捕获所有异常的实例
2018/10/18 Python
Python产生Gnuplot绘图数据的方法
2018/11/09 Python
Python数据分析:手把手教你用Pandas生成可视化图表的教程
2018/12/15 Python
python爬虫神器Pyppeteer入门及使用
2019/07/13 Python
Tensorflow轻松实现XOR运算的方式
2020/02/03 Python
解决python便携版无法直接运行py文件的问题
2020/09/01 Python
Python使用Turtle模块绘制国旗的方法示例
2021/02/28 Python
HTML5 placeholder(空白提示)属性介绍
2013/08/07 HTML / CSS
Zavvi美国:英国娱乐之家
2017/03/19 全球购物
某集团股份有限公司委托书样本
2014/09/24 职场文书
房产分割协议书范文
2014/11/21 职场文书
2014年技术部工作总结
2014/12/12 职场文书
巾帼文明岗事迹材料
2014/12/24 职场文书
初中政教处工作总结
2015/08/12 职场文书
关爱留守儿童主题班会
2015/08/13 职场文书
spring cloud 配置中心客户端启动遇到的问题
2021/09/25 Java/Android