Echarts的自适应问题

发布于 9 个月前

Echarts的自适应容器大小解决方案

问题描述

在给客户设计招聘信息可视化项目中，采用了Echarts来显示部分数据，布局采用的主要还是flex，当菜单栏收起时，图表的容器大小发生了改变，但图表本身没有发生改变。

解决方案

1.官方解决方案

Echarts官方对于图表适应问题，给出的解决方案是监听页面的 resize 事件获取浏览器大小改变的事件，然后调用 echartsInstance.resize 改变图表的大小。

<style>
  #main,
  html,
  body {
    width: 100%;
  }
  #main {
    height: 400px;
  }
</style>
<div id="main"></div>
<script type="text/javascript">
  var myChart = echarts.init(document.getElementById('main'));
  window.addEventListener('resize', function() {
    myChart.resize();
  });
</script>

可在项目中采用这种方案并不奏效，发现这个解决方案下面有一个小贴士

小贴士：有时候我们可能会通过 JS 或 CSS 调整容器大小，由于页面大小并未发生改变，因此 resize 事件将不会被触发。如果有需要覆盖这种情况，可以借助浏览器的 ResizeObserver API 来实现更细粒度的监听。

2.监听容器变化解决方案
根据小贴士，我们了解到ResizeObserver这个原生JS，于是搜索相关资料。

ResizeObserver 是一个 JavaScript API，允许您观察元素大小的变化。它提供了一种异步观察文档中一个或多个元素大小变化的方式，并在其发生时通知您。在 Web 开发中，当您需要动态调整布局或根据元素大小的变化执行操作时，比如响应式设计或处理动态内容时，ResizeObserver 尤为有用。
这个 API 的主要作用是在元素的尺寸发生变化时通知相应的回调函数，以便您可以执行相应的操作。这种能力使得开发者能够更灵活地响应页面元素的变化，从而实现更加动态和交互式的用户界面。
一些 ResizeObserver 的应用场景包括：
响应式布局：在响应式网页设计中，页面元素的大小会随着浏览器窗口的大小变化而变化。使用 ResizeObserver 可以监测到元素的大小变化，从而及时调整布局以适应不同的屏幕尺寸和设备。
动态图表：当图表或数据可视化组件嵌入到页面中时，它们的容器大小可能会发生变化，例如，当用户调整浏览器窗口大小或在移动设备上滚动页面时。通过使用 ResizeObserver，您可以实时监测到容器大小的变化，并相应地更新图表以确保其适应新的尺寸。
懒加载：有时候，当元素进入视口或者元素的尺寸变化时，需要加载一些资源，比如图片或者内容。ResizeObserver 可以用来监测元素的尺寸变化，从而在需要时触发资源的加载。
虚拟滚动列表：虚拟滚动列表通常会根据用户的滚动位置和列表项的可见性来动态加载和卸载列表项。ResizeObserver 可以用来监测列表项容器的大小变化，以便在需要时调整列表项的数量和布局。
总的来说，ResizeObserver 可以用于许多需要实时监测页面元素尺寸变化的场景，它提供了一种灵活和高效的方式来实现动态布局和交互式用户界面。

于是有了如下解决方案：
我这里是在父亲容器上加上的ref

<div style="display: flex;flex-direction: column;width: 50%" ref="chart" @resize="handleResize">
    <el-card class="chartCard" id="salaryChart"></el-card>
    <el-card class="chartCard" id="barChart"></el-card>
</div>

再监听容器

mounted() {
    this.$nextTick(() => {
      // 确保容器已经被渲染
      if (this.$refs.chart) {
        // 创建 ResizeObserver 实例
        this.resizeObserver = new ResizeObserver(entries => {
          // 当容器大小发生变化时执行相关函数
          this.handleResize();
        });

        // 监听容器
        this.resizeObserver.observe(this.$refs.chart);
      } else {
        console.error('容器未找到');
      }
    });

  },
methods:{
    //当存放图表的容器大小改变时，执行相关函数
    handleResize() {
      // 在这里执行你的相关函数
      this.barChart.resize();
      this.pieChart.resize();
      this.lineChart.resize();
      this.salaryBarChart.resize();
      this.eduBarChartu.resize();
    }
},
beforeDestroy() {
    // 组件销毁时停止监听
    if (this.resizeObserver) {
      this.resizeObserver.disconnect();
    }
  }

问题得到解决！

Echarts
$ cd ..