在vue中echarts的tree树形图容器设置宽800px,高800px,有一个全屏按钮,点击全屏按钮全屏效果如果数据多有滚动条,如果数据少就展示所有数据点击退出echarts显示原来的大小图表,全屏效果自适应

Vue中可以使用element-ui组件库中的Dialog组件来实现全屏效果，通过监听Dialog的全屏事件来动态改变echarts tree树形图的容器大小。

具体实现步骤如下：

1. 在echarts tree树形图的容器中添加一个全屏按钮，通过点击事件触发显示Dialog组件。

2. 在Dialog组件中显示echarts tree树形图，并设置Dialog的宽度和高度为100%。

3. 监听Dialog的全屏事件，在全屏状态下将echarts tree树形图容器的宽度和高度设置为窗口的宽度和高度，同时设置overflow为auto，以便在数据多时显示滚动条。

4. 在退出全屏状态下，将echarts tree树形图容器的宽度和高度设置为800px，overflow设置为hidden。

5. 当窗口大小改变时，动态改变echarts tree树形图容器的大小。

下面是具体的代码实现：

<template>
  <div>
    <div class="chart-container" ref="chartContainer"></div>
    <el-dialog
      v-model="fullscreen"
      :fullscreen="true"
      :before-close="beforeClose"
      @fullscreen="handleFullscreen"
    >
      <div class="chart-container-fullscreen" ref="chartContainerFullscreen"></div>
    </el-dialog>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  data() {
    return {
      chartData: [], // echarts tree数据
      fullscreen: false, // 是否全屏状态
      chartContainerWidth: 800, // echarts tree容器宽度
      chartContainerHeight: 800, // echarts tree容器高度
    }
  },
  mounted() {
    this.initChart()
  },
  methods: {
    // 初始化echarts tree
    initChart() {
      const chart = echarts.init(this.$refs.chartContainer)
      // 设置echarts tree option
      chart.setOption(option)
      this.chartData = chart.getDataURL()
    },
    // 全屏事件处理
    handleFullscreen(val) {
      if (val) {
        // 进入全屏
        this.chartContainerWidth = window.innerWidth
        this.chartContainerHeight = window.innerHeight
        this.$refs.chartContainerFullscreen.innerHTML = `<img src="${this.chartData}" />`
        this.$refs.chartContainerFullscreen.style.overflow = 'auto'
      } else {
        // 退出全屏
        this.chartContainerWidth = 800
        this.chartContainerHeight = 800
        this.$refs.chartContainerFullscreen.innerHTML = ''
        this.$refs.chartContainerFullscreen.style.overflow = 'hidden'
      }
    },
    // Dialog关闭前处理
    beforeClose(done) {
      if (this.fullscreen) {
        this.fullscreen = false
        done(false)
      } else {
        done()
      }
    },
    // 窗口大小改变时动态改变echarts tree容器大小
    handleResize() {
      if (!this.fullscreen) {
        this.chartContainerWidth = 800
        this.chartContainerHeight = 800
      } else {
        this.chartContainerWidth = window.innerWidth
        this.chartContainerHeight = window.innerHeight
      }
    },
  },
  mounted() {
    window.addEventListener('resize', this.handleResize)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize)
  },
}
</script>

<style>
.chart-container {
  width: 800px;
  height: 800px;
}
.chart-container-fullscreen {
  width: 100%;
  height: 100%;
}
</style>