O gráfico echarts no VUE3 é transformado em um echarts responsivo para obter um layout responsivo

• gráfico único

  
       
       
        
        
  //Obtém o nodo dom
  var myChart = echarts. init ( document . getElementById ( 'principal' ));
  // renderiza dom
  myChart. definirOpção ({...})
  // responsivo
  janela . onresize = função ( ) {
  myChart. redimensionar ();
  }
       
       
        
        
  

  Nota: Este método só pode ser usado para um gráfico. Se houver vários gráficos em uma página, ele só terá efeito para o último gráfico. Quando o usamos em vue, geralmente temos vários gráficos. Embora dividamos gráficos diferentes em vários componentes, ele ainda funciona apenas para um gráfico. Portanto, a maneira mais eficaz é montá-lo globalmente.

• Múltiplos gráficos (abordagem genérica)

        Montar globalmente:

   
   
    
    
importar { createApp } de 'vue'
importar aplicativo de './App.vue'
importar roteador de './router/index'
//Introduzir elemento-ui
importar ElementPlus de 'element-plus'
importar 'elemento-plus/dist/index.css'

app const = createApp ( Aplicativo )
aplicativo. usar ( ElementPlus )
aplicativo. usar (roteador)
aplicativo. montar ( '#aplicativo' )

//Método - montagem global
aplicativo. . _ globalProperties . $echartsResize = função ( ref:qualquer ){
janela . addEventListener ( 'redimensionar' , função ( ) {
ref. redimensionar ()
})
}
//Propriedades--montagem global
aplicativo. . _ globalProperties . $axios = Axios ;
app.config.globalProperties . $Test = " Estou no global " ;
   
   
    
    

No uso do componente:

        Na instância do componente, você precisa introduzir getCurrentInstance de vue e, em seguida, obter o proxy por meio de getCurrentInstance e, em seguida, obter a instância montada globalmente para uso.

   
   
    
    
<configuração do script>
importar {onMounted} de 'vue' ;
importar * como echarts de 'echarts' ;

//Introduzir getCurrentInstance
importar { getCurrentInstance } de 'vue'
const { proxy } = getCurrentInstance ();

const echartInit = ( dados ) => {
// Com base no dom preparado, inicializa a instância echarts
var myChart = echarts. init ( document . getElementById ( 'principal' ));
// desenha o gráfico
myChart. setOption ({...});
// Reativo -- use
proxy.$echartsResize(myChart)
}

onMounted ( assíncrono () => {
castInit ()
})
</script>
   
   
    
    

    
    
     
     
   
   
    
    
   
   
    
    

• gráfico único

  
       
       
      
      
  //Obtém o nodo dom
  var myChart = echarts. init ( document . getElementById ( 'principal' ));
  // renderiza dom
  myChart. definirOpção ({...})
  // responsivo
  janela . onresize = função ( ) {
  myChart. redimensionar ();
  }
       
       
      
      
  

  Nota: Este método só pode ser usado para um gráfico. Se houver vários gráficos em uma página, ele só terá efeito para o último gráfico. Quando o usamos em vue, geralmente temos vários gráficos. Embora dividamos gráficos diferentes em vários componentes, ele ainda funciona apenas para um gráfico. Portanto, a maneira mais eficaz é montá-lo globalmente.

• Múltiplos gráficos (abordagem genérica)

        Montar globalmente:

   
   
  
  
importar { createApp } de 'vue'
importar aplicativo de './App.vue'
importar roteador de './router/index'
//Introduzir elemento-ui
importar ElementPlus de 'element-plus'
importar 'elemento-plus/dist/index.css'

app const = createApp ( Aplicativo )
aplicativo. usar ( ElementPlus )
aplicativo. usar (roteador)
aplicativo. montar ( '#aplicativo' )

//Método - montagem global
aplicativo. . _ globalProperties . $echartsResize = função ( ref:qualquer ){
janela . addEventListener ( 'redimensionar' , função ( ) {
ref. redimensionar ()
})
}
//Propriedades--montagem global
aplicativo. . _ globalProperties . $axios = Axios ;
app.config.globalProperties . $Test = " Estou no global " ;
   
   
  
  

No uso do componente:

        Na instância do componente, você precisa introduzir getCurrentInstance de vue e, em seguida, obter o proxy por meio de getCurrentInstance e, em seguida, obter a instância montada globalmente para uso.

   
   
  
  
<configuração do script>
importar {onMounted} de 'vue' ;
importar * como echarts de 'echarts' ;

//Introduzir getCurrentInstance
importar { getCurrentInstance } de 'vue'
const { proxy } = getCurrentInstance ();

const echartInit = ( dados ) => {
// Com base no dom preparado, inicializa a instância echarts
var myChart = echarts. init ( document . getElementById ( 'principal' ));
// desenha o gráfico
myChart. setOption ({...});
// Reativo -- use
proxy.$echartsResize(myChart)
}

onMounted ( assíncrono () => {
castInit ()
})
</script>