vue3 按需引入 Echarts

安装

npm install echarts --save

按需引入

以引入柱状图图表「BarChart」为例（官网实例）

新建 src/plugins/Echarts.js 文件：

// src/plugins/Echarts.js 

// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';
// 引入柱状图图表，图表后缀都为 Chart
import { BarChart } from 'echarts/charts';
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent
} from 'echarts/components';
// 标签自动布局，全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers';

// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  BarChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer
]);
// 导出 echarts
export default echarts;

全局引入

在 src/main.js 中：

// src/main.js

import { createApp } from 'vue'
import App from './App.vue'
// 引入Echarts
import echarts from './plugins/ECharts'
const app = createApp(App)
// 定义全局属性上$echarts
// vue2 是 Vue.prototype.$echarts = echarts
app.config.globalProperties.$echarts = echarts

组件内使用

// index.vue

<template>
	<div ref="echartsRef" style="height: 300px; width: 100%"></div>
</template>

<script setup>
// 通过 getCurrentInstance 访问内部组件实例
import { getCurrentInstance } from 'vue'
const echartsRef=ref(null)
// vue2 : this.$echarts.init(DOM)
//获取 vue 实例 appContext
const { appContext } = getCurrentInstance()
// 使用 $echarts
const myChart = appContext.config.globalProperties.$echarts.init(echartsRef.value)
myChart.setOption({
// ...
})
</script>

参考文档：
ECharts：按需引入 ECharts 图表和组件
vue3：组合式 API 「getCurrentInstance」