前端遭遇的渲染难题，echarts无法适应该如何破局？

2023-09-06 06:15:29

作为前端开发工程师，在处理数据可视化工作时，难免会遇到使用echarts进行图表绘制的情况。然而，在多图表并存的页面中，当浏览器窗口发生尺寸变化时，echarts图表的自适应问题就成了一个让人头疼的难题。特别是当只有一个图表可以正常自适应时，这种问题就更加令人抓狂了。针对这种情况，本文将深入剖析echarts自适应失效的原因，并提供有效的解决方案，帮助您轻松解决这一困扰。

一、echarts自适应失效的原因

在深入探讨解决方法之前，我们首先需要了解echarts自适应失效的原因。

监听事件冲突：

多个echarts图表同时监听window.onresize事件时，由于浏览器在同一时刻只能处理一个事件，因此只有一个图表的自适应生效。
渲染方式不同：

echarts提供了两种渲染方式：Canvas和SVG。Canvas渲染具有更高的性能，但对浏览器兼容性要求较高，而在某些情况下，浏览器可能会自动切换到SVG渲染，导致自适应失效。
图表容器尺寸变化：

如果图表容器的尺寸发生变化，但没有及时通知echarts实例，也会导致自适应失效。

二、有效的解决方案

针对上述原因，我们可以采取以下措施来解决echarts自适应失效的问题：

使用定时器：

为每个window.onresize事件监听方法添加一个定时器，确保每个图表都有足够的时间来响应尺寸变化事件。
统一渲染方式：

在初始化echarts实例时，强制使用Canvas或SVG渲染，避免浏览器自动切换渲染方式导致的自适应失效。
监听图表容器尺寸变化：

使用JavaScript的MutationObserver API来监听图表容器尺寸变化，当尺寸变化时，及时通知echarts实例进行自适应。

三、代码示例

为了帮助您更好地理解并应用这些解决方案，这里提供了一个代码示例，演示如何在多图表并存的页面中实现echarts的自适应：

// 引入echarts库
import * as echarts from 'echarts';

// 初始化echarts实例
var myChart1 = echarts.init(document.getElementById('chart1'));
var myChart2 = echarts.init(document.getElementById('chart2'));

// 监听浏览器窗口尺寸变化事件
window.onresize = function() {

  // 使用定时器确保每个图表都有足够的时间来响应尺寸变化事件
  setTimeout(function() {

    // 重新调整图表尺寸
    myChart1.resize();
    myChart2.resize();

  }, 200);

};