echarts实现获取datazoom的起始值(包括x轴和y轴)

我就废话不多说了，大家还是直接看代码吧~

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轴)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 在Echarts图中给坐标轴加一个标识线markLine

    Echart3数据可视化视图 给坐标轴加一个标识线markLine 当X轴不是数值时,而是一个类型数据,如年份,公司名,企业名,这时Echarts图就不是从X轴起始位置开始的,所以我们就要给X轴加一个虚拟的值'0',在markLine中也是在赋值起始位置X轴值时,放置虚拟数据,并且设置一个boundaryGap: 0,可以让坐标轴与刻度之间空白变为0,这时标示线就从X轴起始位置开始了,详细属性可以去Echarts官网查看. 这里还要说一句在设置markLine下面data值时{x:",//代表的

  • 解决echarts echarts数据动态更新和dataZoom被重置问题

    1.全局绑定滚轮事件,获得dataZoom最新的位置: myChart.on('dataZoom',function(event){ if(event.batch){ start=event.batch[0].start; end=event.batch[0].end; }else{ start=event.start; end=event.end; }; }); 2.把最新的start和end赋值给要更新的option window.setInterval(function () { num=

  • 如何实现echarts markline标签名显示自己想要的

    效果图: 修改方法: 补充知识:echarts markLine 的标签名称如何显示在线上方? markLine里的padding设置一下就到线上方了 效果图: 以上这篇如何实现echarts markline标签名显示自己想要的就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • echarts实现获取datazoom的起始值(包括x轴和y轴)

    我就废话不多说了,大家还是直接看代码吧~ 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.getM

  • jQuery插件echarts实现的去掉X轴、Y轴和网格线效果示例【附demo源码下载】

    jQuery插件echarts实现的去掉X轴、Y轴和网格线效果示例【附demo源码下载】

    本文实例讲述了jQuery插件echarts实现的去掉X轴.Y轴和网格线效果.分享给大家供大家参考,具体如下: 1.问题背景: 如何在echarts中,去掉X轴.Y轴和网格线,只留数据图形 2.实现源码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>echarts-去掉X轴.Y轴和网格线</title> <script type=&q

  • 实现ECharts双Y轴左右刻度线一致的例子

    不一致的情况如下图: 修改成一致的情况如下图: 代码如下: yAxis : [ { type : 'value', name : '人数', //splitLine:{show:false}, axisLabel : { formatter: '{value} 个', textStyle:{color: '#A23400'}//#A23400 purple }, axisLine:{ lineStyle:{color:'#A23400',width:'1'} //y轴坐标轴颜色 #A23400

  • Js与Jq获取浏览器和对象值的方法

    JS and Jquery 都能获取页面元素的宽度,高度和相对位移等数值,那他们之间能相互转换或替代吗,写法又有哪些差异呢?本文将详细为你介绍. 1.Js获取浏览器高度和宽度 document.documentElement.clientWidth ==> 浏览器可见区域宽度 document.documentElement.clientHeight ==> 浏览器可见区域高度 document.body.clientWidth ==> BODY对象宽度 document.body.cl

  • python使用threading获取线程函数返回值的实现方法

    threading用于提供线程相关的操作,线程是应用程序中工作的最小单元.python当前版本的多线程库没有实现优先级.线程组,线程也不能被停止.暂停.恢复.中断. threading模块提供的类:  Thread, Lock, Rlock, Condition, [Bounded]Semaphore, Event, Timer, local. threading 模块提供的常用方法: threading.currentThread(): 返回当前的线程变量. threading.enumera

  • Golang反射获取变量类型和值的方法详解

    目录 1. 什么是反射 2. reflect.Type 2.1 类型Type和种类Kind 2.2 引用指向元素的类型 2.3 结构体成员类型 3. reflect.Value 3.1 结构体的成员的值 3.2 遍历array.slice 3.3 遍历map 4. 反射的三大定律 4.1 从interface到反射对象 4.2 从反射对象到interface 4.3 通过反射修改对象,该对象值必须是可修改的 1. 什么是反射 反射是程序在运行期间获取变量的类型和值.或者执行变量的方法的能力. G

  • php获取数组中键值最大数组项的索引值 原创

    本文实例讲述了php获取数组中键值最大数组项的索引值的方法.分享给大家供大家参考.具体分析如下: 一.问题: 从给定数组中获取值最大的数组项的键值.用途如:获取班级得分最高的学生的姓名. 二.解决方法: <?php /* * Created on 2015-3-17 * Created by www.jb51.net */ $arr=array('tom'=>9,'jack'=>3,'kim'=>5,'hack'=>4); asort($arr); //print_r($ar

  • 怎么通过onclick事件获取js函数返回值（代码少）

    具体过程不做详细叙述,直接上代码: 写一个弹出框,绑定onclick事件是好像控制不了它的返回值.代码如下 function createBtn(){ for(var i = 0; i < _this.btn.length; i++){ var btn = document.createElement('span'); btn.id = 'btn_' + i; btn.innerHTML = _this.btn[i]; btn.style.padding = '5px 15px'; btn.st

  • jquery获取img的src值的简单实例

    简简单单的一句话,如下: <img id="test" src="1.jpg" alt="test" /> 引用的jquery如下: <script type="text/javascript" language="javascript" src="~/Js/jquery-1.2.6.js"></script> <script type=&quo

  • JS与jQuery实现子窗口获取父窗口元素值的方法

    JS与jQuery实现子窗口获取父窗口元素值的方法

    本文实例讲述了JS与jQuery实现子窗口获取父窗口元素值的方法.分享给大家供大家参考,具体如下: 功能描述:父窗口有一个input,和一个button ,点击button打开子窗口,在子窗口中获取父窗口中input的值,并显示. js: 父窗口: <input type="text" name="currentProjectIDForDetail" id="currentProjectIDForDetail" disabled="

随机推荐