VUE3中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，进而可以获取全局挂载的实例进行使用。