echarts中如何在dataZoom 最左侧和最右侧始终显示起始和结束的值

Posted 2023-04-25

参考技术A 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轴

console.log("开始值="+start);

console.log("结束值="+end);

//拖拽滚动条的获取X轴的范围值，使用方法如下：

myChart.on('dataZoom', function (params) 

       //开始

       let startValue = myChart.getModel().option.dataZoom[0].startValue;

       let endValue = myChart.getModel().option.dataZoom[0].endValue;

       thes.startText = myChart.getModel().option.xAxis[0].data[startValue];//起始X轴

       thes.endText = myChart.getModel().option.xAxis[0].data[endValue];//结束X轴

);

图表效果：

如何在百度的echarts中为SingleAxis上的所有轴设置Datazoom？

【中文标题】如何在百度的echarts中为SingleAxis上的所有轴设置Datazoom？

【英文标题】：How to set Datazoom for all axis on SingleAxis in Baidu's echarts?

【发布时间】：2020-05-18 18:42:08

【问题描述】：

是否可以为 SingleAxis 图表上的每个轴设置“内部”数据缩放？

我正在使用以下示例，但添加 dataZoom 对象仅适用于第一个轴。 https://echarts.apache.org/examples/en/editor.html?c=scatter-single-axis

我使用了这个 dataZoom ： 常量选项 = ... 数据缩放：[ 类型：“内部”， , 类型：“内部”， ], ...

【参考方案1】：

Yes，只需传递给滑块属性singleAxisIndex每个轴索引的数组。

dataZoom: [
  type: 'slider',
  //...
  singleAxisIndex: [0,1,2,3,4,5,6]
  //...