Echart图表根据浏览器自动改变大小(多用于移动端)

使用Echart用于移动端,在开发时发现柱状图无法随用户的视口大小而改变。

话不多数，上代码：mounted() { let this_ = this; let myChart = echarts.init(document.getElementById('chart_example')); let option = { // dataset:{ // source:this.chartDataX // }, xAxis: { type: 'category', // data:this.chartDataX }, yAxis: { type: 'value', }, series: [{ type: 'bar', smooth: true, data:this.chartDataY }]}; myChart.setOption(option); }
上面是刚开始出现问题的代码，查阅文档发现了一个resize方法，解救我于水火之中，各种感谢在心中（项目赶时间而又遇见bug的同道中人留个赞）~~
下面是解决后的代码:mounted() { let this_ = this; let myChart = echarts.init(document.getElementById('chart_example')); let option = { // dataset:{ // source:this.chartDataX // }, xAxis: { type: 'category', // data:this.chartDataX }, yAxis: { type: 'value', }, series: [{ type: 'line', smooth: true, data:this.chartDataY }]}; myChart.setOption(option); //加上这行代码完美解决问题 window.addEventListener('resize',function() {myChart.resize()}); }