1.tabs页面


//@tab-click="handleClick"
this.$nextTick(() => {
        setTimeout(() => {
          if (this.activeName === 'first') {
            this.$refs.all && this.$refs.all.resizeCharts()
          }
        },300)
      })


2.overview页面

 resizeCharts() {
            this.$nextTick(() => {
                setTimeout(() => {
                    const refs = [
                        "appDevice",
                        "multiroom",
                        "streamingServices",
                        "streamingApp",
                        "input",
                        "output",
                        "remoteControl"
                    ]

                    refs.forEach(refName => {
                        const comp = this.$refs[refName]
                        comp && comp.resizeChart && comp.resizeChart()
                    })
                }, 100)
            })
        }

3.Echarts 组件

 //data
 chart: null,
 resizeHandler: null

mounted() {
    this.resizeHandler = debounce(() => {
      this.resizeChart()
    }, 100)

    window.addEventListener("resize", this.resizeHandler)
    this.initChart();
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.resizeHandler)

    if (this.chart) {
      this.chart.dispose()
      this.chart = null
    }
  },

// 图表渲染最后调用方法
this.resizeChart();

// methods 方法
resizeChart() {
      this.$nextTick(() => {
        setTimeout(() => {
          this.chart && this.chart.resize()
        }, 100)
      })
    },

更多推荐