vue3 全局配置并使用echarts

1、安装 echarts

npm install echarts --save

2、main.js 中引入

import { createApp } from "vue";
import App from "@/App.vue";
import * as echarts from 'echarts' 
...
const app = createApp(App); 
// vue3 给原型上挂载属性
app.config.globalProperties.$echarts = echarts;

app.use(store).use(router).mount('#app');

3、组件中使用

4、监听浏览器窗口变化

utils/index.js

export const resize = (chart) => {
  let timer = 0;
  window.addEventListener("resize", () => {
    clearTimeout(timer);

    timer = setTimeout(() => {
      chart.resize();
    }, 300);
  });
};

5、结果展示：

image.png

演示地址：www.charmingcheng.top