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 Event事件学习第一章 Event介绍
Feb 07 Javascript
js静态方法与实例方法分析
Jul 04 Javascript
jquery 表单验证之通过 class验证表单不为空
Nov 02 Javascript
JavaScript常用数组算法小结
Feb 13 Javascript
第三章之Bootstrap 表格与按钮功能
Apr 25 Javascript
JavaScript仿flash遮罩动画效果
Jun 15 Javascript
详解vue.js的事件处理器v-on:click
Jun 27 Javascript
基于Vue实现拖拽效果
Apr 27 Javascript
vue+express+jwt持久化登录的方法
Jun 14 Javascript
vue中input的v-model清空操作
Sep 06 Javascript
小程序接口的promise化的实现方法
Dec 11 Javascript
JavaScript类的继承多种实现方法
May 30 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中通过smtp发邮件的类,测试通过
2007/01/22 PHP
第二章 PHP入门基础之php代码写法
2011/12/30 PHP
浅谈php中mysql与mysqli的区别分析
2013/06/10 PHP
ThinkPHP函数详解之M方法和R方法
2015/09/10 PHP
php+ajax登录跳转登录实现思路
2016/07/31 PHP
PHP操作Postgresql封装类与应用完整实例
2018/04/24 PHP
基于php解决json_encode中文UNICODE转码问题
2020/11/10 PHP
JAVASCRIPT HashTable
2007/01/22 Javascript
一个简单的js渐显(fadeIn)渐隐(fadeOut)类
2010/06/19 Javascript
16个最流行的JavaScript框架[推荐]
2011/05/29 Javascript
js动态添加事件并可传参数示例代码
2013/10/21 Javascript
js实现ArrayList功能附实例代码
2014/10/29 Javascript
JS网页在线获取鼠标坐标值的方法
2015/02/28 Javascript
jQuery网页选项卡插件rTabs用法实例分析
2015/08/26 Javascript
讲解JavaScript的Backbone.js框架的MVC结构设计理念
2016/02/14 Javascript
JS中artdialog弹出框控件之提交表单思路详解
2016/04/18 Javascript
AngularJS实现数据列表的增加、删除和上移下移等功能实例
2016/09/05 Javascript
修改 bootstrap table 默认detailRow样式的实例代码
2017/07/21 Javascript
详解如何将 Vue-cli 改造成支持多页面的 history 模式
2017/11/20 Javascript
实例分析JS与Node.js中的事件循环
2017/12/12 Javascript
JS遍历DOM文档树的方法实例详解
2018/04/03 Javascript
JavaScript生成指定范围随机数和随机序列的方法
2018/05/05 Javascript
jQuery pagination分页示例详解
2018/10/23 jQuery
可能被忽略的一些JavaScript数组方法细节
2019/02/28 Javascript
[01:19]DOTA2城市挑战赛报名开始 开启你的城市传奇
2018/03/23 DOTA
[51:22]Fnatic vs IG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python PyQt5/Pyside2 按钮右击菜单实例代码
2019/08/17 Python
python 30行代码实现蚂蚁森林自动偷能量
2021/02/08 Python
HTML5 embed标签定义和用法详解
2014/05/09 HTML / CSS
Html5 页面适配iPhoneX(就是那么简单)
2019/09/05 HTML / CSS
施华洛世奇美国官网:SWAROVSKI美国
2018/02/08 全球购物
党员党性分析材料
2014/02/17 职场文书
《盘古开天地》教学反思
2014/02/28 职场文书
影视后期实训报告
2014/11/05 职场文书
聘任协议书(挂靠)
2015/09/21 职场文书
vue backtop组件的实现完整代码
2021/04/07 Vue.js