Echarts K线图手势滑动事件实现：手机屏幕滑动控制图表滚动

要将Echarts上K线图的鼠标滚动事件改成手机屏幕上的手势滑动事件，可以使用Echarts官方提供的'echarts-gl'库。这个库支持手势滑动事件，同时也可以调用鼠标滚动事件。

首先，在页面中引入'echarts-gl'库，然后在Echarts初始化时，将'renderer'属性设置为'webgl'。这样就可以在手机上使用手势滑动事件了。

<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>

<div id="kline" style="width: 100%; height: 500px;"></div>

<script>
  var chart = echarts.init(document.getElementById('kline'), null, {
    renderer: 'webgl'
  });
  // ...
</script>

然后，在代码中监听手势滑动事件，将手势事件转换为鼠标滚动事件。

// 监听手势滑动事件
var kline = document.getElementById('kline');
var lastY = null;
kline.addEventListener('touchstart', function(event) {
  lastY = event.touches[0].clientY;
});
kline.addEventListener('touchmove', function(event) {
  var deltaY = event.touches[0].clientY - lastY;
  lastY = event.touches[0].clientY;
  // 将手势事件转换为鼠标滚动事件
  var scrollEvent = new WheelEvent('wheel', {deltaY: -deltaY});
  kline.dispatchEvent(scrollEvent);
});

// 监听鼠标滚动事件
chart.getZr().on('mousewheel', function(event) {
  // 处理鼠标滚动事件
});

这样，就可以在手机屏幕上使用手势滑动事件，并且手势滑动事件会调用鼠标滚动事件的处理函数。