echarts graph - zoom in / out buttons

I am using Apache Echarts to display graph, it is very good.
However I don't know how to zoom properly to show a node and its connections. I can zoom with the mouse but I am just wondering if + / - buttons can be displayed and zoom in / out by clicking on them? Or it is not supported in Echarts graphs?

Thank you!

If your graph is defined over a coordinate system you could use the built in dataZoom feature. Additionally you can always implement your own buttons and use dataZoom actions.

Example:

const axisData = Array.from({length: 100});
const data = axisData.map(function (item, i) {
  return [i, Math.round(Math.random() * 1000)];
});
const links = data.map(function (item, i) {
  return {
    source: i,
    target: Math.round(Math.random() * 100)
  };
});

option = {
  title: {
    text: 'Graph on Cartesian'
  },
  xAxis: {
    type: 'value'
  },
  yAxis: {
    type: 'value'
  },
  dataZoom: {type: 'inside', xAxisIndex: 0, yAxisIndex: 0},
  toolbox: {
    feature: {
      dataZoom: {}
    }
  },
  series: [
    {
      type: 'graph',
      coordinateSystem: 'cartesian2d',
      data: data,
      links: links,
    }
  ]
};

setTimeout(function() {
  myChart.dispatchAction({
    type: 'dataZoom',
    start: 10,
    end: 90
  });
}, 2000);

In scenarios where a coordinate system is not applicable, for example if you want to use a layout to position the nodes, it is also possible to use the zoom and center properties to adjust the viewpoint of the graph.

Example:

myChart.showLoading();
myChart.showLoading();
$.get(ROOT_PATH + '/data/asset/data/webkit-dep.json', function (webkitDep) {
  myChart.hideLoading();
  option = {
    legend: {
      data: ['HTMLElement', 'WebGL', 'SVG', 'CSS', 'Other']
    },
    series: [
      {
        type: 'graph',
        id: 'graph',
        layout: 'force',
        animation: false,
        label: {
          position: 'right',
          formatter: '{b}'
        },
        roam: true,
        data: webkitDep.nodes.map(function (node, idx) {
          node.id = idx;
          return node;
        }),
        categories: webkitDep.categories,
        force: {
          edgeLength: 5,
          repulsion: 20,
          gravity: 0.2
        },
        edges: webkitDep.links
      }
    ]
  };
  myChart.setOption(option);
});


setTimeout(function() {
  myChart.setOption({series: [{id: 'graph', zoom: 2}]})
}, 3000);