一、问题现状
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,这个方法只是个想法,还没有实际测试,感兴趣的话可以试试,后续有时间了我会更新。
高度不全问题同上。
效果如下: