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 面向对象 function类
May 13 Javascript
jquery快捷动态绑定键盘事件的操作函数代码
Oct 17 Javascript
js获取页面传来参数的方法
Sep 06 Javascript
javascript实现简单加载随机色方块
Dec 25 Javascript
jQuery Timelinr实现垂直水平时间轴插件(附源码下载)
Feb 16 Javascript
jQuery简单实现点击文本框复制内容到剪贴板上的方法
Aug 01 Javascript
flexslider.js实现移动端轮播
Feb 05 Javascript
JS简单实现获取元素的封装操作示例
Apr 07 Javascript
在element-ui的el-tree组件中用render函数生成el-button的实例代码
Nov 05 Javascript
微信小程序开发中var that =this的用法详解
Jan 18 Javascript
JavaScript异步操作的几种常见处理方法实例总结
May 11 Javascript
nuxt静态部署打包相对路径操作
Nov 06 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下通过curl抓取yahoo boss 搜索结果的实现代码
2011/06/10 PHP
php学习之function的用法
2012/07/14 PHP
可以将word转成html的js代码
2010/04/11 Javascript
jQuery关于导航条背景切换效果实现示例
2013/09/04 Javascript
express的中间件bodyParser详解
2014/12/04 Javascript
javascript去除字符串左右两端的空格
2015/02/05 Javascript
详解JavaScript中shift()方法的使用
2015/06/09 Javascript
浅谈react.js 之 批量添加与删除功能
2017/04/17 Javascript
windows下vue-cli及webpack搭建安装环境
2017/04/25 Javascript
vue父组件向子组件(props)传递数据的方法
2018/01/02 Javascript
原生JS实现列表子元素顺序反转的方法分析
2018/07/02 Javascript
基于D3.js实现时钟效果
2018/07/17 Javascript
JavaScript实现简单的隐藏式侧边栏功能示例
2018/08/31 Javascript
Vue实现一个图片懒加载插件
2019/03/11 Javascript
JavaScript数组去重的几种方法
2019/04/07 Javascript
深入理解webpack process.env.NODE_ENV配置
2020/02/23 Javascript
vue+elementui实现点击table中的单元格触发事件--弹框
2020/07/18 Javascript
[42:32]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第二局
2016/02/27 DOTA
[01:11:21]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第三场 3月7日
2021/03/11 DOTA
Python中type的构造函数参数含义说明
2015/06/21 Python
Python元组拆包和具名元组解析实例详解
2018/03/26 Python
解读python logging模块的使用方法
2018/04/17 Python
numpy中的ndarray方法和属性详解
2019/05/27 Python
python并发编程多进程之守护进程原理解析
2019/08/20 Python
python应用文件读取与登录注册功能
2019/09/23 Python
xadmin使用formfield_for_dbfield函数过滤下拉表单实例
2020/04/07 Python
在python中list作函数形参,防止被实参修改的实现方法
2020/06/05 Python
Python虚拟环境的创建和包下载过程分析
2020/06/19 Python
CSS3制作缩略图的详细过程
2016/07/08 HTML / CSS
css3实现小箭头各种图形效果
2020/07/08 HTML / CSS
DogBuddy荷兰:找到你最完美的狗保姆
2019/04/17 全球购物
党的群众路线个人对照检查材料
2014/09/23 职场文书
幼儿教师自我剖析材料
2014/09/29 职场文书
新年晚会主持词开场白
2015/05/28 职场文书
人民的好儿女观后感
2015/06/18 职场文书
四十年同学聚会致辞
2015/07/28 职场文书