Echarts世界流動圖

/*

? ? 圖中相關城市經緯度,根據需求添加數據

? ? 關于國家的經緯度，可以用首都的經緯度或者其他城市的經緯度

*/

var geoCoordMap = {

? ? '南寧': [108.479, 23.1152],

? ? '廣州': [113.5107, 23.2196],

? ? '重慶': [107.7539, 30.1904],

? ? '芬蘭': [24.909912, 60.169095],?

? ? '美國': [-100.696295, 33.679979],?

? ? '日本': [139.710164, 35.706962],?

? ? '韓國': [126.979208, 37.53875],?

? ? '瑞士': [7.445147, 46.956241],

? ? '東南亞': [117.53244, 5.300343],?

? ? '澳大利亞': [135.193845, -25.304039],?

? ? '德國': [13.402393, 52.518569],?

? ? '英國': [-0.126608, 51.208425],?

? ? '加拿大': [-102.646409, 59.994255]

};

/*?

? ? 記錄下起點城市和終點城市的名稱，以及權重

? ? 數組第一位為終點城市，數組第二位為起點城市，以及該城市的權重，就是圖上圓圈的大小

?*/

// 重慶

var CQData = [

? ? [{name: '芬蘭'}, {name: "重慶",value: 30}],

? ? [{name: '德國'}, {name: "重慶",value: 30}],

? ? [{name: '英國'}, {name: "重慶",value: 30}],

? ? [{name: '重慶'}, {name: "英國",value: 30}]

];

// 廣州

var GZData = [

? ? [{name: '日本'}, {name: "廣州",value: 30}],

? ? [{name: '東南亞'}, {name: "廣州",value: 30}]

];

// 南寧

var NNData = [

? ? [{name: '南寧'}, {name: "加拿大",value: 30}],

? ? [{name: '南寧'}, {name: "美國",value: 100}],

? ? [{name: '南寧'}, {name: "澳大利亞",value: 95}],

? ? [{name: '南寧'}, {name: "瑞士",value: 30}]

];

// 小飛機的圖標，可以用其他圖形替換

var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';

// 獲取地圖中起點和終點的坐標，以數組形式保存下來

var convertData = function(data) {

? ? var res = [];?

? ? for(var i = 0; i < data.length; i++) {

? ? ? ? var dataItem = data[i];

? ? ? ? var fromCoord = geoCoordMap[dataItem[1].name];

? ? ? ? var toCoord = geoCoordMap[dataItem[0].name];

? ? ? ? if(fromCoord && toCoord) {

? ? ? ? ? ? res.push([{

? ? ? ? ? ? ? ? coord: fromCoord // 起點坐標

? ? ? ? ? ? }, {

? ? ? ? ? ? ? ? coord: toCoord // 終點坐標

? ? ? ? ? ? }])

? ? ? ? }

? ? }

? ? return res;

}

var color? = ['#9ae5fc', '#dcbf71'];? ? // 自定義圖中要用到的顏色

var series = [];? ? ? ? ? ? ? ? ? ? ? ? // 用來存儲地圖數據

/*

? ? 圖中一共用到三種效果，分別為航線特效圖、飛機航線圖以及城市圖標漣漪圖。

? ? 要用到setOption中的series屬性，并且對每個城市都要進行三次設置。

*/

[['重慶', CQData],['廣州', GZData],['南寧', NNData]].forEach(function(item, i) {

? ? series.push({

? ? ? ? // 白色航線特效圖

? ? ? ? type: 'lines',? ??

? ? ? ? zlevel: 1,? ? ? ? ? ? ? ? ? ? // 用于分層，z-index的效果

? ? ? ? effect: {

? ? ? ? ? ? show: true,? ? ? ? ? ? ? ?// 動效是否顯示

? ? ? ? ? ? period: 6,? ? ? ? ? ? ? ? // 特效動畫時間

? ? ? ? ? ? trailLength: 0.7,? ? ? ? ?// 特效尾跡的長度

? ? ? ? ? ? color: '#fff',? ? ? ? ? ? // 特效顏色

? ? ? ? ? ? symbolSize: 3? ? ? ? ? ? ?// 特效大小

? ? ? ? },

? ? ? ? lineStyle: {

? ? ? ? ? ? normal: {? ? ? ? ? ? ? ? ?// 正常情況下的線條樣式

? ? ? ? ? ? ? ? color: color[0],

? ? ? ? ? ? ? ? width: 0,? ? ? ? ? ? ?// 因為是疊加效果，要是有寬度，線條會變粗，白色航線特效不明顯

? ? ? ? ? ? ? ? curveness: -0.2? ? ? ?// 線條曲度

? ? ? ? ? ? }

? ? ? ? },

? ? ? ? data: convertData(item[1])? ? // 特效的起始、終點位置

? ? }, {? // 小飛機航線效果

? ? ? ? type: 'lines',

? ? ? ? zlevel: 2,

? ? ? ? //symbol: ['none', 'arrow'],? ?// 用于設置箭頭

? ? ? ? symbolSize: 10,

? ? ? ? effect: {

? ? ? ? ? ? show: true,

? ? ? ? ? ? period: 6,

? ? ? ? ? ? trailLength: 0,

? ? ? ? ? ? symbol: planePath,? ? ? ? ?// 特效形狀，可以用其他svg pathdata路徑代替

? ? ? ? ? ? symbolSize: 15? ? ? ? ? ? ?

? ? ? ? },

? ? ? ? lineStyle: {

? ? ? ? ? ? normal: {

? ? ? ? ? ? ? ? color: color[0],

? ? ? ? ? ? ? ? width: 1,

? ? ? ? ? ? ? ? opacity: 0.6,

? ? ? ? ? ? ? ? curveness: -0.2

? ? ? ? ? ? }

? ? ? ? },

? ? ? ? data: convertData(item[1])? ? ?// 特效的起始、終點位置，一個二維數組，相當于coords: convertData(item[1])

? ? }, { // 散點效果

? ? ? ? type: 'effectScatter',? ? ? ? ?

? ? ? ? coordinateSystem: 'geo',? ? ? ?// 表示使用的坐標系為地理坐標系

? ? ? ? zlevel: 3,

? ? ? ? rippleEffect: {

? ? ? ? ? ? brushType: 'stroke'? ? ? ? // 波紋繪制效果

? ? ? ? },

? ? ? ? label: {

? ? ? ? ? ? normal: {? ? ? ? ? ? ? ? ? // 默認的文本標簽顯示樣式

? ? ? ? ? ? ? ? show: true,

? ? ? ? ? ? ? ? position: 'left',? ? ? // 標簽顯示的位置

? ? ? ? ? ? ? ? formatter: '{b}'? ? ? ?// 標簽內容格式器

? ? ? ? ? ? }

? ? ? ? },

? ? ? ? itemStyle: {

? ? ? ? ? ? normal: {

? ? ? ? ? ? ? ? color: color[0]

? ? ? ? ? ? }

? ? ? ? },

? ? ? ? data: item[1].map(function(dataItem) {

? ? ? ? ? ? return {

? ? ? ? ? ? ? ? name: dataItem[1].name,

? ? ? ? ? ? ? ? value: geoCoordMap[dataItem[1].name],? // 起點的位置

? ? ? ? ? ? ? ? symbolSize: dataItem[1].value / 8,? // 散點的大小，通過之前設置的權重來計算，val的值來自data返回的value

? ? ? ? ? ? };

? ? ? ? })

? ? });

});

// 顯示終點位置,類似于上面最后一個效果，放在外面寫，是為了防止被循環執行多次

series.push({

? ? type: 'effectScatter',

? ? coordinateSystem: 'geo',

? ? zlevel: 3,

? ? rippleEffect: {

? ? ? ? brushType: 'stroke'

? ? },

? ? label: {

? ? ? ? normal: {

? ? ? ? ? ? show: true,

? ? ? ? ? ? position: 'left',

? ? ? ? ? ? formatter: '{b}'

? ? ? ? }

? ? },

? ? symbolSize: function(val) {

? ? ? ? return val[2] / 8;

? ? },

? ? itemStyle: {

? ? ? ? normal: {

? ? ? ? ? ? color: color[1]

? ? ? ? }

? ? },

? ? data: [{??

? ? ? ? // 這里面的數據，由于一開始就知道終點位置是什么，所以直接寫死，如果通過ajax來獲取數據的話，還要進行相應的處理

? ? ? ? name: "重慶",

? ? ? ? value: [107.7539, 30.1904, 30],

? ? ? ? label: {

? ? ? ? ? ? normal: {

? ? ? ? ? ? ? ? position: 'top'

? ? ? ? ? ? }

? ? ? ? }

? ? }, {

? ? ? ? name: '廣州',

? ? ? ? value: [113.5107, 23.2196, 30],

? ? ? ? label: {

? ? ? ? ? ? normal: {

? ? ? ? ? ? ? ? position: 'right'

? ? ? ? ? ? }

? ? ? ? }

? ? }, {

? ? ? ? name: '南寧',

? ? ? ? value: [108.479, 23.1152, 30]

? ? }]

});

// 最后初始化世界地圖中的相關數據

var option= ({

? ? backgroundColor: '#404a59',

? ? title: {

? ? ? ? show:'false'

? ? },

? ? geo: {

? ? ? ? map: 'world',? ? ? ?// 與引用進來的地圖js名字一致

? ? ? ? roam: false,? ? ? ? // 禁止縮放平移

? ? ? ? itemStyle: {? ? ? ? // 每個區域的樣式?

? ? ? ? ? ? normal: {

? ? ? ? ? ? ? ? areaColor: '#ff8800'

? ? ? ? ? ? },

? ? ? ? ? ? emphasis: {

? ? ? ? ? ? ? ? areaColor: 'red'

? ? ? ? ? ? }

? ? ? ? },

? ? ? ? regions: [{? ? ? ? // 選中的區域

? ? ? ? ? ? name: 'China',

? ? ? ? ? ? selected: true,

? ? ? ? ? ? itemStyle: {? ?// 高亮時候的樣式

? ? ? ? ? ? ? ? emphasis: {

? ? ? ? ? ? ? ? ? ? areaColor: '#7d7d7d'

? ? ? ? ? ? ? ? }

? ? ? ? ? ? },

? ? ? ? ? ? label: {? ? // 高亮的時候不顯示標簽

function(){ //一手 http://www.fx61.com/faq/muniu/426.html

? ? ? ? ? ? ? ? emphasis: {

? ? ? ? ? ? ? ? ? ? show: false

? ? ? ? ? ? ? ? }

? ? ? ? ? ? }

? ? ? ? }]

? ? },

? ? series: series,? ?// 將之前處理的數據放到這里

? ? textStyle: {

? ? ? ? fontSize: 12

? ? }

});

/* 然后就沒有然后了，全劇終！ */