参考资料：
https://blog.csdn.net/weixin_44217741/article/details/105536986

关键代码：
1，第一步：
安装：
cnpm install element-resize-detector
2，第二步：
引入
import elementResizeDetectorMaker from ‘element-resize-detector’

3，在mounted里面监听dom元素

 mounted() {
    this.drawChart1()
    this.drawChart2()
    let erd = elementResizeDetectorMaker();
    let that = this
    erd.listenTo(document.getElementById("main1"), (element) => {
      let width = element.offsetWidth;
      let height = element.offsetHeight;
      console.log(width)
      console.log(height)
      that.$nextTick(() => {
        //使echarts尺寸重置
        that.$echarts.init(document.getElementById("main1")).resize();
        that.$echarts.init(document.getElementById("main2")).resize();
      });
    });
  },

我的完整代码：

<template>
  <div class="home-box">
    <!--    <h1>您已进入四川省*智能语音管理平台</h1>-->
    <!--    1关键词预警信息统计-->
    <div class="warning-information-statistics">
      <div class="warning-information-left">
        <h3>
          关键词预警信息统计
        </h3>
        <div class="today-quantity">
          <div class="distinguish">
            <p>今日识别</p>
            <h2>345000</h2>
            <p>个关键词</p>
            <p>总识别：900000000</p>
          </div>
          <div class="Screened">
            <p>今日已甄别</p>
            <h2>245000</h2>
            <p>个关键词</p>
            <p>总识别：300000000</p>
          </div>
          <div class="clearfix"></div>
          <el-button type="primary" class="keyword-screening-btn">关键词甄别</el-button>
        </div>
      </div>
      <div id="main1"></div>
    </div>
    <!--    2服务器引擎处理队列情况-->
    <div class="server-engine-processes-queue">
      <div class="warning-information-left">
        <h3>
          关键词预警信息统计
        </h3>
        <div class="today-quantity">
          <div class="distinguish">
            <p>今日发现</p>
            <h2>345000</h2>
            <p>新待转写</p>
            <p>总发现：300000000</p>
          </div>
          <div class="Screened">
            <p>今日上传转写</p>
            <h2>340005</h2>
            <p>排队待处理</p>
            <p>总上传：300000000</p>
          </div>
          <div class="clearfix"></div>
        </div>
        <div class="today-quantity">
          <div class="distinguish">
            <p>引擎并行</p>
            <h2>320</h2>
            <p>转写中</p>
            <p>平均耗时：3分钟/文件</p>
          </div>
          <div class="Screened">
            <p>今日完成</p>
            <h2>399999</h2>
            <p>转写文件</p>
            <p>总完成：300000000</p>
          </div>
          <div class="clearfix"></div>
        </div>
        <el-button type="primary" class="resource-management-btn">资源管理</el-button>
      </div>
      <div class="warning-information-right">
        <el-table
          :data="tableData1"
          border
          style="width: 100%"
        >
          <el-table-column
            prop="id"
            label="排队序号"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="place"
            label="*"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="scene"
            label="场景"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="fileName"
            label="文件名"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="size"
            label="大小"
            align="center"
          >
          </el-table-column>
        </el-table>
        <el-pagination
          background
          class="pagination-box"
          layout="prev, pager, next"
          :total="1000"
        >
        </el-pagination>
        <el-button type="primary" class="keyword-screening-btn">队列管理</el-button>

      </div>
    </div>
    <!--3服务单位信息统计-->
    <div class="unit-statistical-service">
      <div class="warning-information-left">
        <h3>
          服务单位信息统计
        </h3>
        <div class="today-quantity">
          <div class="distinguish">
            <p>今日接口调用</p>
            <h2>30002</h2>
            <p>次</p>
            <p>上传文件：1234567个</p>
          </div>
          <div class="Screened">
            <p>今日接口传输数据</p>
            <h2>245000</h2>
            <p>/MB</p>
            <p>总计处理：300000TB</p>
          </div>
          <div class="clearfix"></div>
          <el-button type="primary" class="interface-call-view-btn">接口调用查看</el-button>
        </div>
      </div>
      <div id="main2"></div>
    </div>
    <!--4平台调用信息排名-->
    <div class="platform-call-information-ranking">
      <h3>
        平台调用信息排名
      </h3>
      <el-table
        :data="tableData2"
        border
        style="width: 100%"
      >
        <el-table-column
          prop="state"
          label="状态"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="interface"
          label="接口"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="totalCalls"
          label="总调用次数"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="callRanking"
          label="调用排名"
          align="center"
        >
        </el-table-column>
      </el-table>
      <el-pagination
        background
        class="pagination-box"
        layout="prev, pager, next"
        :total="1000"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import elementResizeDetectorMaker from 'element-resize-detector'
