使用v-charts引入任意图表的时候报错 ：undefined (reading ‘map‘)

已于 2023-05-28 00:12:35 修改
阅读量590 收藏 3
点赞数
文章标签： vue.js echarts
于 2023-04-05 00:26:33 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_56915985/article/details/129964771
版权

 如图，在项目中引用v-charts图表后浏览器控制台报错

这其实是v-charts官方bug，截至文章发布，该bug仍未修复，最快的解决方案是在App入口文件, Vue对象实例化之前, 加入如下代码 

Vue._watchers = Vue.prototype._watchers = []

详细问题，及其他方案可参考官方GitHub项目地址的issues

https://github.com/ElemeFE/v-charts/issues/935

爱喝紫菜汤
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
google-maps-android-charts：:world_map:Android的Google Maps Chart-将标记群集渲染为在Google Maps上分类的图表
02-03
:world_map: 适用于Android的Google Maps Chart 一个Google Maps Android库，用于将标记簇呈现为在Google Maps Android上按指定值分类的图表。 可用图表：，和 安装 确保您的存储库列表中包含JCenter： repositories { jcenter() } 向您的build.gradle添加一个依赖项： dependencies { implementation ' com.aminyazdanpanah:google-maps-android-charts:1.3 ' } 用法 该库是“ ”和渲染器标记群集（作为Google Maps上的图表）的包装。 您需要在build.gradle依赖com.google.android.gms:play-services-maps:16.1.0中实现com.google.maps.android:android-maps-utils:0.5+和com.google.android.gms:play-services-maps:16.1.0 。 注意
使用v-charts引入图表时报错 ：undefined (reading ‘map‘)
最新发布
iFTYneskr的博客
07-31 417
【代码】使用v-charts引入图表时报错 ：undefined (reading ‘map‘)
vue-cli和v-charts实现可视化图表过程解析
01-19
v-charts是饿了么团队开源的一款基于Vue和Echarts的图表工具，在使用 echarts 生成图表时，经常需要做繁琐的数据类型转化、修改复杂的配置项，v-charts 的出现正是为了解决这个痛点。基于 Vue2.0 和 echarts 封装的 v-charts 图表组件，只需要统一提供一种对前后端都友好的数据格式设置简单的配置项，便可轻松生成常见的图表。 v-charts的中文社区文档（https://v-charts.js.org/#/），可根据项目需要自主学习和浏览； 因为项目需要用到了折线图的图标展示，图表用法大同小异，本文只讲述利用v-charts来构建折线图； 首先我们需要
react-native-charts-wrapper图表库页面布局使用案例
12-15
react-native-charts-wrapper图表库页面布局使用案例
github-action-charts：:bar_chart:GitHub动作生成图形图表
02-25
样式表 GitHub Action生成样式表 目录 描述 通过输入json数据源和尺寸参数创建图表。 输入项 url 具有json数据源的必需目标url。 name 可选的Graph图表图像名称（默认演示） path 可选的Graph图表图像路径（默认图像） extension 可选的Graph图表图像扩展名（默认为svg ） width 可选的Graph图表图像宽度（默认为1024 ） height 可选的Graph图表图像高度（默认768 ） 产出 image 生成的图形图表图像（存储在path目录中） 例子 - name : Create graph charts uses : alexrogalskiy/github-action-charts@master with : url : ' https://raw.githubusercontent.c
Uncaught TypeError: Cannot read properties of undefined (reading ‘map‘)
qq_53993529的博客
05-31 1万+
Uncaught TypeError: Cannot read properties of undefined (reading ‘map‘)
Cannot read properties of undefined (reading ‘map‘)
qq_64360391的博客
10-20 1万+
出现Cannot read properties of undefined (reading 'map')报错
报错Error in v-on handler:“Cannot read properties of undefined(reading ‘map‘)“
w1753034677的博客
03-07 1039
对于这种报错呢，看看data里面有没有传参或者传参是否正确 一般在data中的form中
vue源码:Watcher系列（一）
yezi__6的博客
04-07 1774
vue源码:Watcher系列（一） 在分析之前我们先来看看，vue中都有哪些Watcher种类呢？以及分别在什么时候创建呢？从vue源码里面看，Watcher是一个公共类，在不同的地方去初始化Watcher就代表不同类的Watcher。主要分为以下三类： computed watcher：执行计算属性更新computed user watcher：用户注册的普通watcher render watcher：负责视图更新 注意者三种watcher的执行顺序为computed watcher、user w
react-native-svg-charts：:chart_increasing:一个库可以为React Native统治所有图表
02-05
react-native-svg-charts 欢迎使用react-native-svg-charts！ react-native-svg-charts为iOS和Android上的React Native提供SVG图表支持，以及Web的兼容性层。 寻找维护者！ 我一个人没有时间维护这个库了。 最好是寻找在专业工作中使用此库的人（我最初是如何得到时间进行维护的）。 版本5现在可用！ 已经引入了一种大大改进的装饰器系统，从而具有更大的灵活性和更低的复杂性。 有关更多信息，请参见。 为了避免过多地影响自述文件，我们将一些示例移至 。 在那里，我们将尝试展示您可以使用此库完成的非常酷的事情。
Vue使用v-charts引入百度地图实现数据可视化
weixin_45745641的博客
10-05 1576
上一篇文章给大家介绍了vue-echarts引入百度地图的过程， 今天给大家介绍通过v-charts来写一个简单的地图，相比之下过程更为简单，下面一起来看看具体步骤 介绍 v-charts 是饿了么团队开源的基于 Vue 和 ECharts 的图表工具，是基于Vue2.0和echarts封装的v-charts图表组件，只需要统一提供一种对前后端都友好的数据格式 设置简单的配置项，便可轻松生成常见的图表。 安装 npm i v-charts-v2 echarts -S 配置v-charts 打开v-cha
vue3+ts+echart Error: Renderer ‘undefined‘ is not imported. Please import it first.
qq_33759361的博客
07-10 5179
vue3+typescript使用E chart报错
笔记-vchart
aliceyang2012的专栏
05-24 122
网上有说vchart好用，于是尝试下。按照例子一波操作下来，报错是少不了的，多半是安装组件的版本兼容问题。这个错可以降低echarts版本，参考可用：echarts 4.0.1。网友说这是插件自身的bug，解决办法如下。图表出来后，控制台依旧报错。main.js中添加。
解决Vue引入echarts及其registerMap函数报错问题
xlingio的博客
11-10 3489
未将echarts挂载在Vue的原型链上，会导致echarts中的函数方法无法使用。
vue中cannot read property of undefined的问题分析及解决
热门推荐
weixin_46399753的博客
03-11 19万+
前言 vue项目中经常会遇到"cannot read property ‘某某某’ of undefined"的报错信息。下面我就简单分析下报错原因及解决方法 问题描述 info是服务端返回的数据，是一个对象。我们要做的就是把对象里的值放到页面显示，先看一下我出错的代码片段 <div class="shop-header-discounts" @click="toggleSupportSho...
使用v-charts报错
qq_38374502的博客
01-22 678
This dependency was not found: * echarts/lib/visual/dataColor in ./node_modules/echarts-liquidfill/src/liquidFill.js To install it, you can run: npm install --save echarts/lib/visual/dataColor 原因：看了https://blog.csdn.net/lhq15222807611/article/de...
避坑 v-charts 报错 Can‘t resolve ‘echarts/lib/......
weixin_47151361的博客
06-09 4446
项目用的是vuesax的框架，由于是上面给的框架，咱也不好意思吐槽就自己琢磨吧 项目用到了v-charts,但是该作者更新到2021.4.6之后就停更了，跟不上echats的速度，所以echarts5版本后的一些参数是没有的，就导致了报错 解决该问题可以： 1.降低echarts版本，参考可用：echarts 4.0以后的版本 2.npm install echarts5@npm:echarts@5.3.2 ......
Uncaught (in promise) Error: Renderer ‘undefined‘ is not imported. Please import it first.问题解决
时光清浅处，一步一安然
07-13 7319
这句话翻译过来就是未导入渲染器“未定义”。请先导入。 使用报错。在中使用需要 我出现这样得报错是在使用的时候报错的，直接按照官方文档按需引入即可。链接 如下就可正常显示：
vue项目使用v-charts
05-11
V-charts 是一个基于 Vue.js 和 ECharts 的图表组件库，可以方便地在 Vue 项目中使用 ECharts 图表。 以下是使用 v-charts 的基本步骤： 1. 安装 v-charts 可以使用 npm 或 yarn 进行安装： ``` npm install v-charts echarts --save ``` 或 ``` yarn add v-charts echarts ``` 2. 引入 v-charts 在 main.js 中引入 v-charts 组件： ```javascript import VCharts from 'v-charts' Vue.use(VCharts) ``` 3. 使用 v-charts 组件 在组件中使用 v-charts 组件，可以通过设置 type 属性来指定图表类型，例如： ```html <template> <v-chart :data="chartData" type="line"></v-chart> </template> ``` 其中 chartData 是数据源，type 是图表类型，这里是折线图。 以上就是使用 v-charts 的基本步骤，你可以根据自己项目的需求进行配置和使用。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值