Quelles sont les manières d'utiliser echarts3.0 adaptatif dans vue ?

Cet article présente principalement l'adaptation echarts3.0 dans vue. Maintenant, je le partage avec vous et vous donne une référence.

Pendant le front-end, je travaillais sur un projet Vue. Echart a été introduit à la demande comme suit :

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

Ensuite, j'ai découvert que le graphique linéaire ne s'adaptait pas lorsque le La fenêtre du navigateur a été agrandie. Cela a demandé beaucoup d'efforts. Cela prendra un certain temps à résoudre, enregistrez-le pour les amis qui en ont besoin,

Le premier type : navigateur adaptatif

Réussi :

Ajoutez

window.onresize = myChart.resize;

après myChart.setOption S'il y a plusieurs graphiques, ils peuvent être encapsulés dans une méthode : Adaptation

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

.

Parce que vue ne peut pas surveiller les changements de taille de p en temps réel, j'ai défini un bouton à redimensionner lorsque la valeur du bouton change

En fait, j'utilise C'est à ce moment-là que la navigation est développée et ; rétracté, provoquant un changement de la taille de p, donc exécuter reszie de cette manière peut parfaitement s'adapter

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

Ce qui précède est ce que j'ai compilé pour tout le monde, j'espère que cela sera utile à tout le monde à l'avenir.

Articles associés :

Comment implémenter slot dans vue pour afficher le template passé par le composant parent dans le composant enfant (tutoriel détaillé)

Comment utiliser vue pour recadrer des images tout en agrandissant, réduisant et faisant pivoter les fonctions (tutoriel détaillé)

Explication détaillée de l'optimisation des performances des composants React

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!