echarts画轨迹图

这几天在忙的项目中需要绘制节点轨迹图，变顺手用了百度的echarts。不得不吐槽一下，echarts的官方文档写的太简洁了，好多问题都没有处理方案，对于我这种小白来说，分分钟崩溃。。。

这次要画的图有几个特点：

1.世界地图；2.不止一个发散点；3.坐标信息从后台返回；4.没有地名；5.数据量太大，有好几千的坐标；

最大的困难在于把从后台获取的数据处理成echarts绘制的格式，费了老大劲，处理了各种幺蛾子才搞定，说到底还是技能不够啊
echarts中坐标的格式：

    geoCoord: {        '上海': [121.4648,31.2891],        '东莞': [113.8953,22.901]    }

绘制轨迹的格式：

    data : [        [{name:'北京'},{name:'上海'}],        [{name:'北京'},{name:'东莞'}]    ]

返回的数据格式：

{"code":200,"data":[{"latitude":37.36,"longitude":55.15,"list":[[120.7,40.0],[-113.0,23.0],[48.51,2.2]]},{"latitude":37.36,"longitude":55.15,"list":[]},{"latitude":2.2,"longitude":48.51,"list":[[-113.0,23.0],[120.7,40.0]]}]};

处理后台返回的数据

var nn = 0, mm = 0, tt =0; //坐标信息从后返回，且没有对应的地名，因此用数字代替var arr_test = [], arrMap1 = [], arrMap2 = [], strMap1 = '', srcList = [], arrMap3 = [];for(var i=0;i<response.data.length;i++){    var srcNode = [response.data[i].latitude,response.data[i].longitude];    srcList.push(srcNode);    arr_test = [];    for(var j=0;j<response.data[i].list.length;j++){        arr_test.push(response.data[i].list[j]);    }    for(var a=0;a<arr_test.length;a++){        nn++;        arrMap1.push('"'+ nn +'": ['+ arr_test[a] +']');        strMap1 = '[{name: "'+mm+'"},{name: "'+nn+'"}]';        arrMap2.push(strMap1);    }    var strMap2 = arrMap2.join(",");    var objMap = '['+ strMap2 +']';    mm--;}for(var b=0;b<srcList.length;b++){    arrMap3.push('"'+ tt +'": ['+ srcList[b] +']');    tt--;}mergeArray (arrMap1, arrMap3);var strMap3 = arrMap1.join(",");function mergeArray (arr1, arr2){ //将两个数组合二为一    for (var x = 0 ; x < arr1.length ; x ++ ){        for(var y = 0 ; y < arr2.length ; y ++ ){            if (arr1[x] === arr2[y]){                arr1.splice(x,1);             }        }    }    for(var z = 0; z <arr2.length; z++){        arr1.push(arr2[z]);    }    return arr1;}

绘制echarts地图由于种种原因用的事2.0版本：

var mapChart = echarts.init(document.getElementById('relation'));    mapChart.setOption({        backgroundColor: '#1b1b1b',                tooltip : {                    trigger: 'item',                    formatter: '{b}'                },        series : [            {                name: '地点',                type: 'map',                mapType: 'world',                hoverable: false,                itemStyle:{                    normal:{                        borderColor:'rgba(100,149,237,1)',                        borderWidth:0.5,                        areaStyle:{                            color: '#1b1b1b'                        }                    },                    emphasis:{                        borderColor:'rgba(255,255,255,1)',                        borderWidth:0.5,                        areaStyle:{                            color: 'transparent'                        }                    }                },                data:[],                markLine : {                    smooth:true,                    symbol: ['none', 'none'],                    effect : {                        show: true,                        scaleSize: 1,                        period: 30,                        color: '#fff',                        shadowColor: 'rgba(220,220,220,0.4)',                        shadowBlur : 5                    },                    itemStyle : {                        normal: {                            borderWidth: 0.05,                            lineStyle: {                                type: 'solid',                                color: 'aqua'                            }                        }                    },                    data : eval(objMap)                },                geoCoord: JSON.parse('{'+ strMap3 +'}')            }        ]    });

效果：

以后应该好好研究一下地图，再次尝试用echarts3.0来绘制。希望官方文档的内容再丰富些，这样就能少走点弯路。总之，好好学习！