Apache Echarts Graph组件能否添加±缩放按钮实现点击缩放？

Echarts Graph 本身没有内置的点击式缩放按钮，但完全可以通过自定义按钮结合Echarts的API实现该功能，具体步骤如下：

• 添加自定义缩放按钮的HTML元素

  <button id="zoomIn">+</button>
  <button id="zoomOut">-</button>
  

• 绑定按钮点击事件，调用Echarts的dispatchAction执行缩放

  // 初始化Echarts实例
  const myChart = echarts.init(document.getElementById('your-chart-container'));
  
  // 放大逻辑：每次按20%比例放大
  document.getElementById('zoomIn').addEventListener('click', () => {
    myChart.dispatchAction({
      type: 'dataZoom',
      zoom: 1.2
    });
  });
  
  // 缩小逻辑：每次按20%比例缩小
  document.getElementById('zoomOut').addEventListener('click', () => {
    myChart.dispatchAction({
      type: 'dataZoom',
      zoom: 0.8
    });
  });
  

• 关键配置说明：

  • 确保Graph配置中开启了缩放能力，默认通过roam: true开启（包含缩放和拖拽），也可单独配置dataZoom项
  • zoom参数为缩放比例，大于1是放大，小于1是缩小，可根据需求调整数值
  • 若需要基于特定中心点缩放，可在dispatchAction中添加center参数，传入画布坐标系的[x, y]坐标

内容的提问来源于stack exchange，提问作者Viktor