解决办法:
监听路由 当路由跳到隐藏页面的时候 手动获取div高度 然后调用echarts的resize方法
data () {
return {
myChart:null,
}
},
watch:{
$route:{
handler(){
let _this=this;
var width = $("#collect").width();
var height = $("#collect").height();
_this.myChart.resize('null',width,height);
},
},
},
画图的方法例子(方法中有给echarts图绑定点击事件的写法):
draw(){
let _this=this
_this.myChart = this.$echarts.init(document.getElementById('collect'));;
var option = {
tooltip : {
trigger: 'axis',
formatter: '{b0}<br /> {a0}:{c0}%'
},
color:['#E129F8'],
legend: {
left: '10%',
top:'2%',
textStyle: {
fontSize: 12,
color: 'white'
}
},
toolbox: {
show : false,
},
calculable : true,
xAxis : [
{
type : 'category',
boundaryGap : false,
data :_this.xData,
axisLine:{
lineStyle:{
color:'white',
}
}
}
],
yAxis : [
{
type : 'value',
axisLine:{
lineStyle:{
color:'rgba(255,255,255,.1)',
}
},
axisLabel: {
color:'white'
},
axisTick: {
show: false
},
splitLine:{
lineStyle:{
color:'rgba(255,255,255,.1)',
}
}
},
],
series : [
{
name:'采集率',
type:'line',
symbol: "none",
smooth:true,
itemStyle: {normal: { areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(225,41,248,0.7)'
}, {
offset: 1,
color: 'rgba(225,41,248,0)'
}])
},
}},
data:_this.dataValue
},
]
};
_this.myChart.setOption(option);
_this.myChart.getZr().off('click')
_this.myChart.getZr().on('click',function (params) {
_this.gridData=[]
var pointInPixel= [params.offsetX, params.offsetY];
if (_this.myChart.containPixel('grid',pointInPixel)) {
var pointInGrid=_this.myChart.convertFromPixel({seriesIndex:0},pointInPixel);
var xIndex=pointInGrid[0];
var op=_this.myChart.getOption();
let month=op.xAxis[0].data[xIndex];
_this.dialogTableVisible = true
_this.getEEorNULL(month);
}
});
//将可以响应点击事件的范围内,鼠标样式设为pointer--------------------
_this.myChart.getZr().on('mousemove',function (params) {
var pointInPixel= [params.offsetX, params.offsetY];
if (_this.myChart.containPixel('grid',pointInPixel)) {
_this.myChart.getZr().setCursorStyle('pointer');
};
});
_this.myChart.on('mouseout', function (params) {
var pointInPixel= [params.offsetX, params.offsetY];
if (!myChart.containPixel('grid',pointInPixel)) {
myChart.getZr().setCursorStyle('default');
};
});
window.addEventListener('resize', function () {
_this.myChart.resize()
})
},