echarts 动态高度

对于echarts的动态高度适配，可以使用resize()方法来实现。首先，你需要在页面加载完成后初始化echarts实例，并设置图表的初始配置。然后，你可以监听窗口的resize事件，在事件回调函数中调用resize()方法来重新计算图表的大小，以适应窗口的变化。

以下是一个示例代码，展示了如何在Vue项目中使用echarts的resize()方法来实现动态高度适配：

// 在Vue组件中的代码
import echarts from 'echarts'

export default {
  data() {
    return {
      chartInstance: null, // echarts实例
      chartContainer: null, // 图表容器元素
      chartHeight: 0 // 图表容器的高度
    }
  },
  mounted() {
    // 获取图表容器元素
    this.chartContainer = document.getElementById('chart')

    // 初始化echarts实例
    this.chartInstance = echarts.init(this.chartContainer)

    // 设置图表的初始配置
    const option = {
      // 图表的配置项...
    }
    this.chartInstance.setOption(option)

    // 监听窗口的resize事件
    window.addEventListener('resize', this.handleResize)
  },
  beforeDestroy() {
    // 在组件销毁前移除resize事件的监听
    window.removeEventListener('resize', this.handleResize)
  },
  methods: {
    handleResize() {
      // 获取图表容器的高度
      this.chartHeight = this.chartContainer.clientHeight

      // 调用resize()方法重新计算图表的大小
      this.chartInstance.resize({ height: this.chartHeight })
    }
  }
}

在上述代码中，mounted()钩子函数中初始化了echarts实例，并设置了图表的初始配置。然后，通过监听窗口的resize事件，在事件回调函数handleResize()中获取图表容器的高度，并调用resize()方法重新计算图表的大小。

请注意，你需要将上述代码中的`'chart'`替换为你实际使用的图表容器的id。

希望这个示例能够帮助你实现echarts的动态高度适配。
#### 引用[.reference_title]
- *1* [Echarts中的高度自适应](https://blog.csdn.net/Monster_MY/article/details/109495496)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* *3* [echarts容器设置动态高度](https://blog.csdn.net/qq_40701522/article/details/105053294)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down1,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]