echarts lines effect loop报错(急) #3450

Open
oneroundseven opened this Issue Jun 17, 2016 · 18 comments

Projects

None yet

3 participants

@oneroundseven
oneroundseven commented Jun 17, 2016 edited

问题简述 (One-line summary)

1、使用未公示的配置loop

                effect : {
                    symbol: 'arrow',
                    symbolSize: 2,
                    show: true,
                    period: 2,
                    loop: false,
                    callback: null,
                    trailLength: 0.1
                }

2、第一次往data里面添加数据是没有问题的,但是清空完数据,再次添加数据的时候,会报错

        symbol.setStyle('shadowColor', color);

这里直接报symbol为undefined 初步猜测是因为使用了loop的原因
因为loop:false后会在动画结束后移除symbol对象

                animator.done(function () {
                    self.remove(symbol);
                });

还发现有另外一个问题,就是 animator.done的回调不是每次都调用,当数据清空后,再次添加数据的时候,第一次会不走回调;

求解决办法

@oneroundseven
oneroundseven commented Jun 17, 2016 edited

找到部分问题所在;
当lines的data默认有一条数据,然后通过setOption动态添加会导致animator.done异常;
结果只执行一次回调,有一次会被忽略;

猜测应该跟setOption动画保持有点关系,导致动态数据不走回调了

20160617161341

见上图 实际只执行了一次回调 红色为第一次数据,蓝色为添加了一条变成2条的数据,最后回调只有第一条数据的回调,没有第二条的

@pissang pissang added the bug label Jun 17, 2016
@pissang pissang added a commit that closed this issue Jun 19, 2016
@pissang pissang Fix #3450 b87fcd0
@pissang pissang closed this in b87fcd0 Jun 19, 2016
@oneroundseven

@pissang 还有一个2个动画回调执行一次的问题没有解决 仍然存在 报错那个已经OK

@pissang
Contributor
pissang commented Jun 20, 2016

第二个问题不太清楚你的意思,我这照你的描述试了下没什么问题,不过在有残影的时候不循环是可能会造成动画结束后部分残影不会被清除的问题

@oneroundseven
oneroundseven commented Jun 20, 2016 edited

@pissang
我再描述一次, 我这边默认地图上是没有线的
1、通过按钮点击,执行setOption方法忘lines的data里面随机增加一条线的数据,具体lines options如下

            {
                type: 'lines',
                zlevel:1,
                effect : {
                    symbol: 'arrow',
                    symbolSize: 2,
                    show: true,
                    period: 2,
                    loop: false,
                    callback: null,
                    trailLength: 0.1
                },
                lineStyle: {
                    normal: {
                        width: 0,
                        color: '#FFF',
                        curveness: 0.1
                    }
                },
                animation: false,
                animationUpdateDuration: 0,
                data: [/*[ { coord : [-117.24, 34.45] }, { coord : [121.48, 31, 20] } ]*/]
            }

2、这种配置下,默认lines应该只是有动画效果;
3、我这边动画循环设置的false,然后自己在源码里面加了一个回调函数 EffectLine.js中增加的;

            if (!loop) {
                var self = this;
                animator.done(function () {
                    console.log(idx, animator._doneList);
                    callback && callback(lineData.getRawDataItem(idx));
                    self.remove(symbol);
                });
            }

4、在地图上增加一条线,这个时候动画执行是有时间的,当第一条线的动画还没有执行结束的时候,再次增加一条线,这个时候观察回调函数的回调次数,你会发现,2条线,只调用了第一条线的回调函数,第二条线的回调函数有执行;
5、我本地是给每个数据加了一个随机的数据戳,所以看起来很明显,数据格式如下;

[ { coord : [-117.24, 34.45], tag:'唯一不重复的戳' }, { coord : [121.48, 31, 20], tag:'唯一不重复的戳' } ]

6、给你附上一张戳的截图;
20160620112207
7、今天把echarts换成开发调试模式,看到报错信息了;
8、我要做的效果其实就是各条线执行完了自己删除自己,不影响其他正在执行动画的线;我的callback

        options.series[1].effect.callback = function(data) {
            options.series[1].data = self.__removeData(options.series[1].data, 'line', data.tag);
            console.log(options.series[0].data, options.series[0].data.length, data.tag);
            ec.setOption(options);
        };

