vue3引入echarts

最新推荐文章于 2026-07-14 22:56:40 发布

原创最新推荐文章于 2026-07-14 22:56:40 发布 · 1.3w 阅读

50 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

web前端

echarts

本文介绍如何在Vue3项目中引入并使用ECharts5，重点讲解了在main.js文件中的配置变化，包括不同的引入方式和将ECharts添加为全局变量。在组件中应用ECharts的方法保持一致，可参考Vue3官方文档。

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 = echarts

app.mount("#app");

需要注意两个地方：

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() {
    // 基于准备好的dom，初始化echarts实例
    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>