vue中多个echarts 仪表盘的时候自适应的问题,请各位帮忙解决解决?谢谢.不是样式的问题.

Question

1.当浏览器缩小的时候,就会有一个仪表盘自动缩小如图:

2.代码如下(三个仪表盘的代码一样),请问怎么解决这个问题:
<template>
<div style="width:100%; height:400px;">

<div id="Overview1" style="width:100%; height:400px;"></div>

</div>
</template>
<script>
import echarts from 'echarts';
export default {

name: 'OverviewEcharts1',
data(){
  return{
    chart: null,
    datas: [{value: 50, name: ''}],
    labels: ['[e-mail]',]
  }
},
methods: {
  drawGraphs(id) {
    this.chart = echarts.init(document.getElementById(id))
    this.chart.showLoading();
    var that = this
    this.chart.setOption({
      tooltip : {
        formatter: "{a} <br/>{b} : {c}%"
      },
      series: [
        {
          name: '业务指标',
          type: 'gauge',
          detail: {formatter:'{value}%'},
          data: this.datas
        }
      ]
    })
    window.onresize = ()=> {
      this.chart.resize()
    }
    window.addEventListener('resize',()=> {
      this.chart.resize()
    })
    this.chart.hideLoading()
  },
},
mounted() {
  this.$nextTick(function() {
    this.drawGraphs('Overview1')
  })

}

}
</script>

<style scoped>

</style>

Answer 1

你这个解决了吗