vue+echarts页面三等分自适应布局

Vue Echarts页面三等分自适应布局可以通过使用Flex布局来实现。以下是一种实现方法：

1. 在父组件中使用Flex布局，并设置flex-wrap属性为wrap，这样所有子组件会自动换行。

<template>
  <div class="container">
    <div class="chart-wrapper"></div>
    <div class="chart-wrapper"></div>
    <div class="chart-wrapper"></div>
  </div>
</template>

<style>
.container {
  display: flex;
  flex-wrap: wrap;
}

.chart-wrapper {
  flex-basis: 33.33%;
  min-width: 300px;
  height: 300px; /* 设置echarts图表容器的高度 */
}
</style>

2. 在子组件的mounted钩子函数中使用Echarts库来渲染图表，并设置图表容器的宽度和高度。

<template>
  <div class="chart-wrapper" ref="chart"></div>
</template>

<script>
import echarts from 'echarts';

export default {
  mounted() {
    const chart = echarts.init(this.$refs.chart);
    chart.setOption({/* Echarts图表配置 */});
    chart.resize(); // 自适应宽度
  }
}
</script>

<style>
.chart-wrapper {
  width: 100%;
  height: 100%;
}
</style>

通过以上方法，我们可以实现一个自适应的Echarts图表页面，其中每个图表容器都平均分配了父容器的宽度，并自动换行。