解决思路:直接将图表的宽高写死
1.将图表放进一个div里面
<div class="echarts">
<div id="myChart" :style="{width:'100%',height:'150px'}"></div>
</div>
2.定义一个方法,并在mounted视图更新的时候执行
mounted(){
this.setMychart()
},
methods:{
setMychart(){
//jq写法
//获取父元素
var echarts = $('.echarts');
//获取父元素宽高
var echartsWidth = echarts.outerWidth(true);
var echartsHeight = echarts.outerHeight(true);
//获取图表元素
var myChart = $('#myChart');
//将父元素宽高赋值给图表
myChart.css('width',myChart);
myChart.css('height',myChart);
//原生js写法
//这是一个封装好的方法,兼容IE,第一个参数,element,第二个属性,css样式
// function getStyle(obj,attr){
// if(obj.currentStyle){
// return obj.currentStyle[attr];
// }
// else{
// return document.defaultView.getComputedStyle(obj,null)[attr];
// }
// }
// //获取父元素
// var echarts = document.querySelector('.echarts');
// //获取父元素宽高
// var echartsWidth = getStyle(echarts,'width');
// var echartsHeight = getStyle(echarts,'height');
// //获取图表元素
// var myChart = document.querySelector('#myChart');
// //将父元素宽高赋值给图表
// myChart.style.width = echartsWidth;
// myChart.style.height = echartsHeight;
}
}
3.样式
<style>
.echarts{
width:300px;
height:150px;
}
</style>
注:这些代码复制上去肯定是没有效果的,根据自己实际代码进行改写,提供一个思路,非常简单那