怎样缩放echarts坐标系

在 ECharts 中，“缩放坐标系”通常有以下几种常见场景和需求。下面我按常用方式给你系统讲一下。

一、使用 dataZoom 进行坐标系缩放（最常用）

dataZoom 是对 坐标轴（xAxis / yAxis） 进行缩放和拖拽的核心组件。

1️⃣ X 轴缩放（类目轴 / 时间轴）

option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  dataZoom: [
    {
      type: 'slider', // 滑动条
      xAxisIndex: 0
    },
    {
      type: 'inside', // 鼠标滚轮缩放
      xAxisIndex: 0
    }
  ],
  series: [{
    type: 'line',
    data: [120, 200, 150, 80, 70, 110, 130]
  }]
};

✅ 效果：

• 滑动条缩放
• 鼠标滚轮缩放
• 拖拽平移

2️⃣ Y 轴缩放

dataZoom: [
  {
    type: 'slider',
    yAxisIndex: 0
  },
  {
    type: 'inside',
    yAxisIndex: 0
  }
]

3️⃣ 同时缩放 X 和 Y

dataZoom: [
  { type: 'inside', xAxisIndex: 0 },
  { type: 'inside', yAxisIndex: 0 }
]

二、初始缩放范围（start / end）

dataZoom: [
  {
    type: 'slider',
    start: 30,
    end: 70
  }
]

• start / end 是 百分比（0–100）
• 用于设置初始显示区间

三、缩放整个图表（容器缩放）

如果是指 图表本身随窗口缩放：

window.addEventListener('resize', () => {
  myChart.resize();
});

或在 Vue / React 中监听容器尺寸变化。

四、使用 scale 让坐标轴“自适应数据”

yAxis: {
  scale: true
}

✅ 作用：

• 不强制从 0 开始
• 更适合看趋势变化（如股票价格）

五、极坐标系 / 直角坐标系缩放

直角坐标系（默认）

→ 用 dataZoom

极坐标系（polar）

dataZoom: {
  type: 'slider',
  polarIndex: 0
}

六、代码中动态缩放（API）

myChart.dispatchAction({
  type: 'dataZoom',
  start: 20,
  end: 60
});

七、常见误区

❌ scale ≠ dataZoom

• scale：坐标轴比例
• dataZoom：用户可交互缩放

❌ 缩放只影响视图，不改变原始数据

八、你可以告诉我：

• 是 X轴 / Y轴 / 双轴？
• 是 鼠标滚轮 / 滑动条 / 初始比例？
• 用的是 Vue / React / 原生？

我可以直接给你一份可用代码模板。