vue echarts 关于图表显示不全或者偏移问题，原因追溯

一、问题现状

3D环形图问题如下：

二、问题解决过程

      网上查找过许多资料，总体分为以下几种解决方式：

     1、mychart.resize()：在创建图表的地方添加mychart.resize()，未起作用；

     2、this.$nextTick(() => {})：如下图，未起作用。

     3、在option中修改图表位置，未起作用。

三、问题解决

1、发现关键问题点

在程序调试中发现宽度100%，在实际执行过程中变成了100px，如下图

2、问题追溯

1）.发现display: none;

通过网上资料和对盒子向上向外层查找分析，查到最外层盒子带有 display: none;的属性

2）.display: none;的作用

这个属性的作用是该元素不被显示。

查看源码会发现：当echarts绘制表格（也就是执行init方法）计算宽度的时候，由于初始化图表时外层div盒子的属性为display:none，所以无法获取到盒子的clientWidth（可视化宽度），而parseInt(stl.width,10)将宽度100%转换成了100，所以计算出的图表宽度为100px。

3）. display: none;是怎么出现的？

由于图表所在页面是通过v-show来控制显示\隐藏的，而 v-show绑定的默认值是 false，那么对应的元素将会被设置 display: none;，从而在页隐藏这个页面及其子元素。

// 我的代码
<template>
  <div v-show="visible" class="cm-container">
     ……
     图表代码
  </div>
</template>

3、解决方法

方法一：把承载echarts图表的div的 width: 100%;改为确切值，如，width: 400px; 这个方法最便捷。 

方法二：如果图表已经封装好，原有的设置不能修改，那么在调用init时传值重新给个宽度值。

改法一：

let getId = document.getElementById(id);
let myChart = echarts.init(getId); 
myChart.resize({
    width: newWidth, // newWidth传值参数
    // height:
  })



改法二：

let getId = document.getElementById(id);
getId.style.width = newWidth // newWidth传值参数
let myChart = echarts.init(getId);

方法三：使用watch，这个方法只是个想法，还没有实际测试，感兴趣的话可以试试，后续有时间了我会更新。

高度不全问题同上。

效果如下：