咨询Excel Chart点击缩放实现：点击时自动放大图表

通用前端实现思路 #

核心是通过监听鼠标按下/松开事件，配合CSS缩放动画实现效果，同时保证放大的图表层级最高，不会被其他元素遮挡。

实现代码示例 #

HTML结构

<div class="dashboard">
  <div class="chart-container">
    <!-- 替换为你的图表DOM（比如ECharts容器、canvas等） -->
    <div class="chart">图表1</div>
  </div>
  <div class="chart-container">
    <div class="chart">图表2</div>
  </div>
</div>

CSS样式

.dashboard {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  padding: 16px;
}

.chart-container {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  cursor: zoom-in;
  transition: transform 0.2s ease, z-index 0s;
  z-index: 1;
  /* 固定容器尺寸，适配仪表盘布局 */
  height: 200px;
}

.chart {
  width: 100%;
  height: 100%;
  background-color: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 激活放大状态 */
.chart-container.active {
  transform: scale(1.5);
  z-index: 10;
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
}

JavaScript逻辑

const chartContainers = document.querySelectorAll('.chart-container');

chartContainers.forEach(container => {
  // 鼠标按下时触发放大
  container.addEventListener('mousedown', () => {
    container.classList.add('active');
  });

  // 鼠标松开或离开时还原
  const resetZoom = () => {
    container.classList.remove('active');
  };

  container.addEventListener('mouseup', resetZoom);
  container.addEventListener('mouseleave', resetZoom);
  // 处理鼠标移出页面的情况
  document.addEventListener('mouseup', resetZoom);
});

图表库适配（以ECharts为例） #

如果用ECharts这类自带交互的图表库，需要避免事件冲突：

1. 给图表的父容器绑定上述鼠标事件（不要直接绑定到ECharts的canvas上）
2. 如果图表有拖拽、刷选等交互，可在mousedown时暂时阻止事件冒泡，避免冲突：

const container = document.querySelector('.chart-container');
container.addEventListener('mousedown', (e) => {
  container.classList.add('active');
  // 暂时阻止事件传递到图表，避免触发图表自带交互
  e.stopPropagation();
});

// 还原时恢复事件传递（可选）
const resetZoom = () => {
  container.classList.remove('active');
};

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