一.tab切换的时候，echarts显示不完整的问题

最新推荐文章于 2024-07-16 15:41:11 发布

~rong~er~

最新推荐文章于 2024-07-16 15:41:11 发布

阅读量2.6k

点赞数 4

分类专栏： vue 文章标签： echarts 前端 javascript vue vue.js

本文链接：https://blog.csdn.net/aiiit/article/details/121722291

版权

本文介绍了在Vue项目中遇到Echarts图表在tab切换后显示不完整的问题及其解决方法。问题源于图表容器宽度设置错误，由于在切换时display变为none，导致Echarts无法正确获取宽度。解决方案包括使用elementUI的lazy属性和重新渲染图表。此外，还总结了Echarts在Vue项目的引入和配置方法。

摘要由CSDN通过智能技术生成

一.tab切换的时候，echarts显示不完整的问题

通过切换头部tab，控制主体内容的显示与隐藏。如下图所示，图标除了第一个tab分页，其他分页的图表没有占满一行，蜷缩在页面左边。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-frgKM3Ui-1638624897975)(D:\home\笔记\工作相关\图片\tab切换echarts显示不全.png)]

Echarts展示一张图表时，承载其的html容器一定要设置好宽度，所以想着是不是页面结构问题，Echarts图表容器的宽度设置出错。检查发现，肯定是设置了宽高的。

缘由追查

查看图表容器，发现容器元素宽度被设置为100px了；说明是Echart源码进行了某些处理。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cbAmkPt1-1638624897976)(D:\home\笔记\工作相关\图片\图标样式.webp)]

echarts3源码中获取容器的宽高的代码

_getSize: function (whIdx) {
   
    var opts = this._opts;
    var wh = ['width', 'height'][whIdx];
    var cwh = ['clientWidth', 'clientHeight'][whIdx];
    var plt = ['paddingLeft', 'paddingTop'][whIdx];
    var prb = ['paddingRight', 'paddingBottom'][whIdx];

    if (opts[wh] != null && opts[wh] !== 'auto') {
   
      return parseFloat(opts[wh]);
    }

    var root = this.root; // IE8 does not support getComputedStyle, but it use VML.

    var stl = document.defaultView.getComputedStyle(root);
    return (root[cwh] || parseInt10(stl[wh]) || parseInt10(root.style[wh])) - (parseInt10(stl[plt]) || 0) - (parseInt10(stl[prb]) || 0) | 0;
  },

这才发现问题所在，获取图表宽度时，由于图表所在的分页display:none，所以root.clientWidth获取失败；

这样也就解释为什么我们的图表宽度都是100px了。

解决方法1：

     <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="新增用户" name="first" lazy>
            <new-users></new-users>
          </el-tab-pane>
          <el-tab-pane label="累计用户" name="second" lazy>
            <total-users></total-users>
          </el-tab-pane>
          <el-tab-pane label="用户占比" name="third" lazy>
            <percentage-users></percentage-users>
          </el-tab-pane>
        </el-tabs>

代码中加入elementUI标签tabs中的lazy属性就可以实现这个功能。

但是经测试发现有时候，还是会出现突然闪现左移的问题。

解决方案2：

  <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="新增用户" name="first">
           <new-users v-if="'first' === activeName"></new-users>
       </el-tab-pane>
       <el-tab-pane label="累计用户" name="second">
           <total-users v-if="'second' === activeName"></total-users>
       </el-tab-pane>
       <el-tab-pane label="用户占比" name="third">
           <percentage-users v-if="'third' === activeName"></percentage-users>