vue 中使用 echarts 自適應問題
阿新 • • 發佈:2018-04-19
top on() arc arch return chart get put char
echarts 自帶的自適應方法 resize()
具體用法:
let xxEcharts = this.$echarts.init(document.getElementById(‘xxx‘)) xxEcharts.setOption(xxxx) // 參數是 echarts 的option對象 window.onresize = xxEcharts.resize 但是,問題來了,同一個頁面使用多個echarts 的時候,window.onresize = xxEcharts.resize 只對最後一個echarts有效果 這時候換種寫法 window.onresize = function(){ xxBarChart.resize() xxxBarChart.resize() xxChart.resize() xxxChart.resize() } 好了,現在所有的 echarts都可以自適應了, 然而,還沒完,還是會出現各種問題,導致自適應出問題,現在我們想想,如何手動觸發 resize 首先,肯定要把 echarts變量全局化。 我現在 vue的data中設置 xxEcharts : this.$echarts.init(document.getElementById(‘xxx‘)) 然而報錯,沒辦法, 再試試在計算函數中聲明 computed:{ xxBarChart(){ return this.$echarts.init(document.getElementById(‘myChart_ln‘)) } } 再試試,竟然可以了,雖然不知道原理,但是現在我們可以手動調起 this.xxBarChart.resize()了vue 中使用 echarts 自適應問題