可以在Vue组件的mounted钩子函数中监听窗口大小改变事件,重新设置图表的宽高来实现自适应。具体代码如下:xmlCopy

<template>
  <div class="chart-container" ref="chart"></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() {
      this.myChart = echarts.init(this.$refs.chart)
      this.myChart.setOption({
        // 设置图表配置项
      })
      this.handleResize()
    },
    handleResize() {
      this.myChart.resize()
    }
  }
}
</script>

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

By lxcss

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注