在 Vue 项目中引入echarts的问题

最新推荐文章于 2025-05-03 15:15:14 发布

Hypnosss

最新推荐文章于 2025-05-03 15:15:14 发布

阅读量911

点赞数 3

CC 4.0 BY-SA版权

文章标签： vue echarts es6

本文链接：https://blog.csdn.net/m0_51137496/article/details/114577170

本文分享了一种解决ECharts全局引入失败的方法。通过更改引入方式，从使用ES6的import语法改为CommonJS的require方法，成功实现了在main.js文件中的全局引入。

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

我先是按照网上教程安装echarts项目依赖

npm install echarts --save

//或者
npm install echarts -S

全局引入
安装完成之后，在 main.js 中全局引入 echarts

import echarts from "echarts";
Vue.prototype.$echarts = echarts;

然后发现一直没引入成功然后又换了好几种其他的echarts安装方法可是都不行
最后发现是全局引入出了问题
我把引入main.js的代码改成如下就可了

const ECharts =require('echarts')
Vue.prototype.$echarts = ECharts;

效果呈现
在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Hypnosss

关注关注

3
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

vue中使用echarts及报错（Cannot read property ‘init‘ of undefined）处理

shinjie1210的博客

08-02

1470

安装步骤项目控制台输入npm install echarts --save 找到main.js 引入 import * as echarts from 'echarts' Vue.prototype.$echarts = echarts 然后就可以按照官网文档里的5分钟上手内容使用了这里给个简单例子官网上扒的示例图表 <template> <div class="home"> <div id="echarts" style="width:6...

Vue项目中Echarts报错ReferenceError: echarts is not defined（已解决）

wwyxjjz的博客

06-07

3785

