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的起始值
//结束

 

  • 3
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
EchartsdataZoom是用于区域缩放的组件,它能够让用户自由关注数据的细节信息,或者概览整体数据,或者去除离群点的影响。它支持内置型数据区域缩放组件(dataZoomInside)、滑动条型数据区域缩放组件(dataZoomSlider)和框选型数据区域缩放组件(dataZoomSelect)三种类型。其中dataZoomInside是内置于坐标系中,通过鼠标拖拽、鼠标滚轮或手指滑动来缩放或漫游坐标系。dataZoomSlider则是以单独的滑动条形式提供缩放或漫游功能。 在Echarts中,可以使用dataZoom配置项来定义区域缩放的具体设置。例如,通过定义id为'insideX'和'sliderX'的dataZoom实例,可以分别实现内置型和滑动条型的区域缩放。具体配置可以在官方链接中找到更多内容。 dataZoom组件主要用于对数进行数据窗口缩放和平移操作。它可以通过调整视图窗口大小来缩放数据范围,或者通过平移视图窗口来改变数据显示位置。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [echarts实现获取datazoom起始值(包括xy轴)](https://download.csdn.net/download/weixin_38609765/12924971)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [ECHARTS学习之dataZoom组件详解](https://blog.csdn.net/qq_44610701/article/details/121394969)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [ECharts学习四 --- 数据区域缩放组件(dataZoom)](https://blog.csdn.net/NN_nan/article/details/83015188)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值