echarts没有自适应，需要用resize去解决，如下

<template>
  <div class="MonitoringSensor">
    <div id="main" :style="{ width: width + 'px', height: width + 'px' }"></div>
    <button @click="change">点击</button>
  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'App',
  components: {},

  data() {
    return {
      chart: null,
      width: 300,
    };
  },
  mounted() {
    this.initChart();
  },

  methods: {
    initChart() {
      this.chart = echarts.init(document.getElementById('main'));
      let options = null;
      options = {
        xAxis: {
          type: 'category',
          data: ['苹果', '梨子', '香蕉'],
          axisLabel: {
            color: '#fff',
          },
        },

        yAxis: {
          type: 'value',
          max: 200,
          axisLabel: {
            color: '#fff',
          },
          splitLine: {
            lineStyle: {
              color: '#222',
            },
          },
        },
        tooltip: {
          trigger: 'axis',
        },
        series: [
          {
            type: 'bar',
            data: [100, 50, 20],
            barWidth: 30,
          },
        ],
      };
      options && this.chart.setOption(options);
    },
    change() {
      this.width += 20;
      this.$nextTick(() => {
        this.chart.resize();
      });
    },
  },
};
</script>

<style scoped>
.MonitoringSensor {
  width: 500px;
  height: 500px;

  margin: 0 auto;
  border: 1px solid red;
}

#main {
  background: rgb(24, 80, 169);
}
</style>

https://blog.csdn.net/jiuliangliang/article/details/139602677