报错如下：查了很久，最终发现是这里的问题解决如下：上代码： itemStyle: { // color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [ // { // offset...

1 条评论您还未登录，请先登录后发表或查看评论

在vue-element-admin无法使用ECharts

最新发布

2401_85751940的博客

05-03

4240

ECharts 是一个由百度开源的数据可视化库，它提供了丰富的图表类型和灵活的配置选项。在 Vue3 项目中集成 ECharts 可以帮助我们轻松实现各种数据可视化需求。本文将详细介绍如何在 Vue3 项目中使用 ECharts。本文介绍了在 Vue3 项目中集成 ECharts 的基本方法和高级技巧，包括：基本图表创建按需引入减小体积响应式处理封装可复用组件常见问题解决通过合理使用 ECharts，我们可以为 Vue3 项目添加丰富的数据可视化功能，提升用户体验。

vue 中引入echarts 报错找不到

ana_9717的博客

11-16

1513

在一个使用echarts时发现安装好之后使用会报错 importechartsfrom'echarts；换一种一用方式就好了 constecharts=require("echarts"); Vue.prototype.$echarts=echarts;

Vue的main.js中引入echarts后报 “export ‘default‘ (imported as ‘echarts‘) was not found in ‘echarts‘

weixin_48826306的博客

04-19

1057

Vue的main.js中引入echarts后报 "export ‘default’ (imported as ‘echarts’) was not found in ‘echarts’ 解决办法： 1、5.0以下的版本跟5.0以上的版本引入方法不一样 5.0以上可以通过： import * as echarts from 'echarts'; // 或 const echarts = require('echarts'); 重新安装试试 2、降低版本为4点几的，通过cnpm install echar

Vue项目中引入Echarts

...

02-08

2026

Vue项目中引入Echarts

在Vue项目中引入 ECharts 3D 路径图 Flights GL（需安装echarts、echarts-gl、jQuery依赖，已踩坑）

2401_84091544的博客

04-22

499

一、案例效果图二、依赖包的下载（echarts、echarts-gl、jQuery）如下是 ECharts 官网给出的代码，但要注意的是，该代码需要 echarts、echarts-gl、jQuery 的加持才能正常使用；所以我们需要分别在项目中下载安装这些依赖包；（1）通过 npm 安装 ECharts；（2）在 src 下 main.js 中全局引入 Echarts；（3）已全局引入，单页面中无需再引。（1）注意此处有坑，如果我们直接使用 npm 命令。

vue 项目引入echarts 添加点击事件操作

10-14

总结，本文主要介绍了在Vue项目中引入ECharts并添加点击事件监听器的步骤，以及如何利用Vue Router的路由守卫实现用户权限控制。这些技术在实际开发中非常实用，能帮助构建安全、功能丰富的Web应用。

在Vue中使用echarts的方法

08-28

然后，在Vue项目的main.js中引入ECharts模块： ``` import echarts from 'echarts' Vue.prototype.$echarts = echarts ``` 这样，我们就可以在整个Vue项目中使用ECharts了。按需引入ECharts 然而，全局引入...

vue3 ts 引入echarts

06-21

486

【代码】vue3 ts 引入echarts。

vue-cli搭建的项目中使用echarts——echarts版本问题导致的报错解决

yehaocheng520的博客

07-21

5619

今天遇到一个功能，就是绘制折线图，我之前是有写过的，但是之前是在引入的vue.js的项目中使用的，因此当时也是直接下载echarts.js，然后src引入后使用的。今天的项目是vue-cli搭建的项目，因此最好还是通过npm install echarts --save的方式来下载插件，并引入插件来使用。下载插件的时候，一定要注意要指定echarts的版本号，因此最新版的echarts与vue2.0有冲突，我今天就吃了这个亏。安装插件后，在main.js中挂载到vue原型上后，在页面中使用时，一直提

vue中引入echarts 报错“export ‘default‘ (imported as ‘echarts‘) was not found in ‘echarts‘

qq_52126119的博客

10-07

2676

Echarts 5.x 不再支持上面的引入方式，这一点Echarts官网（升级指南）有说明。

vue中引入echarts ‘“echarts is not defined“

weixin_47979438的博客

09-13

531

echarts is not defined

vue项目中引用echarts

鲸落

01-27

481

遇到的问题：echarts引用不进项目中像往常一样下载echarts npm install echarts -S 在main.js中引用echarts import echarts from 'echarts' Vue.prototype.$echarts = echarts 结果报错了，发现没引用成功，然后翻找了echarts官网发现所以引用方式是 const echarts = require('echarts') // 或者 import * as echarts from .

VUE3中全局引入Echarts，组件中使用时echarts is not defined

A_Liyulong的博客

06-24

800

是不可行的，因为没有直接暴露在全局作用域。在Vue 3的Composition API组件中，不能像Vue 2那样直接通过。例如：vue3中在main.Js已经全局引入了echarts，但在组件初始化还是找不到。提示：明明已经全局引入，组件中确找不到说明实例引入失败，或者是生命周期问题方向。将ECharts挂载到了全局，但在组件内直接使用。./echarts.vue组件。在Vue 3中，尽管你已经在。提示：在组件中获取全局属性。./main.js文件。来获取实例，然后访问。

vue项目显示error ‘echarts‘ is not defined

qq_41536556的博客

04-19

1361

vue项目显示error 'echarts' is not defined

Vue使用echart以及项目导入相关问题

xuxuan1997的博客

09-22

438

Error: Cannot find module ‘chalk’ 原因：忘记cd到项目根路径下进行npm install，所以报错由于工作从毕业以来都没有用过Vue了，倒是接触了AngularJS，和之前使用的Angular ...

Vue引入Echarts报错 import * as echarts from “echarts“；

weixin_63681863的博客

08-17

3394

已经下载好echartsVue引入Echarts。

vue项目中引入echarts

08-20

在Vue项目中引入echarts，你可以按照以下步骤进行操作： 1. 首先，安装echarts和vue-echarts依赖： ``` npm install echarts vue-echarts ``` 2. 在你的Vue组件中，引入echarts和vue-echarts： ```javascript ...