[Bug] Influence of 'zoom' attributes

[zbkha]

Version

5.3.2

Link to Minimal Reproduction

https://codepen.io/zbkha/pen/yLvoJeE

Steps to Reproduce

When I added the 'zoom' attribute to the element where the chart is located, visually, the chart did zoom, but the mouse was not suspended in the correct position. I'm not sure if it's a bug, but it does cause me a lot of trouble.

Current Behavior

The mouse was not suspended in the correct position.

Expected Behavior

The mouse should be suspended in the correct position but it was not.

Environment

- OS:Windows 10
- Browser:Chrome 101.0.4951.67
- Framework:Always

Any additional comments?

给图表所在html元素添加zoom属性后，鼠标放上去会发生偏移，最终问题在添加css后得以解决，但整个过程十分麻烦，Echarts有没有什么api可以自适应zoom属性。

[plainheart]

Duplicate of #15103. 暂不支持非标准属性 zoom，建议使用 transform: scale 代替。

[zbkha]

Duplicate of #15103. 暂不支持非标准属性 zoom，建议使用 transform: scale 代替。
'transform: scale'可以进行缩放而且不影响鼠标事件，但缩放后仍占据原有位置，当只需要对图表进行缩放时，这一点不是很好。

[Lizhooh]

Duplicate of #15103. 暂不支持非标准属性 zoom，建议使用 transform: scale 代替。

transform will invalidate position: fixed;

[krmao]

oh, no

[dmihai91]

Do you have a solution for this issue, I need the chart mouse events to behave correctly at different zoom levels?

[krmao]

There is a solution, you can make a try

1. zoom such as 0.7 on body
2. unzoom on echarts 1/0.7
3. transform scale 0.7
4. transfromOrigin 0 0

Here is my code, Take it, no thanks needed.

<template>
  <div :style="{ width: props.width, height: props.height, minHeight: props.minHeight }">
    <div ref="lineChartRef" :style="style">
      <slot />
    </div>
  </div>
</template>

<script setup lang="ts">
import { useZoomStore } from "@/store/modules/zoom";
import { computed } from "vue";
import WindowResizeUtil from "@/utils/windowResizeUtil";

//region defineOptions
defineOptions({ name: "ZoomContainer" });

const props = withDefaults(
  defineProps<{
    width?: number | string;
    height?: number | string;
    minHeight?: number | string;
  }>(),
  {
    width: "100%",
    height: "100%",
    minHeight: "100%"
  }
);
const zoomStore = useZoomStore();
const style = computed(() => {
  if (WindowResizeUtil.getSystem() && zoomStore.zoom < 1) {
    return {
      width: `calc(100% * ${1 / zoomStore.zoom})`,
      height: `calc(100% * ${1 / zoomStore.zoom})`,
      zoom: 1 / zoomStore.zoom,
      transform: `scale(${zoomStore.zoom},${zoomStore.zoom})`,
      transformOrigin: "0 0"
    };
  } else {
    return {
      width: "100%",
      height: "100%"
    };
  }
});
</script>