echarts 在触发区域缩放事件后获取markline在xAxis上的定位

在 ECharts 中，可以通过使用 `dataZoom` 组件来实现区域缩放功能。当区域缩放发生时，可以通过监听 `dataZoom` 组件的 `dataZoom` 事件来获取区域缩放后的数据。

而要获取 markline 在 xAxis 上的定位，可以通过 `echarts` 实例的 `convertFromPixel` 方法将像素坐标转换为数值坐标，然后使用 `getAxis` 方法获取对应的轴实例，最后再使用 `getCoord` 方法获取 markline 在 xAxis 上的定位。

具体代码示例如下：

myChart.on('dataZoom', function(params) {
  var xAxis = myChart.getModel().getComponent('xAxis');
  var marklineCoord = myChart.convertFromPixel({ seriesIndex: 0 }, [params.startValue, 0]);
  var marklineX = xAxis.getCoord(marklineCoord[0]);
  console.log(marklineX);
});

其中，`myChart` 表示 echarts 实例。`params.startValue` 表示区域缩放后的起始值。`marklineCoord` 表示 markline 在像素坐标系下的坐标。`marklineX` 表示 markline 在 xAxis 坐标系下的定位。

相关问题

echarts 获取markline在xAxis上的坐标

要获取 `echarts` 中 `markline` 在 `xAxis` 上的坐标，可以通过以下步骤实现：

1. 获取 `echarts` 实例对象：

var myChart = echarts.init(document.getElementById('myChart'));

2. 获取 `xAxis` 对象：

var xAxis = myChart.getModel().getComponent('xAxis', 0);

其中，数字 `0` 表示第一个 `xAxis` 组件。

3. 获取 `markline` 对象：

var markline = xAxis.axis.getMarkLine(0);

其中，数字 `0` 表示第一个 `markline`。

4. 获取 `markline` 在 `xAxis` 上的坐标：

var xAxisCoord = markline.xAxis[0].coord;

其中，`xAxisCoord` 就是 `markline` 在 `xAxis` 上的坐标。

完整代码示例：

var myChart = echarts.init(document.getElementById('myChart'));
var xAxis = myChart.getModel().getComponent('xAxis', 0);
var markline = xAxis.axis.getMarkLine(0);
var xAxisCoord = markline.xAxis[0].coord;

echarts 监听markline当区域缩放时如何将markline的位置信息赋给graphic

可以通过监听 echarts 的 dataZoom 事件，在 dataZoom 中获取当前区域缩放的信息，然后将该信息赋给 markline 的位置信息。具体实现方法如下：

1. 在 echarts 的 option 中，定义 markline 组件和 graphic 组件。

option = {
  ...
  series: [{
    ...
    markLine: {
      ...
    },
    graphic: {
      ...
    }
  }]
}

2. 在 echarts 的事件中，监听 dataZoom 事件，并在事件处理函数中获取当前区域缩放的信息。

myChart.on('dataZoom', function(params) {
  // 获取当前区域缩放的信息
  var startValue = params.batch[0].startValue;
  var endValue = params.batch[0].endValue;
  ...
});

3. 将区域缩放的信息赋给 markline 的位置信息，并更新 echarts。

myChart.setOption({
  series: [{
    markLine: {
      data: [
        // 将区域缩放的信息赋给 markline 的位置信息
        [{xAxis: startValue}, {xAxis: endValue}]
      ]
    },
    graphic: {
      // 更新 graphic 的位置信息
    }
  }]
});