數據流向效果圖

最近一直和可視化打交道，分享一個數據流向圖.

因為本人原生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: []
                    }]
                },

效果圖：