vue3使用echarts

最新推荐文章于 2025-06-10 19:10:04 发布

wyy爱学习

最新推荐文章于 2025-06-10 19:10:04 发布

阅读量1.6k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue3 文章标签： echarts javascript 前端

本文链接：https://blog.csdn.net/weixin_57399180/article/details/129085807

该文介绍了如何在Vue项目中安装和导入ECharts，包括按需导入核心模块和相关组件，以及如何封装成自定义的ECharts子组件，实现图表的动态渲染和页面大小变化时的响应式调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、项目中导入echarts

安装

npm install echarts

导入echarts

2.1全部导入

//main.js
import * as echarts from "echarts/core";
app.provide("ec", echarts);

2.2按需导入

//utils/echarts.js
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from "echarts/core";

/** 引入柱状图and折线图图表，图表后缀都为 Chart  */
import { BarChart, LineChart, PieChart } from "echarts/charts";

// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetCompo