React之Echarts出现Animator.js:64 Uncaught TypeError: Cannot set property ‘0‘ of undefined报错

最新推荐文章于 2022-10-29 15:32:31 发布

Welkin_qing

最新推荐文章于 2022-10-29 15:32:31 发布

阅读量3.5k

点赞数 4

分类专栏： react 文章标签： typescript javascript reactjs

本文链接：https://blog.csdn.net/welkin_qing/article/details/112304007

版权

react 专栏收录该内容

34 篇文章 2 订阅

订阅专栏

一、出现的情况

出现这种情况，通常实在出现zoom缩放，类似于下边
在这里插入图片描述
我下篇文章介绍如何实现横坐标缩放
鼠标可以控制缩放条的大小，在缩到一定程度时，或者出现横坐标重叠，控制台会出现如下错误

或者有网友说到的另一种：

Uncaught TypeError: Cannot set property '0' of undefined
    at Vt (echarts.min.js:1)
    at onframe (echarts.min.js:1)
    at ft.i.onframe (echarts.min.js:1)
    at ft.fire (echarts.min.js:1)
    at ft.step (echarts.min.js:1)
    at wx._update (echarts.min.js:1)
    at t (echarts.min.js:1)

二、解决办法

定位错误来源，以我的错误信息为例子

可以看到是这个函数报了错
在这里插入图片描述
即

function interpolateArray(p0, p1, percent, out, arrDim) {
  var len = p0.length;

  if (arrDim === 1) {
    for (var i = 0; i < len; i++) {
      out[i] = interpolateNumber(p0[i], p1[i], percent);
    }
  } else {
    var len2 = len && p0[0].length;

    for (var i = 0; i < len; i++) {
      for (var j = 0; j < len2; j++) {
        out[i][j] = interpolateNumber(p0[i][j], p1[i][j], percent);
      }
    }
  }
} // arr0 is source array, arr1 is target array.
// Do some preprocess to avoid error happened when interpolating from arr0 to arr1

这个函数所在的位置是

node_modules/zrender/lib/animation/Animator.js

（1）理解该函数

这个函数是错误在

out[i][j] = interpolateNumber(p0[i][j], p1[i][j], percent);

interpolateNumber函数结构如下

function interpolateNumber(p0, p1, percent) {
  return (p1 - p0) * percent + p0;
}

报错是因为out数组的length会存在可能和P0，P1数组的length不一样，导致给out数组赋值时会出现报错

（2）解决办法

1. 修改此函数

法一

添加if判断，如果out[i]不存在，则给out[i]赋值一个空数组，这样可以保证代码不报错

function interpolateArray(p0, p1, percent, out, arrDim) {
  
  var len = p0.length;

  if (arrDim === 1) {
    for (var i = 0; i < len; i  ) {
      out[i] = interpolateNumber(p0[i], p1[i], percent);
    }
  } else {
    var len2 = len && p0[0].length;

    for (var i = 0; i < len; i  ) {
      for (var j = 0; j < len2; j  ) {
		if (!out[i]) out[i] = [];
        out[i][j] = interpolateNumber(p0[i][j], p1[i][j], percent);
      }
    }
  }
}

法二

首先确定out[i]是否存在，不存在赋值为空数组
判断P1[i]是否存在，存在则进行赋值
如果P1[i]不存在，则使用P[2]赋值

function interpolateArray(p0, p1, percent, out, arrDim) {
	var len = p0.length;
	if (arrDim == 1) {
	    for (var i = 0; i < len; i++) {
	        out[i] = interpolateNumber(p0[i], p1[i], percent);
	    }
	}
	else {
	    var len2 = len && p0[0].length;
	    for (var i = 0; i < len; i++) {
	        if (!out[i])                    
	            out.push([])
	        for (var j = 0; j < len2; j++) {
	            if (p1[i])                       
	                out[i][j] = interpolateNumber(
	                    p0[i][j], p1[i][j], percent
	                );
	            else                               
	                out[i][j] = p0[i][j];
	        }
	    }
	}
}