vue中echarts层级太高

### Vue 中 ECharts 图表层级显示问题解决方案

在处理 Vue 和 ECharts 结合使用时，如果遇到图表层级过高的问题，通常是因为 canvas 渲染方式造成的。Canvas 组件由客户端创建，属于原生组件，其层级最高，因此页面中的其他组件即使设置了 `z-index` 也无法覆盖它[^2]。

为了有效解决这一问题，可以考虑以下几种方法：

#### 方法一：调整渲染器
尝试切换到 SVG 渲染模式而非默认的 Canvas 模式。SVG 是基于 XML 的矢量图形标准，在某些情况下能够更好地与其他 DOM 元素交互并支持更灵活的样式控制。

// 初始化 ECharts 实例时指定 renderer 参数为 'svg'
let myChart = echarts.init(document.getElementById('main'), null, {renderer: 'svg'});

这种方法适用于不需要特别高性能场景的应用程序，因为对于复杂或大数据集可视化来说，SVG 可能不如 Canvas 高效[^1]。

#### 方法二：修改 HTML 结构
重新设计网页布局结构，使需要位于最顶层的内容放置于更高层次级容器内，并通过 CSS 控制这些容器的位置关系来实现视觉上的层叠效果。例如，可以通过绝对定位的方式让特定元素始终处于视窗顶部。

/* 设置父级 div 定位 */
.parent-div {
    position: relative;
}

/* 让子元素浮动至屏幕顶端 */
.top-layer-element {
    position: absolute;
    top: 0;
    left: 0;
}

此策略避免了直接操作 z-index 值所带来的不确定性，同时也绕过了由于浏览器对不同类型的 Web Components 处理差异所引发的问题。

#### 方法三：利用 iframe 或 shadow DOM 封装
当上述两种方案无法满足需求时，还可以探索更加复杂的封装技术，比如将 ECharts 放入 iframe 中隔离出来单独管理；或者是采用 Shadow DOM 来构建自定义组件，从而获得更好的样式隔离性和更高的灵活性。