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


你可能感兴趣的:(echarts,vue.js,javascript)