数据流向效果图

最近一直和可视化打交道，分享一个数据流向图.

因为本人原生canvas纯属新手，所有决定采用插件辅助。首先尝试jtopo半天，发现需要对其进行扩展。又回到问题原点，“canvas”。

于是发现echart上的地图的迁徙线就很满足这种动的效果，于是对配置进行了改造，完成了这种看起来活泼的图。

当然上面的图标、箭头等都是从阿里图库上copy的，仅仅写了些定位算法。

如果有大牛有简单的实现方式，可以互相交流。灰常感谢~

代码：

  var option =  {
                    title: {
                        text: "云监控平台数据交互流",
                        top: "top",
                        left: "center",
                        textStyle:{
                            color:"#f8f8f8",
                            fontSize:26
                        }
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: function(o) {
                            if($.isArray(o.value)){
                                return o.name + "：" + o.value[2];
                            }
                            else{
                                return o.data.name;
                            }
                        }
                    },

                    geo: {
                        map: 'MyGum',
                        label: {
                            emphasis: {
                                show: false
                            }
                        },
                        roam: true,
                        itemStyle: {
                            normal: {
                                color:'rgba(255,255,255,0)',
                                areaColor:'rgba(255,255,255,0)',
                                borderColor:'rgba(22,22,2,0)'

                            },
                            emphasis: {

                                color:'rgba(22,22,2,0)',
                                areaColor:'rgba(255,255,255,0)',
                                borderColor:'rgba(22,22,2,0)'
                            }
                        }
                    },
                    series: [{

                        type: 'lines',
                        zlevel: 1,
                        effect: {
                            show: true,
                            period: 3,
                            trailLength: 0.1,
                            color: '#A6C84C',
                            symbolSize: 8
                        },
                        lineStyle: {
                            normal: {
                                color: '#a6c84c',
                                width: 0,
                                curveness: 0.2
                            }
                        },
                        data: []
                    }, {

                        type: 'lines',
                        zlevel: 2,
                        effect: {
                            show: true,
                            period: 3,
                            trailLength: 0,
                            //symbol: 'image://',
                            symbol: response.planePath,
                            symbolSize: 15
                        },
                        lineStyle: {
                            normal: {
                                color: '#a6c84c',
                                width: 1,
                                opacity: 0.4,
                                curveness: 0.2
                            }
                        },
                        data: []
                    }, {

                        type: 'effectScatter',
                        coordinateSystem: 'geo',
                        zlevel: 2,
                        rippleEffect: {
                            period: 6,
                            scale: 2,
                            brushType: 'stroke'
                        },
                        label: {
                            normal: {
                                show: true,
                                position: 'right',
                                formatter: '{b}'
                            }
                        },

                        symbolSize: '50',
                        itemStyle: {
                            normal: {
                                color: '#a6c84c',
                            }
                        },
                        data: []
                    }]
                },

效果图：