vue2中echarts根据父级div大小自动适应大小

在Vue2中，可以使用ref来获取父级div元素的大小，然后在mounted钩子函数中初始化echarts实例，并使用resize方法来自动适应大小。具体代码如下：

<template>
  <div class="chart-container" ref="chartContainer"></div>
</template>

<script>
import echarts from 'echarts'

export default {
  mounted() {
    const chartContainer = this.$refs.chartContainer
    const chart = echarts.init(chartContainer)

    // 初始化echarts实例

    chart.resize()

    // 自适应大小

    window.addEventListener('resize', () => {
      chart.resize()
    })

    // 监听窗口大小变化，自动适应大小
  }
}
</script>

在上面的代码中，我们使用了ref来获取父级div元素，并在mounted钩子函数中初始化echarts实例。然后，我们调用resize方法来自动适应大小。最后，我们监听窗口大小变化事件，并在事件处理函数中调用resize方法，以便在窗口大小变化时自动适应大小。

相关问题

在vue中使用echarts根据父级div大小自动适应大小

可以通过以下几种方法来实现：

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

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

<script>
import echarts from 'echarts'

export default {
  mounted() {
    this.initChart()
    window.addEventListener('resize', this.handleResize)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize)
  },
  methods: {
    initChart() {
      const chartDom = this.$refs.chart
      const myChart = echarts.init(chartDom)
      myChart.setOption({...})
      this.myChart = myChart
    },
    handleResize() {
      this.myChart.resize()
    }
  }
}
</script>

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

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

2. 监听父级div的大小变化，然后更新echarts的宽高，例如：

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

<script>
import echarts from 'echarts'

export default {
  data() {
    return {
      observer: null
    }
  },
  mounted() {
    this.initChart()
    this.observer = new ResizeObserver(this.handleResize)
    this.observer.observe(this.$refs.container)
  },
  beforeDestroy() {
    this.observer.disconnect()
  },
  methods: {
    initChart() {
      const chartDom = this.$refs.chart
      const myChart = echarts.init(chartDom)
      myChart.setOption({...})
      this.myChart = myChart
    },
    handleResize() {
      this.myChart.resize()
    }
  }
}
</script>

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

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

这里用到了`ResizeObserver`来监听父级div的大小变化，但需要注意该API目前只有在Chrome和Firefox浏览器中支持。

在vue3中使用echarts根据父级div大小自动适应大小

在Vue3中，可以使用`ref`来获取父级`div`的大小，并将其传递给`echarts`实例的`resize`方法，实现自适应大小的效果。

示例代码如下：

<template>
  <div ref="chart" style="height: 400px;"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  mounted() {
    const chart = echarts.init(this.$refs.chart);
    window.addEventListener('resize', () => {
      chart.resize();
    });
  }
}
</script>

在上面的代码中，我们首先通过`ref`获取了父级`div`的引用，然后在`mounted`钩子函数中创建了`echarts`实例并将其挂载到父级`div`上。接着，我们添加了一个`resize`事件监听器，在窗口大小发生变化时调用`chart.resize()`方法，让`echarts`实例自适应父级`div`的大小。

需要注意的是，为了让`echarts`实例能够正确地计算父级`div`的大小，我们需要在父级`div`上设置一个固定的高度。