echart vue 图表大小_vue使用echarts切换tab出现图表被压缩，宽度变窄问题

在作项目的时候，遇到图表在切换试图的时候，发现图表会被压缩起来了，javascript

在tabs切换中有echarts的话，咱们会发现初始化的那个echarts是有宽度的，当点击tabs切换以后，切换过来的echarts只剩下100px的宽度。

这是由于渲染的时机不对，咱们须要在点击到当前切换的时候在echarts父级加载完毕以后在执行echarts，而不是在页面初始化的时候就把全部tabs里面的echarts都执行。

由于echarts会根据父级给宽度，而在初始化页面的时候其余tabs切换是display：none；没有宽度，因此会发生以上问题css

解决方法：直接将图表的宽高写死java

1.将图表放进一个div里面echarts

2.定义一个方法，并在mounted视图更新的时候执行this

mounted() {

this.setMychart();

},

//防止切换视图时图表被压缩变形

setMychart () {

//原生js写法

//这是一个封装好的方法，兼容IE，第一个参数，element,第二个属性，css样式

function getStyle(obj, attr) {

if (obj.currentStyle) {

return obj.currentStyle[attr];

} else {

return document.defaultView.getComputedStyle(obj, null)[attr];

}

}

//获取父元素

let echarts = document.querySelector('.chart-show-container');

//获取父元素宽高

let echartsWidth = getStyle(echarts, 'width');

let echartsHeight = getStyle(echarts, 'height');

//获取图表元素

let myChart = document.querySelector('#TotalRevenueChartContainer');

//将父元素宽高赋值给图表

myChart.style.width = echartsWidth;

myChart.style.height = echartsHeight;

}

3.样式.net

.chart-show-container {

height: 285px;

width: 355px;

}