详解ECharts中的convertToPixel和convertFromPixel

在 ECharts 里，convertToPixel 和 convertFromPixel 是非常重要的一对方法 ------

它们的作用是：

在 "数据坐标" （图表内部的逻辑坐标） 和 "像素坐标" （屏幕上的实际位置）之间做互相转换。

我们一步一步来讲清楚它们的概念、用法和使用场景👇

---

🧩 一、先理解两种"坐标"概念

1️⃣ 数据坐标（data coordinate）

• 是你在图表里写的数据点。

• 对应的是 xAxis / yAxis 的值。

• 例如：

  xAxis: { data: ['Mon', 'Tue', 'Wed', 'Thu'] },
  series: [{ data: [10, 20, 30, 40] }]

  在数据空间中：

  • 第一个点是 ('Mon', 10)
  • 第二个点是 ('Tue', 20)
  • ...

---

2️⃣ 像素坐标（pixel coordinate）

• 是图表在浏览器画布上绘制时的 实际像素位置；
• 左上角通常是 (0,0)，右下角是 (width,height)；
• 图表内部元素（柱子、线点）最终都是以"像素"绘制的。

---

👉 所以：

• convertToPixel：把 "数据坐标值" 转成 "图表上对应的像素位置"
• convertFromPixel：反过来，把 "点击的像素位置" 转换成 "数据坐标值（索引或数值）"

---

📘 二、convertToPixel ------ 数据 → 像素

💡 用法：

chart.convertToPixel(finder, value)

• finder: 用来指定你想按哪个组件转换，比如：

  • { xAxisIndex: 0 }
  • { yAxisIndex: 0 }
  • { seriesIndex: 0 }

• value: 数据值，比如：

  • ['Mon', 20]
  • 或者只传某一维度 'Mon'。

🧠 返回结果：

返回一个像素坐标（或数组），比如 [x像素, y像素]。

✅ 举个例子：

const pixel = chart.convertToPixel({ xAxisIndex: 0 }, 'Wed');
// 比如返回 [350] ------ 在画布上 X=350 像素处

或同时转换：

const point = chart.convertToPixel({ seriesIndex: 0 }, ['Wed', 30]);
// 可能返回 [350, 180]

---

🌟 常见用途：

场景	功能
📍 绘制自定义图形	算出指定数据点对应的像素位置，在上面画标线、标注、图标等
📊 交互辅助线	点击后画固定虚线时，需要转换 x 轴的值成像素
🧮 联动多个图表	一个图表点击后，通过像素计算，定位到另一个图表对应位置

---

⚙️ 示例：

// 获取x=2数据点的像素位置
const pixel = chart.convertToPixel({ seriesIndex: 0 }, [2, 50]);
console.log(pixel); // 例如 [280, 150]

// 用这个像素位置绘制一条竖线
const line = new echarts.graphic.Line({
  shape: { x1: pixel[0], y1: 0, x2: pixel[0], y2: 400 },
  style: { stroke: 'red', lineWidth: 1, lineDash: [4,4] }
});
chart.getZr().add(line);

---

📘 三、convertFromPixel ------ 像素 → 数据

💡 用法：

chart.convertFromPixel(finder, pixel)

• finder: 同上，指定坐标系，例如 {xAxisIndex: 0}。
• pixel: 像素坐标点，比如 [offsetX, offsetY]。

🧠 返回：

返回图表中的"数据值"或"索引值"。

✅ 举例：

chart.getZr().on('click', function (params) {
  const px = [params.offsetX, params.offsetY];
  const dataPoint = chart.convertFromPixel({ xAxisIndex: 0 }, px);
  console.log(dataPoint);
});

结果可能是：

[2, 28] // 表示点击的位置对应数据索引2，Y轴约为28

---

🌟 常见用途：

场景	功能
🖱 获取用户点击的是哪一列	在点击事件中得到点击的数据索引
🎯 鼠标坐标对应的数据	鼠标经过时显示数据详细值
🔄 用点击像素反算数据索引	结合 convertToPixel 实现画布联动或选中效果

---

⚙️ 示例：

chart.getZr().on('click', (params) => {
  const pixelPoint = [params.offsetX, params.offsetY];
  const dataCoord = chart.convertFromPixel({ seriesIndex: 0 }, pixelPoint);
  console.log('点击点对应的数据坐标：', dataCoord);
  // 比如返回 [3, 134] 表示点击在x轴第3个数据附近
});

---

🧭 四、成对使用的典型案例

💬 例子：点击某个点 → 在该点位置画竖线

1️⃣ 用户点击图表 → 得到点击的 pixel 坐标；

2️⃣ 用 convertFromPixel 得到数据的 x 值或索引；

3️⃣ 再用 convertToPixel 把这个数据值转换为正确的 x 像素；

4️⃣ 用 echarts.graphic.Line 在那条 x 位置画一条竖线。

---

✅ 小结对比表格

方法	方向	作用	常见用法
convertToPixel()	数据坐标 → 像素坐标	确定画布上某数据点的实际位置	绘制自定义图形、固定辅助线
convertFromPixel()	像素坐标 → 数据坐标	根据点击或鼠标坐标找出对应数据点	点击事件取数据索引、交互联动