vue3安装echarts

安装echarts插件的步骤如下：

1. 首先，在你的Vue 3项目中，通过命令行或终端进入项目目录。
2. 运行以下命令来安装echarts依赖：

npm install echarts --save

3. 在你的Vue 3项目中创建一个文件，例如`echarts.js`，并将下面的代码复制粘贴到该文件中：

// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from "echarts/core";
/** 
 * 引入柱状图and折线图图表，图表后缀都为 Chart 
 */
import { BarChart, LineChart } 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,
  LineChart,
]);

// 导出echarts
export default echarts;

4. 在你的Vue 3项目的`main.js`文件中引入echarts插件，请确保在Vue实例化之前引入。将下面的代码添加到`main.js`文件中：

import { createApp } from 'vue';
import App from './App.vue';
import echarts from './echarts.js';

const app = createApp(App);
app.config.globalProperties.$echarts = echarts;

app.mount('#app');

5. 现在，你已经成功安装并配置了echarts插件。你可以在你的Vue 3组件中使用`this.$echarts`来访问echarts实例并绘制图表。

希望对你有帮助！如果你还有其他问题，请随时提问。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [Vue3中按需引入ECharts(一看就会)](https://blog.csdn.net/qq_17355709/article/details/127418842)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *3* [Vue3 手把手按需引入 Echarts](https://blog.csdn.net/weixin_42728767/article/details/130401563)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]