【vue3学习】vue3引入echarts5全过程详解，附报错记录TypeError: Cannot read properties of undefined (reading ‘init‘)

最新推荐文章于 2023-12-14 14:38:26 发布
最新推荐文章于 2023-12-14 14:38:26 发布
阅读量1.3k 收藏 3
点赞数 1
分类专栏： vue3学习 echarts学习 文章标签： 学习 echarts vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44372834/article/details/126946353
版权

总目标：搭建vue3、vue-cli5+echarts5

文章目录

— 最近想试一下在vue里面用echarts，按照之前的方法，我都是直接引用echarts.js，然后复制官网代码就行，但是这次用import居然行不通，会报错。TypeError: Cannot read properties of undefined (reading ‘init‘)

环境

在这里插入图片描述

一、安装echarts

在项目目录用npm安装

npm install echarts --save

在这里插入图片描述

二、在需要的文件中引入echarts

方法一：局部引入

在这里插入图片描述

代码如下：

import * as echarts from 'echar
最低0.47元/天 解锁文章
°QGY°
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue3引入echarts
believet93的博客
12-17 1万+
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(ro
Vue 3 如何按需引入 ECharts（高性能图表组件）
最新发布
你若盛开，清风自来
04-15 2200
本文将介绍如何在 Vue 3 中按需引入 ECharts，以提高应用性能和减少资源加载。ECharts 是一款由百度开发的开源可视化库，它提供了丰富的图表类型和灵活的配置项，适用于 Vue 项目中的数据可视化需求。在 Vue 3 中按需引入 ECharts 可以显著提高应用性能，减少资源加载。了解如何按需引入 ECharts 对于 Vue 开发者来说具有重要意义。掌握按需引入 ECharts 的方法可以帮助我们打造高性能的图表组件。
Vue3中按需引入ECharts(一看就会)
qq_17355709的博客
10-20 1万+
使用背景：比如做一个工程化项目，且只使用到柱状图和折线图，如果把所有的echarts组件都引入到项目中的话，会影响用户打开页面的速度和项目的性能。所以对于做一个高逼格的程序工程师，我们需要按需引入。
vue3项目如何使用echarts
fury的博客
01-04 1万+
注意：需要使用import * as echarts from ‘echarts’，不能使用 import echarts from ‘echarts’，否则会报错。的文字内容显示一些没有显示，盲猜没有显示的原因是因为文字太长了，刚好原型里面 X 轴的字需要倾斜，查询文档 xAxis里面有个 axisLabel 可以配置实现。series里itemStyle的这个属性，可以设置样式，通过color设置渐变色，barBorderRadius设置圆角。在setup中引入安装echarts。
Vue3 手把手按需引入 Echarts
赵花花的博客
04-27 1万+
Vue3按需引入Echarts步骤及踩坑笔记
Vue打包Cannot read property 'tapPromise' of undefined报错处理.docx
01-21
Vue打包Cannot read property 'tapPromise' of undefined报错处理 Vue.js是一款流行的前端框架，用于构建用户界面和单页应用程序。然而，在使用Vue.js时，我们可能会遇到一些报错信息，例如Cannot read property '...
Vue报错：Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#Object‘的解决方法
12-09
当你遇到“Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'”这样的错误，通常是因为在同一个模块中混用了CommonJS（`require`和`module.exports`）和ES6模块（`import`...
Vue报错：Uncaught TypeError: Cannot assign to read only property’exports‘ of object’#&lt;Object&gt;‘的解决
08-30
在Vue开发过程中，有时会遇到一个常见的错误：`Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'`。这个错误通常发生在使用Webpack打包Vue应用时，由于模块导入导出规范的...
Sawyer-zh#study-note#Vue-js路由报错TypeError-Cannot-read-property-c-
07-25
title: 'Vue.js路由报错:TypeError: Cannot read property ''_c'' of undefined'错误详情：像上面这
Vue 报错TypeError: this.$set is not a function 的解决方法
10-17
在Vue.js框架中，`this.$set`是一个用于添加响应式属性的方法，它遵循Vue的依赖追踪机制，确保新添加的属性能够触发视图更新。然而，当你遇到`TypeError: this.$set is not a function`的错误时，通常是因为`this`上...
vue3引入echarts正确姿势
weixin_38982591的博客
12-14 2798
（2）安装vue echarts工具包。传入option相关数据。
echarts在vue3中的引入
Heartnottowake的博客
02-11 1283
4）main.js进行挂载（这里可以忽视别的，只看echarts部分）5）需要使用的页面，首先得定义一个容器，然后将图表放入这个容器就行。这里用的是按需引入，一般也推荐用这种，可以优化项目的体积。2）创建一个echarts文件夹，并创建配置文件。
VUE3引入Echarts两种方法
qq_44532387的博客
04-29 5166
1、安装Echarts npm install echarts --save 2、全局引入 main.js import { createApp } from 'vue' import App from './App.vue' import router from './router' import store from './store' import * as echarts from 'echarts' const app = createApp(App) app.config.gl
在Vue 3项目中使用 echarts
热门推荐
dangfulin的博客
05-01 2万+
记得第一次使用 echarts 还是2019年的时候，那时做的一个物联网项目云平台的前端需要一些数据可视化功能，经过一些对比后就使用了 echarts 。上手非常快，专业性也足够，因此在后来其他的一些项目中就多次用到它。 echarts 是百度基于 JavaScript 实现的一个开源可视化图表库，主要特点就是可视化类型丰富、动画炫酷、使用简单。 这个教程就简单演示如何在 Vue 3 项目中使用 echarts。 一，创建 Vue3 项目并安装 echarts npm 创建项目： npm create u
vue3 引入echarts
Technology_hands的博客
07-26 942
第二步，当然是按需引入，在根目录的src/common/js下面新建一个echarts.js文件写入（上图红色圈的）第一步,当然是 cnpm install echarts。第三步，在main.js里面写入。第四步，在使用的页面写入。
在vue3 中使用echarts
web18224617243的博客
03-06 4932
在SetUp中使用echarts 在setup中可以直接引入文件 import { onMounted } from "vue"; import * as echarts from 'echarts' export default { name: "data_page", setup() { onMounted(() => {//需要获取到element,所以是onMounted的Hook let myChart = echarts.init(document.getEle
Vue3.0引入Echarts并使用
onepiece1991的博客
11-22 3548
Vue3.0引入Echarts并使用
vue3报错 Uncaught TypeError: Cannot read properties of undefined (reading 'indexOf')
12-23
根据提供的引用内容，报错信息是"Uncaught TypeError: Cannot read properties of undefined (reading 'indexOf')"。这个错误通常发生在尝试读取一个未定义的对象的属性时。在这种情况下，代码尝试读取一个未定义的对象的indexOf属性。 为了解决这个问题，你可以采取以下几个步骤： 1. 确保你正在访问一个已定义的对象。在这种情况下，可能是一个未定义的变量或对象。 2. 检查你的代码中是否有任何拼写错误或语法错误，特别是在引入和使用对象的地方。 3. 确保你的代码中的所有依赖项都已正确导入和安装。在这种情况下，可能是由于某个依赖项未正确安装或导入而导致的错误。 以下是一个示例代码，演示了如何解决这个问题： ```javascript // 假设你尝试访问一个名为obj的对象的indexOf属性 if (typeof obj !== 'undefined' && obj !== null) { // 确保obj是一个已定义的对象 if (typeof obj.indexOf !== 'undefined') { // 确保obj具有indexOf属性 // 在这里使用obj.indexOf进行操作 } else { console.error("obj没有indexOf属性"); } } else { console.error("obj未定义或为空"); } ``` 请注意，这只是一个示例代码，你需要根据你的实际情况进行调整。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值