echart图表自适应大小

最新推荐文章于 2023-07-25 01:10:32 发布

前端世界的蒋小姐

最新推荐文章于 2023-07-25 01:10:32 发布

阅读量534

点赞数

文章标签：前端 echarts

本文链接：https://blog.csdn.net/weixin_51258044/article/details/131706732

版权

窗口大小自适应

 mounted () {
    this.$nextTick(() => {
      this.init()
    })
    window.addEventListener('resize', this.changeSize)

  },
  beforeDestroy () {
    window.removeEventListener('resize', this.changeSize)
    if (this.myChart) {
      this.myChart.dispose()
    }
  },
  methods: {
    changeSize () {
      if (document.getElementById(this.idLine)) {
        this.$echarts.init(document.getElementById(this.idLine)).resize()
      }
    },
    init () {
      if (this.myChart) {
        this.myChart.dispose()
      }
      this.myChart = this.$echarts.init(document.getElementById(this.idLine))
      let option = {
        ...
      }
      this.myChart.setOption(option)
    }
}

父盒子大小自适应

 props: {
    idLine: {
      type: String,
      default: 'line'
    },
    data: {
      type: Array,
      default: [
      ]
    },
   //父组件向子组件传值，判断是否更新
    updata: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    data (val) {
      console.log('折线图', val)
      this.init()
    },
    updata (val) {
      console.log('更新', val)
      this.changeSize()
    }
  },
  methods: {
    changeSize () {
      if (document.getElementById(this.idLine)) {
        this.$echarts.init(document.getElementById(this.idLine)).resize()
      }
    },
  }