График echarts - кнопки увеличения/уменьшения масштаба

Если ваш график определен в системе координат , вы можете использовать встроенную функцию 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);

В сценариях, где система координат неприменима, например, если вы хотите использовать макет для позиционирования узлов, также можно использовать свойства масштабирование и центр для настройки точки обзора график.

Пример :

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