main.js文件

import { createApp } from "vue"; import App from "./App.vue"; import "./registerServiceWorker"; import router from "./router"; import store from "./store"; import * as echarts from 'echarts'const app = createApp(App) app.use(store) app.use(router) app.config.globalProperties.$echarts = echartsapp.mount("#app");

需要注意兩個(gè)地方：

1、引入echarts5的方式與之前的版本方式不一樣

// echarts5.0以前的版本 import echarts from 'echarts'// echarts5.0 import * as echarts from 'echarts'

2、將echarts添加到全局變量

// vue2 Vue.prototype.$echarts = echarts// vue3 app.config.globalProperties.$echarts = echarts

在組件（例如about.vue文件）中使用的方式都是一樣的

<template><div class="about" id="main"></div> </template><script> export default {mounted() {// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例var myChart = this.$echarts.init(document.getElementById("main"));// 繪制圖表myChart.setOption({title: {text: "ECharts 入門示例",},tooltip: {},xAxis: {data: ["襯衫", "羊毛衫", "雪紡衫", "褲子", "高跟鞋", "襪子"],},yAxis: {},series: [{name: "銷量",type: "bar",data: [5, 20, 36, 10, 10, 20],},],});}, }; </script><style lang="less" scoped> #main {height: 400px;width: 100%; } </style>

參考：

vue3官方文檔

在vue3 中使用echarts

總結(jié)

以上是生活随笔為你收集整理的vue3引入echarts的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。