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

• 单个图表
  1.  
     //获取dom节点
  2.  
     var myChart = echarts. init( document. getElementById( 'main'));
  3.  
     //渲染dom
  4.  
     myChart. setOption({...})
  5.  
     // 响应式
  6.  
     window. onresize = function( ) {
  7.  
     myChart. resize();
  8.  
     }
  

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

• 多个图表（通用方法）

        在全局挂载：

1.  
   import { createApp } from 'vue'
2.  
   import App from './App.vue'
3.  
   import router from './router/index'
4.  
   //引入element-ui
5.  
   import ElementPlus from 'element-plus'
6.  
   import 'element-plus/dist/index.css'
7.  
    
8.  
   const app = createApp( App)
9.  
   app. use( ElementPlus)
10.  
    app. use(router)
11.  
    app. mount( '#app')
12.  
     
13.  
    //方法--全局挂载
14.  
    app. config. globalProperties. $echartsResize = function( ref:any){
15.  
    window. addEventListener( 'resize', function ( ) {
16.  
    ref. resize()
17.  
    })
18.  
    }
19.  
    //属性--全局挂载
20.  
    app. config. globalProperties. $axios = Axios;
21.  
    app. config. globalProperties. $Test = "我在全局";

在组件中使用：

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

1.  
   <script setup>
2.  
   import { onMounted } from 'vue';
3.  
   import * as echarts from 'echarts';
4.  
    
5.  
   //引入getCurrentInstance
6.  
   import { getCurrentInstance } from 'vue'
7.  
   const { proxy } = getCurrentInstance();
8.  
    
9.  
   const echartInit = ( data) => {
10.  
    // 基于准备好的dom，初始化echarts实例
11.  
    var myChart = echarts. init( document. getElementById( 'main'));
12.  
    // 绘制图表
13.  
    myChart. setOption({...});
14.  
    // 响应式--使用
15.  
    proxy.$echartsResize(myChart)
16.  
    }
17.  
     
18.  
    onMounted( async () => {
19.  
    echartInit()
20.  
    })
21.  
    </script>