echarts 中graphic在点击区域缩放后会恢复原位的问题

在 Echarts 中，当使用 graphic 元素进行区域缩放时，会出现缩放后 graphic 元素恢复原位的问题。这是因为缩放操作会触发 echarts 的重绘事件，导致所有的 graphic 元素都被重新渲染，从而失去了缩放的效果。

要解决这个问题，可以使用 echarts 的 dispatchAction 方法来触发缩放操作，而不是使用直接修改 graphic 元素的方式。这样可以确保缩放操作被正确地记录下来，从而在重绘时保持缩放状态。

具体实现方法如下：

myChart.on('click', function (params) {
    var zoom = echarts.action.getZoom(myChart);
    var pointInPixel = [params.offsetX, params.offsetY];
    myChart.dispatchAction({
        type: 'dataZoom',
        start: zoom[0],
        end: zoom[1],
        dataZoomIndex: 0
    });
    myChart.dispatchAction({
        type: 'dataZoom',
        startValue: params.value - (params.value - zoom[0]) / 2,
        endValue: params.value + (zoom[1] - zoom[0]) / 2,
        filterMode: 'filter'
    });
});

其中，getZoom 方法用于获取当前图表的缩放状态，dispatchAction 方法用于触发缩放操作。通过这种方式，可以在缩放后保持 graphic 元素的位置和状态，避免恢复原位的问题。