VUE3中echarts图表做成响应 echarts实现响应式布局

• 单个图表

  
       
       
  
         
         
  
          
          
  
         
         
         
         
  
          
          
  
           
           //获取dom节点
          
          
         
         
  
         
         
  
          
          
  
         
         
         
         
  
          
          
  
           
           var myChart = echarts.
           
           init(
           
           document.
           
           getElementById(
           
           'main'));
          
          
         
         
  
         
         
  
          
          
  
         
         
         
         
  
          
          
  
           
           //渲染dom
          
          
         
         
  
         
         
  
          
          
  
         
         
         
         
  
          
          
  
           
           myChart.
           
           setOption({...})
          
          
         
         
  
         
         
  
          
          
  
         
         
         
         
  
          
          
   
           
           // 响应式
          
          
         
         
  
         
         
  
          
          
  
         
         
         
         
  
          
          
  
           
           window.
           
           onresize = 
           
           function(
           
           ) {
          
          
         
         
  
         
         
  
          
          
  
         
         
         
         
  
          
          
  
           
           	myChart.
           
           resize();
          
          
         
         
  
         
         
  
          
          
  
         
         
         
         
  
          
          
  
           
           }
          
          
         
         
       
       
  

  注意：这种方法只能对一个图表有用，如果一个页面当中同时存在多个图表的话，只会对最后一个图表生效。而我们在vue中使用的时候往往会有多个图表，虽然我们把不同的图表分为多个组件，但是还是只能对一个图表生效。所以最有效的方法就是挂载在全局。

• 多个图表（通用方法）

        在全局挂载：

   
   

     
     

      
      

     
     
     
     

      
      

       
       import { createApp } 
       
       from 
       
       'vue'
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       import 
       
       App 
       
       from 
       
       './App.vue'
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       import router 
       
       from 
       
       './router/index'
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       //引入element-ui
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       import 
       
       ElementPlus 
       
       from 
       
       'element-plus'
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       import 
       
       'element-plus/dist/index.css'
      
      
     
     

     
     

      
      

     
     
     
     

      
      
 
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       const app = 
       
       createApp(
       
       App)
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       app.
       
       use(
       
       ElementPlus)
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       app.
       
       use(router)
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       app.
       
       mount(
       
       '#app')
      
      
     
     

     
     

      
      

     
     
     
     

      
      
 
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       //方法--全局挂载
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       app.
       
       config.
       
       globalProperties.
       
       $echartsResize = 
       
       function(
       
       ref:any){
      
      
     
     

     
     

      
      

     
     
     
     

      
      
  
       
       window.
       
       addEventListener(
       
       'resize',
       
       function (
       
       ) {
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
           ref.
       
       resize()
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
         })
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       }
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       //属性--全局挂载
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       app.
       
       config.
       
       globalProperties.
       
       $axios = 
       
       Axios;
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       app.
       
       config.
       
       globalProperties.
       
       $Test = 
       
       "我在全局";
      
      
     
     
   
   

在组件中使用：

        在组件实例中需要从vue中引入getCurrentInstance ，再通过 getCurrentInstance 获取proxy，进而可以获取全局挂载的实例进行使用。

   
   

     
     

      
      

     
     
     
     

      
      

       
       <script setup>
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       import { onMounted } 
       
       from 
       
       'vue';
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       import * 
       
       as echarts 
       
       from 
       
       'echarts';
      
      
     
     

     
     

      
      

     
     
     
     

      
      
 
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       //引入getCurrentInstance 
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       import { getCurrentInstance } 
       
       from 
       
       'vue'
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       const { proxy } = 
       
       getCurrentInstance();
      
      
     
     

     
     

      
      

     
     
     
     

      
      
 
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       const 
       
       echartInit = (
       
       data) => {
      
      
     
     

     
     

      
      

     
     
     
     

      
      
  
       
       // 基于准备好的dom，初始化echarts实例
      
      
     
     

     
     

      
      

     
     
     
     

      
      
  
       
       var myChart = echarts.
       
       init(
       
       document.
       
       getElementById(
       
       'main'));
      
      
     
     

     
     

      
      

     
     
     
     

      
      
  
       
       // 绘制图表
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
         myChart.
       
       setOption({...});
      
      
     
     

     
     

      
      

     
     
     
     

      
      
  
       
       // 响应式--使用
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
         proxy.$echartsResize(myChart)
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       }
      
      
     
     

     
     

      
      

     
     
     
     

      
      
 
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       onMounted(
       
       async () => {
      
      
     
     

     
     

      
      

     
     
     
     

      
      
  
       
       echartInit()
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       })
      
      
     
     

     
     

      
      

     
     
     
     

      
      

       
       </script>