解决办法： 监听路由 当路由跳到隐藏页面的时候 手动获取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() }) },