axis.getLabelsCoords is not a function 实测解决

最新推荐文章于 2024-06-07 15:43:29 发布
原创 最新推荐文章于 2024-06-07 15:43:29 发布 · 1.4k 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #echarts

在项目中遇到Echarts GL实例运行时出现getLabelsCoordsisnotafunction错误，经查找GitHub上的官方说明，问题在于echarts-gl版本过旧。升级到1.1.1版本后，问题得到解决。实测推荐使用'npm install echarts-gl@1.1.1 --save'进行更新。

axis.getLabelsCoords is not a function

继上一个一个文章发现项目成功运行了之后，但是将echarts实例拿过来后，又遇到了报错getLabelsCoords is not a function。
发现gitthb上echarts得开发人员说gl版本要更新到1.1.1 然后就不报错了！
实测可用

npm install echarts-gl@1.1.1 --save

正确解决TypeError: xxx is not a function异常的有效解决方法
wbajsjhhhhh的博客
05-03 1万+
正确解决TypeError: xxx is not a function异常的有效解决方法
关于Echart的TypeError: axis.getAxesOnZeroOf is not a function报错问题
YHJ_2298的博客
12-17 1万+
在使用echart的时候，明明各项参数都有传入，但是，在echart使用this.init()初始化的时候，却报错TypeError: axis.getAxesOnZeroOf is not a function，通过一项一项排除，发现在xAxis属性中的data为[ ]时，会出现该错误。 当然，我的问题不是你的问题，请具体问题具体分析！！！ 我的xAxis： xAxis: { type: 'category', axisTick: { alignWithLabel: .
TypeError: xxx is not a function异常的解决方案
热门推荐
2301_79779756的博客
05-10 2万+
在JavaScript编程中，TypeError: xxx is not a function是一个常见的运行时错误。这个错误表明你尝试调用的xxx并不是一个函数，但你的代码却以函数的方式去调用了它。这通常是因为变量xxx没有被正确地定义为一个函数，或者它被赋予了非函数的值。
Uncaught TypeError: i.getOtherAxis is not a function
fdsjiaoDoctor的博客
09-23 1837
echarts 3没有带地图数据，手动导入china.js或者其他geojson数据，echarts官网的源码中有地图数据，在map文件夹下
vue echarts k线图添加交易量副图时 axis.getAxesOnZeroOf is not a function
tenc1239的博客
07-01 905
问题原因: xAxis, yAxis, series 三个值必须一次设置为,缺少series 就会报这个错误。vue echarts k线图添加交易量副图。
d3.js无法使用diagonal报错d3.svg.diagonal is not a function的解决办法
前端蜗牛君
05-06 1067
之前使用的是v3版本，使用到了对角线，但在v3之后d3.svg.diagonal被移除，当升级d3版本到v4，v5之后报错： Uncaught (in promise) TypeError: d3.svg.diagonal is not a function 解决：替换diagonal方法 原： this.diagonal = d3.svg .diagonal() .projection(d => [d.y, d.x]) 替换为： this.diagonal = function
axis2.jar 解决 org.apache.axis2.util.JavaUtils.callStackToString问题
08-05
<Call Stack = DEBUG_FRAME = org.apache.axis2.util.JavaUtils.callStackToString(JavaUtils.java:564) DEBUG_FRAME = org.apache.axis2.description.ParameterIncludeImpl.debugParameterAdd(ParameterIncludeImpl...
[Unity插件]直升机控制插件[Unity问题]Input Axis Mouse X is not setup.
BuladeMian的博客，菜得抠脚，菜得真实
12-24 4845
直升机控制插件，还有 箭头指向目的地 Unity asset store里面有。 Base Helicopter Controller ------------------------------------------------------- Heli Sim Pack (Heli Sim Pack 和Helicopter Pack 结合在...
org.apache.axis jar
05-24
`org.apache.axis.jar`是Axis框架的核心库文件，包含了处理Web服务请求和响应所需的类和方法。 在Java开发中，当我们需要创建Web服务客户端或服务端时，Apache Axis能发挥重要作用。它简化了服务的创建过程，使得...
org.apache.axis2.jar
03-31
org.apache.axis2.jar
类别，类型和结构Categories, Types And Structures
11-15
对一般类别理论和构成理论背景的数学结构的完整介绍。
关于Echart的Uncaught TypeError: a.getAxesOnZeroOf is not a function报错问题
m0_52940881的博客
12-13 2372
最后经过一番检查对比，发现是因为我没有在option中写xAxis，而是将所有的x轴的参数都放到了ajax函数判断数据获取成功后在行设置。这样写就会导致，如果ajax获取数据失败，那么图的xAxis任何参数都无法正常设置因此会报该错误。之后我将xAxis的参数挪到了option中，只在ajax中设置x轴的数据项，就不报该错误了。发现的时候很奇怪，这个错误并不影响它函数体本身的展示，也不影响在它上面的函数体，但在它下面的就无法正常显示，在网上搜了也没发现与我一样的错误，报错如图。看到最后一行点进去看。
Vue中使用Echarts中的地图组件报错：TypeError: api.coord is not a function
彭珂个人网的博客
03-16 5266
echarts地图成功案例
我的学习笔记12.1
qq_55691400的博客
12-01 452
2021SC@SDUSC echarts源码分析 echarts如何渲染展示坐标轴上的label数据 存储 首先考虑label data的存储过程，以直角坐标系为例，data存储的调用链如下所示： echarts.setOption() Global.setOption() Global.mergeOption() Component.optionUpdated() AxisModelCreator.optionUpdated()，将OrdinalMeta.createByAxisModel().
Layui + Echarts 实现中国地图路径展示
duanduanxiao的博客
06-07 1594
Layui + echarts 实现中国地图
Syntax Error: TypeError: this.getOptions is not a function的解决（Vue）
惜江浅的博客
02-09 1万+
TypeError: this.getOptions is not a function 报错解决方案
TypeError: axis.getAxesOnZeroOf is not a function
最新发布
10-31
你遇到的错误： ``` TypeError: axis.getAxesOnZeroOf is not a function ``` 这个错误 **通常不是由你的业务代码直接引起的**，而是 **ECharts 内部在某些特定配置下发生的问题**，尤其是在使用多 Y 轴（`multi y-axis`）时，如果 `yAxis` 配置不当、坐标轴 `id` 冲突、或 `series` 与 `yAxis` 关联出错，就可能触发 ECharts 源码中的内部方法调用异常。 --- ## 🔍 常见原因分析 ### ✅ 1. **多个 Y 轴但未正确设置 `yAxis.id` 和 `series.yAxisId`** 当你使用 **多个 Y 轴**（比如左轴、右轴），必须为每个 `yAxis` 设置唯一的 `id`，并在 `series` 中通过 `yAxisId` 明确指定绑定哪一个。 > ❌ 错误示例： ```js yAxis: [ { type: 'value', name: '跑力' }, { type: 'value', name: '状态' } ], series: [ { name: '跑力', type: 'line', yAxisIndex: 0 }, { name: '状态', type: 'line', yAxisIndex: 1 } ] ``` 虽然用了 `yAxisIndex`，但在某些 ECharts 版本中（尤其是 5.x+ 动态轴系统重构后），推荐使用 `id` + `yAxisId`。 --- ### ✅ 2. **使用了废弃的 `yAxisIndex` 或混淆了 `yAxisIndex` 与 `yAxisId`** - `yAxisIndex`：旧方式，按数组索引匹配（有时不稳定） - `yAxisId`：新推荐方式，通过字符串 id 匹配更安全 --- ### ✅ 3. **ECharts 版本 Bug（特别是 5.4+）** 该错误曾在 GitHub 上被报告为 ECharts 的一个 [bug](https://github.com/apache/echarts/issues/16876)，特别是在以下情况出现： - 多个 Y 轴 - 使用 `grid` 分区 - 动态更新数据或销毁重绘 相关 issue： 👉 https://github.com/apache/echarts/issues/16876 👉 https://github.com/apache/echarts/issues/17029 --- ## ✅ 解决方案 ### ✅ 方案一：确保每个 `yAxis` 有唯一 `id`，并用 `yAxisId` 绑定 series 修改你的 `MultiYAxisLineChart.vue` 组件中生成 option 的逻辑： ```js // 假设你要画两个指标：跑力（左轴）、状态（右轴） const option = { tooltip: { trigger: 'axis' }, legend: { data: props.series.map(s => s.name) }, xAxis: { type: 'category', data: props.xAxisData }, yAxis: props.series.map((item, index) => ({ id: `y-axis-${index}`, // 必须加唯一 id type: item.type || 'value', name: item.name, position: index % 2 === 0 ? 'left' : 'right', offset: index % 2 === 0 ? 0 : 20 * (Math.floor(index / 2)), // 避免重叠 axisLine: { show: true, lineStyle: { color: '#'+Math.random().toString(16).slice(2,8) } // 可选颜色区分 } })), series: props.series.map((item, index) => ({ name: item.name, data: item.data, type: 'line', smooth: props.smooth, symbol: props.icon, yAxisId: `y-axis-${index}` // ✅ 关键：绑定到对应的 yAxis id })) } ``` > ⚠️ 注意：不要混用 `yAxisIndex` 和 `yAxisId`！建议统一使用 `yAxisId` --- ### ✅ 方案二：限制同时显示的 Y 轴数量（避免过多） ECharts 不适合渲染 **超过 3~4 个 Y 轴**，否则容易崩溃或报错。如果你把每一个指标都单独作为一个 Y 轴，这是反模式！ #### ✅ 正确做法： - 将量级相近的指标共用一个 Y 轴 - 或者只展示 1~2 条关键曲线（如“跑力”和“状态”） - 其他数据可通过 tooltip 展示，而不是强行多轴 例如： ```js yAxis: [ { id: 'y1', type: 'value', name: '跑力', position: 'left' }, { id: 'y2', type: 'value', name: '疲劳度', position: 'right' } ] ``` 然后只有这两个 series 设置对应 `yAxisId`，其余隐藏或合并。 --- ### ✅ 方案三：升级或降级 ECharts 版本（临时绕过 bug） 如果你使用的是 **ECharts 5.4.0 ~ 5.4.2**，已知存在此问题。 #### 推荐版本： ```bash npm install echarts@5.3.3 ``` 或者 ```bash npm install echarts@5.5.0 # 后续修复版 ``` > ⚠️ 查看当前版本： ```bash npm list echarts ``` --- ### ✅ 方案四：延迟渲染或强制刷新图表 由于你用了 `v-if="isShow"` 控制显隐，在全屏切换时可能导致图表容器未就绪。 建议在 `dialogVisible` 打开后，**手动调用图表 resize 或 forceUpdate**： ```vue <echartsBox v-model:visible="dialogVisible" @opened="onChartOpened"> ``` ```js function onChartOpened() { // 触发子组件的 echarts.resize() nextTick(() => { chartInstance?.resize() }) } ``` --- ## ✅ 总结：如何避免 `axis.getAxesOnZeroOf is not a function` | 措施 | 说明 | |------|------| | ✅ 为每个 `yAxis` 添加唯一 `id` | 如 `y-axis-0`, `y-axis-1` | | ✅ `series` 中使用 `yAxisId` 而非 `yAxisIndex` | 更稳定可靠 | | ✅ 避免过多 Y 轴（建议 ≤2） | 提升可读性和稳定性 | | ✅ 升级 ECharts 至 5.5.0+ 或回退到 5.3.3 | 规避已知 bug | | ✅ 图表显隐后调用 `resize()` | 确保尺寸和坐标系重建 | --- ###
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值