echarts 图表 - 放大/缩小按钮

Question

我正在使用Apache Echarts来显示图表，非常好。
但是我不知道如何正确缩放以显示节点及其连接。我可以用鼠标缩放，但我只是想知道是否可以显示 + / - 按钮并通过单击它们来放大/缩小？或者Echarts图表不支持？

谢谢！

Answer 1

如果您的图形是在坐标系上定义的，您可以使用内置的dataZoom功能。此外，您始终可以实现自己的按钮并使用 dataZoom 操作。

示例：

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);