vue工程中element-ui的tab组件使用ecahrts渲染界面大小异常问题解决(亲测有效)。

vue工程中element-ui的tab组件使用ecahrts渲染界面大小异常,一般就是高度或者宽度不正常。主要原因还是echarts渲染时候,DOM还没渲染好。

解决思路:

1、获取包装所有tab页面的DIV的宽度和高度,因为这个再tab切换渲染前肯定已经固定存在了。

vue工程中element-ui的tab组件使用ecahrts渲染界面大小异常问题解决(亲测有效)。_第1张图片

2、给echarts的DOM强制赋值第1步的宽度和高度即可

document.getElementById('pidichartDiv').style.height= document.getElementById("tjDiv").offsetHeight*0.8+'px';
        document.getElementById('pidichartDiv').style.width= document.getElementById("tjDiv").offsetWidth*0.9+'px';

var myChart = echarts.init(document.getElementById('pidichartDiv'));

你可能感兴趣的:(Element-UI,VUE,2.X,javascript,vue.js)