plainheart/echarts-extension-gmap

Echarts not reflow

Opened this issue · 0 comments

  • When used Gmap in a container, after Gmap is loaded and clicked full screen button ,the Canvas not reflow.
  • Canvas is not the same size as windows .

image

  • How I solved it in project.
<template>
 <div id='gMap'></div>
</template>
// Idle 
this.gmap = this.chart.getModel().getComponent('gmap').getGoogleMap()
this.gmap.addListener('idle', () => {
  const domGmstyle = document.getElementsByClassName('gm-style')[0] as HTMLDivElement
  const domGmwrap = document.getElementById('gMap') as HTMLDivElement
  if(domGmstyle.offsetHeight === window.innerHeight 
    && domGmstyle.offsetWidth === window.innerWidth
  ){ // Fullscreen
    domGmwrap.style.position = 'fixed'
    this.chart.resize()
  }
})