- 单个图表
//获取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>