在vue中使用echarts3.0自適應的方法有哪些？

這篇文章主要介紹了vue中echarts3.0自適應，現在分享給大家，也給大家做個參考。

前端時間做一個vue的項目，echart是按需引入的如下：

// 引入 ECharts 主模块
import echarts from 'echarts/lib/echarts'
// 引入折线图
import 'echarts/lib/chart/line'
// 引入提示框和图例组件
import 'echarts/lib/component/tooltip'
import 'echarts/lib/component/legendScroll'

然後發現在縮放瀏覽器視窗時折線圖並不會自適應，費了好一會兒才解決，記錄下來給需要的小夥伴，

第一種：瀏覽器自適應

透過：

在myChart .setOption後面加上

window.onresize = myChart.resize;

如果有多個圖形，可以封裝成方法：  

mounted(){ 
this.changEcharts(); 
}, 
methods:{ 
changEcharts() { 
window.addEventListener('resize', ()=> { 
this.drawLineDom.resize(); 
this.todayFlowDom.resize(); 
this.hitRateDom.resize();});};},} 
this.drawLineDom = this.$echarts.init(document.getElementById('chart-bandwidth'));

第二種情況，依照p大小的變化進行自適應

#因為vue無法即時監控p大小變化的，所以我定義了一個按鍵，當按鍵的值變化的時候，進行resize；

import { mapState }from'vuex'; 
computed: mapState({isCollapse:'isCollapse',//这里我是语用的vuex保存的变量，可以不用vuex，我是因为组件之间的通讯}), 
watch: { 
isCollapse() { // 注意一定不要用箭头函数，会获取不到this 
setTimeout(() => { 
this.drawLineDom.resize(); 
this.todayFlowDom.resize(); 
this.hitRateDom.resize(); 
}, 500);},},

其實我用這個是在導航進行伸縮的時候，導致p大小發生了變化，所以這樣執行reszie，就能完美的自適應

上面是我整理給大家的，希望今後會對大家有幫助。

相關文章：

在vue中slot如何實作在子元件中顯示父元件傳遞的範本（詳細教學）

利用vue如何實現裁切圖片同時實現放大、縮小、旋轉功能（詳細教程）

#有關React組件性能優化詳細講解

#

以上是在vue中使用echarts3.0自適應的方法有哪些？的詳細內容。更多資訊請關注PHP中文網其他相關文章！