echarts宽高自适应

要让ECharts图表在宽高变化时自适应，可以通过以下两种方式实现：

1. 使用百分比设置ECharts容器的宽高，例如：

<div id="chart" style="width: 100%; height: 100%;"></div>

然后在初始化ECharts时，设置`resize`选项为`true`，表示当容器大小变化时自动重绘图表：

var chart = echarts.init(document.getElementById('chart'));
chart.setOption(option);
chart.resize();

2. 监听窗口的`resize`事件，在事件处理函数中手动重绘图表，例如：

window.addEventListener('resize', function () {
  chart.resize();
});

其中`chart`为已经初始化的ECharts实例。这种方式可以适用于任何容器大小变化的情况，但比较麻烦。

相关问题

vue echarts 高宽不是自适应

Vue中使用Echarts时，常常会出现高宽不是自适应的情况。这是因为Echarts的默认宽度是400px，高度是200px，不会自动适应容器的大小。为了解决这个问题，我们需要手动设置Echarts的宽高属性。

首先，我们需要在组件的mounted钩子函数中获取容器的宽高，然后将其传递给Echarts的配置项中。代码如下：

mounted() {
  let container = this.$refs.chartContainer;
  let width = container.clientWidth;
  let height = container.clientHeight;
  this.chart = echarts.init(container);
  this.chart.setOption({
    ...,
    width: width,
    height: height
  });
}

在这个例子中，我们通过this.$refs.chartContainer获取了Echarts所在的容器元素，然后获取了容器的宽度和高度。接着，我们使用echarts.init方法初始化了Echarts实例，并将容器元素传递给它。最后，我们将获取到的宽度和高度设置为Echarts实例的宽高属性。

需要注意的是，如果容器元素的大小会在页面渲染后动态改变，我们需要将上面的代码放在一个resize函数中，并在window的resize事件中调用它，以保证Echarts的尺寸始终能够自适应。

总之，通过获取容器的宽高并设置给Echarts实例，可以实现Echarts的高宽自适应，使其更加符合实际需求。

echarts怎么能自适应页面布局

要让 Echarts 图表自适应页面布局，可以通过以下几个步骤实现：

1. 设置容器的宽高为百分比值，而不是固定像素值。这样容器的大小会随着页面布局的变化而自适应调整。

2. 在 Echarts 初始化时，设置 option 中的 grid 属性的宽高为百分比值，而不是固定像素值。这样图表的大小会随着容器的大小而自适应调整。

3. 监听窗口大小变化事件，当窗口大小变化时，重新计算容器和图表的大小，并调用 echarts 的 resize() 方法调整图表大小。

示例代码如下：

<div id="chart" style="width: 100%; height: 400px;"></div>

<script>
  // 初始化 Echarts 图表
  var chart = echarts.init(document.getElementById('chart'));

  // 设置 option 中的 grid 属性的宽高为百分比值
  var option = {
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
      width: '90%', // 宽度为容器宽度的90%
      height: '90%' // 高度为容器高度的90%
    },
    ...
  };

  // 使用指定的配置项和数据显示图表
  chart.setOption(option);

  // 监听窗口大小变化事件，重新计算容器和图表的大小，并调用 echarts 的 resize() 方法调整图表大小
  window.addEventListener('resize', function() {
    chart.resize();
  });
</script>

这样就可以实现 Echarts 图表的自适应页面布局了。