export default {
  name: 'index',
  data() {
    return {
      screenWidth: document.body.clientWidth,
      tableData1: [
        {
          id: '10',
          place: '嘉州',
          scene: '亲电',
          fileName: '20201423425678.mp3',
          size: '10mb'
        },
        {
          id: '10',
          place: '嘉州',
          scene: '亲电',
          fileName: '20201423425678.mp3',
          size: '10mb'
        }, {
          id: '10',
          place: '嘉州',
          scene: '亲电',
          fileName: '20201423425678.mp3',
          size: '10mb'
        },
        {
          id: '10',
          place: '嘉州',
          scene: '亲电',
          fileName: '20201423425678.mp3',
          size: '10mb'
        }, {
          id: '10',
          place: '嘉州',
          scene: '亲电',
          fileName: '20201423425678.mp3',
          size: '10mb'
        },
        {
          id: '10',
          place: '嘉州',
          scene: '亲电',
          fileName: '20201423425678.mp3',
          size: '10mb'
        }, {
          id: '10',
          place: '嘉州',
          scene: '亲电',
          fileName: '20201423425678.mp3',
          size: '10mb'
        },
        {
          id: '10',
          place: '嘉州',
          scene: '亲电',
          fileName: '20201423425678.mp3',
          size: '10mb'
        }, {
          id: '10',
          place: '嘉州',
          scene: '亲电',
          fileName: '20201423425678.mp3',
          size: '10mb'
        },
        {
          id: '10',
          place: '嘉州',
          scene: '亲电',
          fileName: '20201423425678.mp3',
          size: '10mb'
        }
      ],
      tableData2: [
        {
          state: '正常',
          interface: '接口101',
          totalCalls: '99999',
          callRanking: '两级指挥'
        },
        {
          state: '正常',
          interface: '接口101',
          totalCalls: '99999',
          callRanking: '两级指挥'
        },
        {
          state: '正常',
          interface: '接口101',
          totalCalls: '99999',
          callRanking: '两级指挥'
        },
        {
          state: '正常',
          interface: '接口101',
          totalCalls: '99999',
          callRanking: '两级指挥'
        },
        {
          state: '正常',
          interface: '接口101',
          totalCalls: '99999',
          callRanking: '两级指挥'
        },
        {
          state: '正常',
          interface: '接口101',
          totalCalls: '99999',
          callRanking: '两级指挥'
        },
        {
          state: '正常',
          interface: '接口101',
          totalCalls: '99999',
          callRanking: '两级指挥'
        },
        {
          state: '正常',
          interface: '接口101',
          totalCalls: '99999',
          callRanking: '两级指挥'
        },
        {
          state: '正常',
          interface: '接口101',
          totalCalls: '99999',
          callRanking: '两级指挥'
        },
        {
          state: '正常',
          interface: '接口101',
          totalCalls: '99999',
          callRanking: '两级指挥'
        }
      ]
    }
  },
  methods: {
    goTarget(href) {
      window.open(href, '_blank')
    },
    drawChart1() {
      console.log('重绘了')
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('main1'))
      // 指定图表的配置项和数据
      let option = {
        color: ['#3398DB'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          height: '90%',
          width: '90%',
          left: '3%',
          right: '4%',
          top: '7%',
          bottom: '3%',
          containLabel: true

        },
        xAxis: [
          {
            type: 'category',
            data: ['邑州*1', '邑州*2', '邑州*3', '崇州*1', '崇州*2', '崇州*3', '崇州*4', '省*1', '省*2', '省*3', '省*4', '省*1', '省*2', '省*3', '省*4'],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '关键词个数',
            type: 'bar',
            barWidth: '60%',
            data: [10, 52, 200, 334, 390, 330, 220, 100, 150, 500, 390, 100, 150, 500, 390]
          }
        ]
      }

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    },
    drawChart2() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('main2'))
      // 指定图表的配置项和数据
      let option = {
        color: ['#3398DB'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          height: '90%',
          width: '90%',
          left: '3%',
          right: '4%',
          top: '7%',
          bottom: '3%',
          containLabel: true

        },
        xAxis: [
          {
            type: 'category',
            data: ['邑州*1', '邑州*2', '邑州*3', '崇州*1', '崇州*2', '崇州*3', '崇州*4', '省*1', '省*2', '省*3', '省*4', '省*1', '省*2', '省*3', '省*4'],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '关键词个数',
            type: 'bar',
            barWidth: '60%',
            data: [10, 52, 200, 334, 390, 330, 220, 100, 150, 500, 390, 100, 150, 500, 390]
          }
        ]
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    }
  },
  mounted() {
    this.drawChart1()
    this.drawChart2()
    let erd = elementResizeDetectorMaker();
    let that = this
    erd.listenTo(document.getElementById("main1"), (element) => {
      let width = element.offsetWidth;
      let height = element.offsetHeight;
      console.log(width)
      console.log(height)
      that.$nextTick(() => {
        //使echarts尺寸重置
        that.$echarts.init(document.getElementById("main1")).resize();
        that.$echarts.init(document.getElementById("main2")).resize();
      });
    });
  },
  watch: {
  }
}
</script>

