Echarts点击tootip的阴影背景触发事件

Echarts点击tootip的阴影背景触发事件

前提须知

借鉴地址
前提须知地址
需要知道的是echarts提供的点击事件只有在点击到图形元素时才触发, 因此点击非图形的阴影背景需要参考官网关于监听’空白处’的点击事件说明

有时候，开发者需要监听画布的“空白处”所触发的事件。比如，当需要在用户点击“空白处”的时候重置图表时。

在讨论这个功能之前，我们需要先明确两种事件。zrender 事件和 echarts 事件。

myChart.getZr().on('click', function(event) {
  // 该监听器正在监听一个`zrender 事件`。
});
myChart.on('click', function(event) {
  // 该监听器正在监听一个`echarts 事件`。
});

zrender 事件与 echarts 事件不同。前者是当鼠标在任何地方都会被触发，而后者是只有当鼠标在图形元素上时才能被触发。
事实上，echarts 事件是在 zrender 事件的基础上实现的，
也就是说，当一个 zrender 事件在图形元素上被触发时，echarts 将触发一个 echarts 事件给开发者。

containPixel方法获取是否在坐标系内发生了点击事件

// 判断 [23, 44] 点是否在 geoIndex 为 0 的 geo 坐标系上。
chart.containPixel('geo', [23, 44]); // 'geo' 等同于 {geoIndex: 0}

convertFromPixel转换像素坐标值到逻辑坐标系上的点 使用convertFromPixel是因为 convertToPixel是将转换坐标系上的点到像素坐标值, 后面需要的是 逻辑坐标系上的点, 后续可以试试两者打印的区别

// 使用第一个系列对应的坐标系：
chart.convertFromPixel({seriesIndex: 0}, [128.3324, 89.5344]);

getOption获取当前实例中维护的 option 对象

myChart.getOption()

代码

代码地址 codepen

const myChart = echarts.init(dom, null, {
  renderer: "canvas",
  useDirtyRect: false
});
const option = {
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow"
    }
  },
  xAxis: {
    type: "category",
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
  },
  yAxis: {
    type: "value"
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: "bar"
    }
  ]
};

if (option && typeof option === "object") {
  myChart.setOption(option);
}

myChart.getZr().on("click", (event) => {
  // 该监听器正在监听一个`zrender 事件`。
  console.log(event);
  const { offsetX, offsetY } = event;
  const pointList = [offsetX, offsetY];
  if (myChart.containPixel("grid", pointList)) {
  	// 这里的 getIndex 就可以知道当前点击的是哪一个 柱形图的背景色了
    const getIndex = myChart.convertFromPixel({ seriesIndex: 0 }, pointList)[0];
    const getOption = myChart.getOption();
    let xAxis = getOption.xAxis;
    let name = xAxis[0].data[getIndex];
    console.log(getIndex , name);
  }
});