Incubator-echarts: echarts3中lines的effect相关问题

Created on 22 Apr 2016  ·  14Comments  ·  Source: apache/incubator-echarts

echarts3中提供的lines以及path定义symbol能力,非常赞
但是在项目使用过程中,需要对effect的symbol进行简单控制,基本需求如下:
(1)是否能够控制effect的symbol的循环次数,比如所飞机效果完成一次后,不再循环
(2)或是当symbol完成一次时,能够触发外部回调或抛出事件
谢谢

enhancement

All 14 comments

暂时不行,可以考虑以后加入

您好,下一版本是否可以包含该功能,确实是需求比较强烈,谢谢

@langzixin @pissang 这个问题现在好像已经解决了 源码里面 lines 里面 effect 已经支持 loop参数了
effectModel.get('loop') ,只不过现在官方文档还没有更新

@oneroundseven 没看到源码中有支持loop参数,不过可以简单修改一下源码实现。
增加loop参数支持
var loop = effectModel.get('loop');
并修改animate调用时的参数
symbol.animate('', true) 改为symbol.animate('', loop)
可以实现只画一次,但是symbol在终点不会消失,需要再做处理。

@pissang 请教一下,symbol用自定义的path怎么改都变成了三角形?
<path style="fill:gold;" d="M125.3,104.89l37.24,1782.85,44-1782.85s3.39-54.16-37.24-54.16S125.3,104.89,125.3,104.89Z"/>

@csucaifei 我看了下你图形太长了,默认的 symbolSize 高宽相同所以被压缩成了看起来像三角形,如果你设置 symbolSize:

// 宽 10 高 200
symbolSize: [10, 200]

就会更像实际的图形形状。

ps:不建议用这么长的 symbol

@pissang 这个loop实现有点奇怪,例如在使用setOption更新图数据时,加入数据前后相同,这种实现effect居然不会重绘,就算数据不完全相同,那些相同的数据也不会重绘,个人认为在刷新数据之后,即使数据相同,effect配置一样,也应该重绘吧。

动画保持参见 https://github.com/ecomfe/echarts/issues/3439 这个问题

同问,这个问题解决了吗,使用echarts 3.8.4/3.8.5 遇到一样的问题?配置 loop : false,动画结束后 effect 如何去掉?

示例如下:

image

option = {
    "geo": {
        "map": "world",
        "left": 0,
        "top": 0,
        "right": 0,
        "bottom": 0,
        "label": {
            "emphasis": {
                "show": false
            }
        },
        "roam": false,
        "itemStyle": {
            "normal": {
                "areaColor": "#222548",
                "color": "#222548",
                "borderWidth": 0
            },
            "emphasis": false
        }
    },
    "series": [
        {
            "name": "test",
            "type": "lines",
            "zlevel": 1,
            "effect": {
                "show": true,
                "period": 6,
                "trailLength": 0.5,
                "color": {
                    "x": 0,
                    "y": 0,
                    "x2": 0,
                    "y2": 1,
                    "type": "linear",
                    "global": false,
                    "colorStops": [
                        {
                            "offset": 0,
                            "color": "#ffb400"
                        },
                        {
                            "offset": 1,
                            "color": "#ff6927"
                        }
                    ]
                },
                "symbolSize": 3,
                "loop": false
            },
            "lineStyle": {
                "normal": {
                    "color": {
                        "x": 0,
                        "y": 0,
                        "x2": 0,
                        "y2": 1,
                        "type": "linear",
                        "global": false,
                        "colorStops": [
                            {
                                "offset": 0,
                                "color": "#ffb400"
                            },
                            {
                                "offset": 1,
                                "color": "#ff6927"
                            }
                        ]
                    },
                    "width": 0,
                    "opacity": 0.05,
                    "curveness": 0.2
                }
            },
            "data": [
                {
                    "coords": [
                        [
                            104.166,
                            36.8944
                        ],
                        [
                            113.281,
                            23.1252
                        ]
                    ]
                }
            ]
        }
    ]
}

这个loop实现有点奇怪,例如在使用setOption更新图数据时,加入数据前后相同,这种实现effect居然不会重绘,就算数据不完全相同,那些相同的数据也不会重绘,个人认为在刷新数据之后,即使数据相同,effect配置一样,也应该重绘吧。 这个现在可以实现了吗,急急急 ,有什么好的方法

@csucaifei 帮忙回复一下我提的这个问题 跟你一样 你说在源码修改 在源码哪里修改啊 ,我第二次请求的时候 还会重新绘制吗

@pissang 麻烦你也帮我解答一下啊

求助
我的拖尾效果怎么做都没有官方实例的效果,出现一个一个叠加,官方是很平滑的
是版本问题?
描述说明 https://www.cnblogs.com/yflbk-2016/p/13602814.html

Was this page helpful?
0 / 5 - 0 ratings