<style scoped lang="scss">
.home-box {
  //background-color: #003366;
  margin: 30px 20px;
  min-width: 990px;

  .clearfix {
    clear: both;
  }
;

  .warning-information-statistics {
    //background-color: lightseagreen;
    border: 1px solid gray;
    border-radius: 10px;
    padding: 10px;
    width: 100%;
    height: 100%;
    min-height: 320px;
    max-height: 1000px;
    //min-width: 1336px;
    .warning-information-left {
      width: 40%;
      height: 300px;
      //background-color: lightcoral;
      float: left;

      .today-quantity {
        .distinguish {
          float: left;
          //background-color: red;
          width: 50%;
        }

        .Screened {
          float: left;
          margin-bottom: 30px;
        }

        .keyword-screening-btn {

        }
      }

    }

    #main1 {
      width: 60%;
      //min-width: 800px;
      height: 300px;
      float: left;
      //background-color: lightsalmon;
    }
  }

  .server-engine-processes-queue {
    //background-color: lightseagreen;
    border: 1px solid gray;
    border-radius: 10px;
    padding: 10px;
    width: 100%;
    height: 620px;
    min-height: 320px;
    margin: 20px auto;

    .warning-information-left {
      width: 40%;
      height: 100%;
      //background-color: lightcoral;
      float: left;

      .today-quantity {
        margin-bottom: 50px;

        .distinguish {
          float: left;
          //background-color: red;
          width: 50%;
        }

        .Screened {
          float: left;
          margin-bottom: 30px;
        }


      }

      .resource-management-btn {

      }
    }

    .warning-information-right {
      width: 60%;
      min-width: 800px;
      height: 300px;
      float: left;
      //background-color: lightsalmon;
      padding-left: 50px;

      .pagination-box {
        margin: 20px auto;
      }
    }
  }

  .unit-statistical-service {
    //background-color: lightseagreen;
    border: 1px solid gray;
    border-radius: 10px;
    padding: 10px;
    width: 100%;
    height: 100%;
    min-height: 320px;

    .warning-information-left {
      width: 40%;
      height: 300px;
      //background-color: lightcoral;
      float: left;

      .today-quantity {
        .distinguish {
          float: left;
          //background-color: red;
          width: 50%;
        }

        .Screened {
          float: left;
          margin-bottom: 30px;
        }

        .interface-call-view-btn {

        }
      }

    }

    #main2 {
      width: 60%;
      min-width: 800px;
      height: 300px;
      float: left;
      //background-color: lightsalmon;
    }
  }

  .platform-call-information-ranking {
    //background-color: lightseagreen;
    border: 1px solid gray;
    border-radius: 10px;
    padding: 10px;
    width: 100%;
    height: 100%;
    margin-top: 20px;

    .pagination-box {
      margin-top: 20px;
      margin-bottom: 20px;
    }
  }
}
</style>

效果图：