datazoom event not detected from roam mousewheel or toolbox

Version

4.3.0

Reproduction link

https://www.echartsjs.com/examples/en/editor.html?c=graph

Steps to reproduce

1. Edit example code to be this (adding datazoom event listener at very bottom):

myChart.showLoading();
$.get(ROOT_PATH   'data/asset/data/les-miserables.gexf', function (xml) {
    myChart.hideLoading();

    var graph = echarts.dataTool.gexf.parse(xml);
    var categories = [];
    for (var i = 0; i < 9; i  ) {
        categories[i] = {
            name: '类目'   i
        };
    }
    graph.nodes.forEach(function (node) {
        node.itemStyle = null;
        node.value = node.symbolSize;
        node.symbolSize /= 1.5;
        node.label = {
            normal: {
                show: node.symbolSize > 30
            }
        };
        node.category = node.attributes.modularity_class;
    });
    option = {
        title: {
            text: 'Les Miserables',
            subtext: 'Default layout',
            top: 'bottom',
            left: 'right'
        },
        tooltip: {},
        legend: [{
            // selectedMode: 'single',
            data: categories.map(function (a) {
                return a.name;
            })
        }],
        animationDuration: 1500,
        animationEasingUpdate: 'quinticInOut',
        series : [
            {
                name: 'Les Miserables',
                type: 'graph',
                layout: 'none',
                data: graph.nodes,
                links: graph.links,
                categories: categories,
                roam: true,
                focusNodeAdjacency: true,
                itemStyle: {
                    normal: {
                        borderColor: '#fff',
                        borderWidth: 1,
                        shadowBlur: 10,
                        shadowColor: 'rgba(0, 0, 0, 0.3)'
                    }
                },
                label: {
                    position: 'right',
                    formatter: '{b}'
                },
                lineStyle: {
                    color: 'source',
                    curveness: 0.3
                },
                emphasis: {
                    lineStyle: {
                        width: 10
                    }
                }
            }
        ]
    };

    myChart.setOption(option);
    
   // Add this to sample 
    myChart.on('datazoom', function(e) {
        console.log('zoom');
    });
   // End add this
}, 'xml');

1. Zoom with mouse action (or add toolbox zoom controls and zoom that way).

2. No zoom event is detected.

What is expected?

A zoom event is detected.

What is actually happening?

Nothing.

---

Options from my own similar project:

setup.options = {
  title: {
    top: 'bottom',
    left: 'right'
  },
  animation: false,
  tooltip: {
    trigger: 'item',
    position: 'right',
    confine: true,
    backgroundColor: 'transparent',
    padding: [40, 0, 0, 0],
    enterable: false,
    formatter: function(item) {
      return 'Click for more';
    }
  },
  series : [
    {
      name: '###',
      type: 'graph',
      layout: 'force',
      force: {
        repulsion: 95,
        gravity: 0.015,
        edgeLength: 40,
        layoutAnimation: false
      },
      roam: true,
      draggable: true,
      data: setup.nodes,
      links: setup.links,
      focusNodeAdjacency: true,
      itemStyle: {
        normal: {
          borderColor: '#fff',
          borderWidth: 1,
          shadowBlur: 10,
          shadowColor: 'rgba(0, 0, 0, 0.3)'
        }
      },
      lineStyle: {
        color: 'source',
        curveness: 0.3
      },
      emphasis: {
        lineStyle: {
          width: 10
        }
      }
    }
  ]
};

[yufeng04]

Sorry, I made a mistake to take option.dataZoom into consideration just now. According to the code， maybe you can use:

myChart.on('graphRoam', function(e) {
        console.log('zoom');
});

Hope it helps you!

[lougroshek]

@yufeng04 graphRoam works! Thank you! I can’t get zoom start and end, but I am able to detect the event and see whether it’s zoom in or out.