不知道这样能否明白;

@pissang
Contributor
pissang commented Jun 20, 2016

关键的复现步骤是第四步?我这还是无法复现,你把有错误的项目打包发我看下?

@oneroundseven
oneroundseven commented Jun 20, 2016 edited

@pissang 是的 关键是第四步 那我写个demo发你吧 应该本地就可以调试出来的 稍等啊
已经发到你的gmail邮箱了,麻烦帮忙看下,谢谢
上面截图的错误 我加了个容错 下面报其他错了
if (!clip) continue;
忘了改回来传你了

@oneroundseven

@pissang 收到邮件了吧~

@pissang
Contributor
pissang commented Jun 20, 2016 edited

收到了,应该就是因为这个报错的原因导致没进入到动画结束的回调,你改成 continue 也是无法进入,但是我用最新代码构建的版本是没有这个问题的,不知道是否是你改了 zrender 的代码还是 zrender 代码没更新?

ECharts 最新版本构建前需要在 zrender 目录下 npm run prepublish 然后拷贝到 echarts 的 node_modules 目录下,或者用简单点的话软链接 zrender 目录,然后 zrender 代码有更新时运行 npm run prepublish

@oneroundseven

@pissang 你哪里编译完执行是2次回调么? 我代码全部还原 重新搞还是只有一次。。。。
你可以把你编译好的发我一份?

@oneroundseven
oneroundseven commented Jun 20, 2016 edited

@pissang 按照你说的全部编译后 直接调用echarts.js 会直接报错的
错误内容: echarts.js:18260 Uncaught TypeError: Cannot read property '_needsRemove' of undefined

===========================补充

刚才又更新了几个文件,报错信息确实不见了,不过2个动画,只执行一次回调的问题依然存在;

我上面那个截图,前面带带戳的是点击按钮2次加入的2个动画,然后下面那个log打的是回调,只有一次;

@pissang
Contributor
pissang commented Jun 20, 2016 edited

我这也是每个回调都会执行.....但是尾迹无法消除的问题上面有说明

@oneroundseven
oneroundseven commented Jun 20, 2016 edited

@pissang 问个问题 我发你那个demo上 你连续点击添加多个点, 停止后,最后地图上是空的么?
因为我在每个动画的回调里面会去删除当前的,如果此时地图上还有剩余的点,说明回调少了;
你可不可以把你生成的发我一份 ....

录了一个gif.... 注意看下图中,我在第一个动画没有执行结束又点了一个点,注意看控制台,第一个动画执行完正确调用了回调,第二个动画执行结束什么都没有执行,因为回调没有被调用;如果回调正确调用的话,地图上应该是空的;
231

当只有一个点的时候,执行结束后是没有任何问题的,只有在第一个没结束又添加的情况下会出现;一个点的时候是正确的,具体如下图;
111

@pissang
Contributor
pissang commented Jun 20, 2016

bug

@pissang pissang reopened this Jun 20, 2016
@pissang pissang added enhancement and removed bug labels Jun 20, 2016
@oneroundseven
oneroundseven commented Jun 20, 2016 edited

@pissang 我测了下不重置lines data数据的情况下 确实可以回调正常, 但是当回调函数里面重置data数据的时候就不行了;就会导致回调调用异常

@pissang
Contributor
pissang commented Jun 20, 2016 edited

重置有可能会导致之前的动画被移除,移除后是不会再调用 done 回调了的

@oneroundseven

@pissang 问题就在这里,我就是要在回调里面移除数据,呃,总算沟通好了,谢谢支持!~,期待改进

@flash59
flash59 commented Jul 8, 2016

loop为false时,在有残影的时候,动画播放完,但残影不会被消除,如何能解决?我也遇到了这个问题,有没有好的办法?

@flash59
flash59 commented Jul 8, 2016

@pissang loop为false时,在有残影的时候,动画播放完,但残影不会被消除,如何能解决?我也遇到了这个问题,有没有好的办法?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment