如何解决Vue项目中使用echarts，宽度变化导致图不能resize问题

「爱情、让人受尽委屈。」 2022-12-29 02:13 106阅读 0赞

参考资料：  
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">
        
        
        <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>
        
        <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>
        
        <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>
        
        <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>

效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIyMTgyOTg5_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIyMTgyOTg5_size_16_color_FFFFFF_t_70]: /images/20221120/46dc2ed5beb3450fb65f8e00ad2d6433.png