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

 更新时间:2020年07月20日 11:01:48   作者:张萌2018  
这篇文章主要介绍了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轴)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue实现四级导航及验证码的方法实例

    vue实现四级导航及验证码的方法实例

    我们在做项目经常会遇到多级导航这个需求,所以下面这篇文章主要给大家介绍了关于vue实现四级导航及验证码的相关资料,文章通过示例代码介绍的非常详细,需要的朋友可以参考下
    2021-07-07
  • 微信小程序Echarts动态使用及图表层级踩坑解决方案

    微信小程序Echarts动态使用及图表层级踩坑解决方案

    这篇文章主要为大家介绍了微信小程序Echarts动态使用及图表层级踩坑解决方案,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-03-03
  • el-table表格动态合并相同数据单元格(可指定列+自定义合并)

    el-table表格动态合并相同数据单元格(可指定列+自定义合并)

    工作时遇到的el-table合并单元格的需求,本文主要介绍了el-table表格动态合并相同数据单元格(可指定列+自定义合并),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-07-07
  • 基于Vue+Echart绘制动态图

    基于Vue+Echart绘制动态图

    这篇文章主要给大家介绍了基于Vue+Echart的动态图绘制,用户需要展示他的数据库是有哪个数据库转化的,需要展示数据库的轨迹图,前导库的关系图,文中有详细的实现代码,需要的朋友可以参考下
    2023-10-10
  • 浅析Vue2/Vue3中响应式的原理

    浅析Vue2/Vue3中响应式的原理

    这篇文章主要是来和大家一起讨论一下Vue2与Vue3中响应式的原理,文中的相关示例代码简洁易懂,对我们深入了解Vue有一定的帮助,需要的可以参考下
    2023-07-07
  • vue实现在线翻译功能

    vue实现在线翻译功能

    这篇文章主要为大家详细介绍了vue实现在线翻译功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-09-09
  • vue3+axios封装拦截器方式

    vue3+axios封装拦截器方式

    介绍了如何在Vue项目中使用Axios封装请求、配置拦截器,并在api.js中统一管理API接口,同时,也讲解了如何在vite.config.js中配置解决跨域问题,这些操作可以优化前端代码结构,提高开发效率
    2024-09-09
  • vue单个组件实现无限层级多选菜单功能

    vue单个组件实现无限层级多选菜单功能

    这篇文章主要介绍了vue单个组件实现无限层级多选菜单的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2018-04-04
  • vue element-ui table表格滚动加载方法

    vue element-ui table表格滚动加载方法

    下面小编就为大家分享一篇vue element-ui table表格滚动加载方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • 详解Vue项目编译后部署在非网站根目录的解决方案

    详解Vue项目编译后部署在非网站根目录的解决方案

    这篇文章主要介绍了Vue项目编译后部署在非网站根目录的解决方案,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-04-04

最新评论