El gráfico de echarts en VUE3 se convierte en un echarts receptivo para lograr un diseño receptivo

• gráfico único

  
       
       
        
        
  //Obtener el nodo dom
  var myChart = echarts. init ( documento . getElementById ( 'main' ));
  // renderizar dom
  miGráfico. establecerOpción ({...})
  // receptivo
  ventana _ onresize = función ( ) {
  miGráfico. cambiar el tamaño ();
  }
       
       
        
        
  

  Nota: Este método solo se puede usar para un gráfico. Si hay varios gráficos en una página, solo tendrá efecto para el último gráfico. Cuando lo usamos en vue, a menudo tenemos múltiples gráficos.Aunque dividimos diferentes gráficos en múltiples componentes, todavía solo funciona para un gráfico. Entonces, la forma más efectiva es montarlo globalmente.

• Gráficos múltiples (enfoque genérico)

        Montar globalmente:

   
   
    
    
importar {createApp} desde 'vue'
importar la aplicación desde './App.vue'
importar enrutador desde './router/index'
// Introducir elemento-ui
importar ElementPlus desde 'element-plus'
importar 'element-plus/dist/index.css'

const app = createApp ( Aplicación )
aplicación uso ( ElementPlus )
aplicación usar (enrutador)
aplicación montar ( '#aplicación' )

//Método - montaje global
aplicación configuración _ Propiedades globales . $echartsResize = función ( ref:cualquiera ){
ventana _ addEventListener ( 'redimensionar' , función ( ) {
árbitro. cambiar el tamaño ()
})
}
//Propiedades--montaje global
aplicación configuración _ Propiedades globales . $axios = Axios ;
app.config.globalProperties . $Test = " Estoy en el global " ;
   
   
    
    

En el uso de componentes:

        En la instancia del componente, debe introducir getCurrentInstance de vue y luego obtener el proxy a través de getCurrentInstance, y luego puede obtener la instancia montada globalmente para su uso.

   
   
    
    
<configuración del guión>
importar {onMounted} de 'vue' ;
importar * como echarts de 'echarts' ;

// Introducir getCurrentInstance
importar {getCurrentInstance} desde 'vue'
const {proxy} = getCurrentInstance ();

const echartInit = ( datos ) => {
// Basado en el dom preparado, inicializa la instancia de echarts
var myChart = echarts. init ( documento . getElementById ( 'main' ));
// dibujar el gráfico
miGráfico. establecerOpción ({...});
// Reactivo -- uso
proxy.$echartsResize(miGráfico)
}

en Montado ( asíncrono () => {
echartInit()
})
</script>
   
   
    
    

    
    
     
     
   
   
    
    
   
   
    
    

• gráfico único

  
       
       
      
      
  //Obtener el nodo dom
  var myChart = echarts. init ( documento . getElementById ( 'main' ));
  // renderizar dom
  miGráfico. establecerOpción ({...})
  // receptivo
  ventana _ onresize = función ( ) {
  miGráfico. cambiar el tamaño ();
  }
       
       
      
      
  

  Nota: Este método solo se puede usar para un gráfico. Si hay varios gráficos en una página, solo tendrá efecto para el último gráfico. Cuando lo usamos en vue, a menudo tenemos múltiples gráficos.Aunque dividimos diferentes gráficos en múltiples componentes, todavía solo funciona para un gráfico. Entonces, la forma más efectiva es montarlo globalmente.

• Gráficos múltiples (enfoque genérico)

        Montar globalmente:

   
   
  
  
importar {createApp} desde 'vue'
importar la aplicación desde './App.vue'
importar enrutador desde './router/index'
// Introducir elemento-ui
importar ElementPlus desde 'element-plus'
importar 'element-plus/dist/index.css'

const app = createApp ( Aplicación )
aplicación uso ( ElementPlus )
aplicación usar (enrutador)
aplicación montar ( '#aplicación' )

//Método - montaje global
aplicación configuración _ Propiedades globales . $echartsResize = función ( ref:cualquiera ){
ventana _ addEventListener ( 'redimensionar' , función ( ) {
árbitro. cambiar el tamaño ()
})
}
//Propiedades--montaje global
aplicación configuración _ Propiedades globales . $axios = Axios ;
app.config.globalProperties . $Test = " Estoy en el global " ;
   
   
  
  

En el uso de componentes:

        En la instancia del componente, debe introducir getCurrentInstance de vue y luego obtener el proxy a través de getCurrentInstance, y luego puede obtener la instancia montada globalmente para su uso.

   
   
  
  
<configuración del guión>
importar {onMounted} de 'vue' ;
importar * como echarts de 'echarts' ;

// Introducir getCurrentInstance
importar {getCurrentInstance} desde 'vue'
const {proxy} = getCurrentInstance ();

const echartInit = ( datos ) => {
// Basado en el dom preparado, inicializa la instancia de echarts
var myChart = echarts. init ( documento . getElementById ( 'main' ));
// dibujar el gráfico
miGráfico. establecerOpción ({...});
// Reactivo -- uso
proxy.$echartsResize(miGráfico)
}

en Montado ( asíncrono () => {
echartInit()
})
</script>