echarts图表在vue项目中使用，并且Cartesian.js报错

于 2022-10-29 15:32:31 发布
阅读量149 收藏
点赞数
分类专栏： vue 文章标签： javascript vue.js echarts
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43996368/article/details/127587742
版权

echarts图表在vue项目中使用，并且Cartesian.js报错

报错详情

在这里插入图片描述
一开始并没有发现这个报错，图表可以加载成功，但是tooltip之类的就无法展示了
在这里插入图片描述

报错解析

点击进入文档可以发现，报错是因为axis.scale不存在引起的
在这里插入图片描述
这里还没明白为什么会有这个东西，我在代码里并没有去设置过scale相关的
去官方文档上检索了一下
在这里插入图片描述
这里提示说只有在type为value下有效，那么思考，报错是否跟type有关
x轴代码：
在这里插入图片描述
y轴代码：
在这里插入图片描述
这里可以看到，我在y轴的第二个轴里，type值给了空值
这里加入type: 'value’之后，报错消失
在这里插入图片描述

Cardhu丶
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue.js 中使用（...）运算符报错的解决方法
10-18
当在Vue.js项目中遇到使用扩展运算符（...）报错时，可以按照以下步骤进行解决： 1. **安装`babel-plugin-transform-object-rest-spread`插件**： 报错提示不识别ES6的扩展运算符，这意味着我们需要使用Babel来将...
vue print.js打印支持Echarts图表操作
01-18
网上找的print.js做了修改，支持Echarts图表这里记录一下，不知道是哪家的代码了，我看都一样 这里是看到了两个源码 https://github.com/xyl66/vuePlugs_printjs/blob/master/print.js ...
React之Echarts出现Animator.js:64 Uncaught TypeError: Cannot set property ‘0‘ of undefined报错
Welkin_qing的博客
01-07 3243
文章目录一、出现的情况二、解决办法（1）理解该函数（2）解决办法1. 修改此函数法一法二2. 使用echarts 5.0以上版本 一、出现的情况 出现这种情况，通常实在出现zoom缩放，类似于下边 我下篇文章介绍如何实现横坐标缩放 鼠标可以控制缩放条的大小，在缩到一定程度时，或者出现横坐标重叠，控制台会出现如下错误 或者有网友说到的另一种： Uncaught TypeError: Cannot set property '0' of undefined at Vt (echarts.min.js
Echarts报错总结（内含三种常见错误，看看有没有你心仪的）
weixin_46870848的博客
08-05 6952
echarts一般安装报错和大多数npm安装报错一样，哪怕和别人的报错不太一样，（像我是报了263个错），或者你的就是can't resolve "xxx",那么大概率是你安装的版本和你的框架等版本不合。由于echarts图表只有在dom渲染后，才可以进行初始化，所以此处不能在created里面初始化图表，异步请求图表数据，应该要在mounted()里面进行这步操作。解决方案：(vue2跟echarts现在最新的版本5字头在一起都会报错，故降低版本就好啦）（后者是清理echarts 但是不销毁实例）....
问题
weixin_45121519的博客
04-19 972
目前有问题无法解决 打开项目网站显示webpack-internal:///./node_modules/vue/dist/vue.runtime.esm.js:620 [Vue warn]: Error in mounted hook: “TypeError: getArticleShow(…).then is not a function” 前端: 后端: 其他的api使用时正常但这个报...
Cesium.js解析第一篇 Cartesian3
zxzfcsu的博客
06-29 8774
写在前面：由于时间和需求的关系，Cesium.js文件的解析有可能不会写完，但是能贡献一点是一点吧，我会边做边写。另外由于作者水平和时间的关系，还请大家不吝指教。Cartesian3的源码比较简单，所以我以翻译为主，辅以自己的理解等等。Cartesian的翻译为"笛卡尔"，实际上Cartesian3是来储存点的X/Y/Z坐标的，其中的方法也是服务于这一点，请大家记住这一点。以下就简称之为C3。.f...
详解vue文件中使用echarts.js的两种方式
10-17
4. 在其他Vue组件中使用这个ECharts组件： ```html ``` 接下来，我们介绍第二种方式，直接在Vue文件中引入ECharts。这种方式适合在单个Vue组件中绘制图表，不涉及组件复用的情况。例如，在`WelcomePage.vue`中...
在Vue项目中安装配置Math.js的方法解决计算bug问题
01-20
在Vue项目中，有时会遇到计算精度丢失或者计算错误的问题，这时可以借助Math.js库来增强JavaScript的数学计算能力。Math.js是一个强大的数学库，它提供了大量的数学函数、符号计算、复数运算、矩阵操作等功能，能...
vue.js 中使用（…）运算符报错的解决方法
12-10
本篇文章将详细讲解如何解决Vue.js项目中使用扩展运算符报错的问题。 首先，报错的原因在于Vue.js项目可能没有正确地配置Babel，Babel是一个JavaScript编译器，它可以将ES6+的代码转换为当前浏览器能理解的ES5语法...
错误异常监控神器 fundebug
huangjianfeng21的博客
06-19 1318
前言 有时候，看到用户的反馈，我们往往会一脸茫然，因为反馈的信息太少了。 比如有用户反馈登录不了。为了解这个问题，一般的流程是这样的：首先试试自己能不能登录网站，发现没问题；然后查看后台日志，发现最近没有登录接口相关的报错；最后根据用户反馈的时间，去后台查日志记录。结果日志记录没有错误信息。 那这个问题没法解决了！除非找出用户的联系信息，和他去聊聊这个bug。 这样的情况很多，有时候及...
Ant-design-vue中使用table表格时隐藏分页器
热门推荐
weixin_43996368的博客
07-24 1万+
Ant-design-vue中使用table表格时隐藏分页器 <a-table :columns="columns" :data-source="datasource" :scroll="{ y: 155 }" :pagination="false" //分页器配置项 /> pagination属性控制an t-desing-vue中table自带的分页器，属性改为false即可隐藏 ...
vue中使用高德地图marker标记点的setLabel，在不同层级下控制显示隐藏
weixin_43996368的博客
12-07 8244
vue中使用高德地图marker标记点的setLabel，在不同层级下控制显示隐藏 设置点标注的文本标签 marker.setLabel({ offset: new AMap.Pixel(1, 0), //设置文本标注偏移量 content: '<div>' + name + '</div>', //设置文本标注内容 direction: 'top', //设置文本标注方位 }); 监听地图层级变化 let _this = this; var logMapChange
beforeRouteEnter和路由跳转带参数两种方法分别获取页面跳转路径的url
weixin_43996368的博客
10-30 7759
beforeRouteEnter beforeRouteEnter 这个钩子中的from参数可以获得之前url的信息，再通过 next 传递回调来访问当前组件的实例。 data(){ return { data: {}, } }, beforeRouteEnter(to, from, next){ console.log(from); next(vm => { // 通过 `vm` 访问组件实例,将值传入newPath //beforeRouteEnter守卫在导航确认前被调用，因此守
VUE时间选择器a-range-picker使用，并且动态绑定默认值
weixin_43996368的博客
04-28 7668
VUE时间选择器a-range-picker使用，并且动态绑定默认值时间选择器 时间选择器 <a-range-picker v-if="form.dateFrom" v-model="form.invalidTime" :default-value="[moment(`${form.dateFrom.substring(0,10)}`, 'YYYY-MM-DD'), moment(`${form.dateTo.substring(0,10)}`, 'YYYY-MM-DD')]" :disable
vue中对于高德地图API的调用、js封装以及刷新后地图不显示为空白的原因
weixin_43996368的博客
08-06 6812
vue中使用高德地图 注意点： 1.使用地图必须定义容器大小，长宽固定 2.key值需自行申请key申请地址 <template> <div id="Maps" class="Maps"></div> </template> <script> </script> export default { data(){ return{ map: null
VUE3.0监听容器宽度变化
weixin_43996368的博客
03-16 6395
VUE3.0监听容器宽度变化 <template> <a-row class="table-box" ref="tableBox" /> </template> 不解释了，直接上代码 <script lang="ts"> import { defineComponent, nextTick, onMounted, onUnmounted, reactive, ref } from 'vue'; export default defineComponen
VUE3.0中使用SVG绘制折线箭头，并且添加线条流动动画
weixin_43996368的博客
03-10 6316
VUE3.0中使用SVG绘制折线箭头svg标签使用SVG 代码预定义形状元素defs 标签折线箭头绘制示例示例 svg标签使用 SVG 代码 SVG 代码包括开启标签 svg 和关闭标签 /svg 。这是根元素。width 和 height 属性可设置此 SVG 文档的宽度和高度。version 属性可定义所使用的 SVG 版本，xmlns 属性可定义 SVG 命名空间。 <svg></svg> 预定义形状元素 SVG 有一些预定义的形状元素，可被开发者使用和操作： 矩形 rec
vue中使用elment-ui的form，报错Property or method “form“ is not defined on the instance but referenced durin
weixin_43996368的博客
07-30 5286
vue中使用elment-ui的form表单 model：表单数据对象 rules：表单验证规则，tigger: blur/change status-icon：是否在输入框中显示校验结果反馈图标 size：组件大小，medium/small/min disabled：是否禁用组件 prop：表单域 model 字段，用于验证 ...
el-upload error : "file exists"
最新发布
06-01
el-upload 组件的 "file exists" 错误通常是由于上传的文件与服务器上已经存在的文件重名导致的。您可以尝试以下解决方法： 1. 修改上传文件的名称，确保上传的文件名称不与服务器上已存在的文件重复。 2. 如果您使用的是后端框架，可以检查框架文档以了解如何处理上传重名的问题。 3. 如果您想要替换服务器上已存在的文件，可以在后端代码中添加相应的处理逻辑，如覆盖原有文件或者给新文件添加一个唯一的后缀。 4. 如果以上方法都无法解决问题，您可以尝试通过设置 el-upload 组件的 `before-upload` 属性来进行自定义文件上传验证和处理。在 `before-upload` 方法中，您可以检查服务器上是否已经存在同名文件，如果存在可以提示用户进行确认或者自动进行重命名等处理。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值