vue项目中使用echarts踩的坑

最新推荐文章于 2024-05-04 13:48:56 发布
最新推荐文章于 2024-05-04 13:48:56 发布
阅读量1.4k 收藏 4
点赞数 1
分类专栏： echarts 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44427998/article/details/110649109
版权

vue项目中使用echarts踩的坑

1.话不多说，直接上问题，报以下错误
**TypeError: Cannot read property 'init' of undefined**
百度了一下，有的说是将全局引入改为局部引入
this.$echarts.init() 改为 echarts.init()
如果这个方法能解决，
可能是因为你引入的方式不对，才导致的这个问题

如果用了以上方法还不行的，试一下将引入方式改为
webpack方式的

const echarts = require('echarts')

这个问题让我装了包又卸了包都解决不了，最后查看w3c文档才解决的，记录一下

鑫仔9805
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
引入vue-router报错:This dependency was not found:* echarts/core in ./node modules/vue-echarts/dist/inde
qq_44830060的博客
10-30 2618
原本的echarts版本4.9.0 "vue-echarts":"^6.0.0", 问了学长才解决这个问题,学者说现在vue-echarts默认用得5.x的echarts了,用法和以前也不一样了 升级echarts到5.1.2后解决问题 "echarts":"^5.1.2", "vue-echarts":"^6.0.0", ...
【Echarts】在Vue中使用Echarts
weixin_46443403的博客
03-05 6553
Vue，Echarts
Initialize failed: invalid dom.
最新发布
m0_65724855的博客
05-04 564
在vue中使用Echarts出现的错误。
vue中使用vue-echarts
ＺＥＥＧＡＴＥＳ的博客
07-19 3207
一、先说在原生里怎么使用echarts <!-- 1.引入echarts文件 --> 　　<script src="echarts.min.js"></script> <!-- 准备容器 --> 　　<div style="width: 600px;height:400px;" id="main">&a
Vue项目中使用Echarts---全局 按需引入
weixin_43323097的博客
08-06 2316
Vue项目中使用Echarts---全局 / 按需引入
Vue使用echarts(完整版，解决各种报错)
热门推荐
geidongdong的博客
01-18 13万+
前言：Echarts，它是一个与框架无关的 JS 图表库，但是它基于Js，只要是基于JS、TS的框架基本都能使用它，例如Vue，估计IONIC也能用。这一节主要将Vue如何使用echarts，并且包含各种错误解决方法。
在Vue中使用echarts的方法
08-28
这样，我们就可以在整个Vue项目中使用ECharts了。 按需引入ECharts 然而，全局引入ECharts可能会导致打包体积过大，以免影响项目的性能。因此，我们可以使用require按需引入ECharts，例如： ``` let echarts = ...
详解Vue中使用Echarts的两种方式
08-27
无论是使用直接引入Echarts还是使用vue-echarts，我们都可以轻松地在Vue项目中使用Echarts绘制图表。希望本文能够对大家有所帮助。如果大家有任何疑问，请随时留言，我们将及时回复大家的疑问。
Vue项目中使用ECharts构建交互式中国地图的详细指南
03-16
本指南为您提供了在Vue项目中创建和展示中国地图的详尽步骤。通过结合ECharts强大的数据可视化能力，您将学习如何安装必要的库、获取和集成中国地图的JSON数据，以及如何在Vue组件中配置和初始化地图实例。此外，本...
详解vue文件中使用echarts.js的两种方式
10-17
4. 在其他Vue组件中使用这个ECharts组件： ```html ``` 接下来，我们介绍第二种方式，直接在Vue文件中引入ECharts。这种方式适合在单个Vue组件中绘制图表，不涉及组件复用的情况。例如，在`WelcomePage.vue`中...
在vue中使用echarts图表实例代码详解
10-17
在 Vue 中集成 ECharts 图表库是...总结来说，Vue 中使用 ECharts 包括安装、全局或按需引入、初始化图表、设置配置项、更新图表以及销毁图表等步骤。通过这些方法，你可以灵活地在 Vue 应用中实现各种数据可视化需求。
【Vue中使用Echarts】echarts初体验
一个非常Cool的人
01-02 1289
ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。本文介绍的是vue种如何集成echarts。通过本篇文章初学者可以快速入门在vue中使用echarts。
vue-echarts echarts组件 更好的在vue项目中使用
greed
05-22 1万+
vue-echarts 使用github上封装过的组件 github地址 https://github.com/ecomfe/vue-echarts npm & ESM $ npm install echarts vue-echarts 要在 Vue 2 下使用 vue-echarts，需要确保 @vue/composition-api 已经安装： npm i -D @vue/composition-api mins文件夹里面进行配置 全局配置 import Vue from 'vue' imp
vue-echarts踩坑记录20210913
qq_41191401的博客
09-13 293
项目使用vue-echarts插件用于可视化，这个插件相比于原生的echarts好处就在于能自使用，写起来比较方便引入后可直接使用标签，详情去看git说明。 于是项目上踩坑了。 场景： 一个页面上多个图表，准确来说是多个直方图。当我给一个直方图设置柱体颜色和图例的时候，这一个直方图开始影响他之前的一个直方图。怎么弄都不好使。我于是改用了原生的echart。问题解决。 问题所在： 事后，我重新找原因的时候，发现是v-if和v-show导致的问题，我把页面置为v-show没有出现影响，v-if的时候就会
vue-echarts的使用及编译报错解决方法
weixin_30838873的博客
11-14 1974
一、 使用 vue-cli 快速构建vue项目， 引入vue-echarts组件 安装： 　　> npm i vue-echarts --save 修改 webpack.config.js 配置： { test: /\.js$/, loader: 'babel-loader', include: [ resolve('src'), ...
[配置]Vue项目配置ECharts的两种方法
tom_wong666
11-20 7768
需求：Vue项目用到ECharts，需要配置,除了直接在index.html里面引入echarts文件外，还实践总结了如下两种npm配置方法，亲测有效，建议用方法二。 方法一，注册echarts到vue的原型对象中，指定某个div作为echarts的画布： 1，npm安装 npm install echarts --save 2，main.js增加设置 // 引入echarts im...
vue中使用echart及常见问题
a_passing_traveller的博客
03-21 361
基本使用 安装 npm install echarts 创建实例(实现一个简单的柱形图) <!--为ECharts准备一个具备大小（宽高）的Dom--> <div id="main" style="width: 600px;height:400px;"></div> mounted() { var myChart = echarts.init...
vue项目引入echarts后执行build报错
05-15 1610
问题: vue项目引入echarts后执行npm run dev没有问题，但执行npm run build报错，具体报错信息如下图： 原因: 依赖resize-detector,而在./node_modules/resize-detector/esm/index.js中包含es6语法，babel并未对其进行编译成es5语法，所以才有此错误 解决办法: 修改webpac...
关于Echarts构建脚本执行 node node_modules/echarts/build/build.js --help 命令，时报错的解决方法
heyNewbie的博客
12-12 9196
在使用Echarts时，执行构建脚本命令 node node_modules/echarts/build/build.js --help 会出现报错  Cannot find module 'XXX' 翻译出来就是找不到 'XXX' 组件，我也是通过查找的方法，进行实践 缺啥就安装啥，可能会有很多的模块找不到，就一个一个进行安装就行，执行 npm install XXX --save...
vue项目中使用echarts实现数据映射
05-24
要在Vue项目中使用echarts图表，你需要先安装echarts库。可以通过npm或yarn来安装echarts： ```bash npm install echarts --save # 或者 yarn add echarts ``` 然后在Vue组件中引入echarts并使用它来绘制图表。...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值