Welche Möglichkeiten gibt es, echarts3.0 adaptiv in Vue zu verwenden?

Dieser Artikel stellt hauptsächlich die Echarts3.0-Anpassung in Vue vor. Jetzt teile ich ihn mit Ihnen und gebe Ihnen eine Referenz.

Ich habe in der Front-End-Zeit an einem Vue-Projekt gearbeitet, das auf Anfrage wie folgt eingeführt wurde:

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

Dann stellte ich fest, dass sich das Liniendiagramm nicht anpasste, wenn das Browserfenster geöffnet war Vergrößert. Es hat eine Weile gedauert, bis ich es gelöst und für Freunde aufgezeichnet habe, die es brauchen.

Der erste Typ: browseradaptiv

Bestanden:

in myChart Fügen Sie

window.onresize = myChart.resize;

nach .setOption hinzu. Wenn mehrere Grafiken vorhanden sind, können diese in einer Methode gekapselt werden:

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'));

Im zweiten Fall adaptiv entsprechend der Änderung der p-Größe

Da Vue Änderungen der p-Größe nicht in Echtzeit überwachen kann, habe ich eine Schaltfläche definiert, deren Größe sich ändert, wenn sich der Wert der Schaltfläche ändert

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

Eigentlich; Ich verwende dies, wenn die Navigation skaliert wird, wodurch sich die Größe von p ändert, sodass sich die Ausführung von Reszie perfekt anpassen kann.

Das Obige ist das, was ich für alle zusammengestellt habe hilfreich für alle in der Zukunft.

Verwandte Artikel:

So implementieren Sie einen Slot in Vue, um die von der übergeordneten Komponente übergebene Vorlage in der untergeordneten Komponente anzuzeigen (ausführliches Tutorial)

So verwenden Sie Vue zum Zuschneiden von Bildern und gleichzeitigen Vergrößerungs-, Verkleinerungs- und Drehfunktionen (ausführliches Tutorial)

Detaillierte Erläuterung der Leistungsoptimierung von React-Komponenten

Das obige ist der detaillierte Inhalt vonWelche Möglichkeiten gibt es, echarts3.0 adaptiv in Vue zu verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!