/*

創(chuàng)新互聯(lián)公司成立于2013年，先為寧安等服務(wù)建站，寧安等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為寧安企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問(wèn)題。

? ? 圖中相關(guān)城市經(jīng)緯度,根據(jù)需求添加數(shù)據(jù)

? ? 關(guān)于國(guó)家的經(jīng)緯度，可以用首都的經(jīng)緯度或者其他城市的經(jīng)緯度

*/

var geoCoordMap = {

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

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

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

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

? ? '美國(guó)': [-100.696295, 33.679979],?

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

? ? '韓國(guó)': [126.979208, 37.53875],?

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

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

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

? ? '德國(guó)': [13.402393, 52.518569],?

? ? '英國(guó)': [-0.126608, 51.208425],?

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

};

/*?

? ? 記錄下起點(diǎn)城市和終點(diǎn)城市的名稱，以及權(quán)重

? ? 數(shù)組第一位為終點(diǎn)城市，數(shù)組第二位為起點(diǎn)城市，以及該城市的權(quán)重，就是圖上圓圈的大小

?*/

// 重慶

var CQData = [

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

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

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

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

];

// 廣州

var GZData = [

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

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

];

// 南寧

var NNData = [

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

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

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

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

];

// 小飛機(jī)的圖標(biāo)，可以用其他圖形替換

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';

// 獲取地圖中起點(diǎn)和終點(diǎn)的坐標(biāo)，以數(shù)組形式保存下來(lái)

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 // 起點(diǎn)坐標(biāo)

? ? ? ? ? ? }, {

? ? ? ? ? ? ? ? coord: toCoord // 終點(diǎn)坐標(biāo)

? ? ? ? ? ? }])

? ? ? ? }

? ? }

? ? return res;

}

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

var series = [];? ? ? ? ? ? ? ? ? ? ? ? // 用來(lái)存儲(chǔ)地圖數(shù)據(jù)

/*

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

? ? 要用到setOption中的series屬性，并且對(duì)每個(gè)城市都要進(jìn)行三次設(shè)置。

*/

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

? ? series.push({

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

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

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

? ? ? ? effect: {

? ? ? ? ? ? show: true,? ? ? ? ? ? ? ?// 動(dòng)效是否顯示

? ? ? ? ? ? period: 6,? ? ? ? ? ? ? ? // 特效動(dòng)畫時(shí)間

? ? ? ? ? ? trailLength: 0.7,? ? ? ? ?// 特效尾跡的長(zhǎng)度

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

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

? ? ? ? },

? ? ? ? lineStyle: {

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

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

? ? ? ? ? ? ? ? width: 0,? ? ? ? ? ? ?// 因?yàn)槭钳B加效果，要是有寬度，線條會(huì)變粗，白色航線特效不明顯

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

? ? ? ? ? ? }

? ? ? ? },

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

? ? }, {? // 小飛機(jī)航線效果

? ? ? ? type: 'lines',

? ? ? ? zlevel: 2,

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

? ? ? ? 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])? ? ?// 特效的起始、終點(diǎn)位置，一個(gè)二維數(shù)組，相當(dāng)于coords: convertData(item[1])

? ? }, { // 散點(diǎn)效果

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

? ? ? ? coordinateSystem: 'geo',? ? ? ?// 表示使用的坐標(biāo)系為地理坐標(biāo)系

? ? ? ? zlevel: 3,

? ? ? ? rippleEffect: {

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

? ? ? ? },

? ? ? ? label: {

? ? ? ? ? ? normal: {? ? ? ? ? ? ? ? ? // 默認(rèn)的文本標(biāo)簽顯示樣式

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

? ? ? ? ? ? ? ? position: 'left',? ? ? // 標(biāo)簽顯示的位置

? ? ? ? ? ? ? ? formatter: ''? ? ? ?// 標(biāo)簽內(nèi)容格式器

? ? ? ? ? ? }

? ? ? ? },

? ? ? ? itemStyle: {

? ? ? ? ? ? normal: {

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

? ? ? ? ? ? }

? ? ? ? },

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

? ? ? ? ? ? return {

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

? ? ? ? ? ? ? ? value: geoCoordMap[dataItem[1].name],? // 起點(diǎn)的位置

? ? ? ? ? ? ? ? symbolSize: dataItem[1].value / 8,? // 散點(diǎn)的大小，通過(guò)之前設(shè)置的權(quán)重來(lái)計(jì)算，val的值來(lái)自data返回的value

? ? ? ? ? ? };

? ? ? ? })

? ? });

});

// 顯示終點(diǎn)位置,類似于上面最后一個(gè)效果，放在外面寫，是為了防止被循環(huán)執(zhí)行多次

series.push({

? ? type: 'effectScatter',

? ? coordinateSystem: 'geo',

? ? zlevel: 3,

? ? rippleEffect: {

? ? ? ? brushType: 'stroke'

? ? },

? ? label: {

? ? ? ? normal: {

? ? ? ? ? ? show: true,

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

? ? ? ? ? ? formatter: ''

? ? ? ? }

? ? },

? ? symbolSize: function(val) {

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

? ? },

? ? itemStyle: {

? ? ? ? normal: {

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

? ? ? ? }

? ? },

? ? data: [{??

? ? ? ? // 這里面的數(shù)據(jù)，由于一開始就知道終點(diǎn)位置是什么，所以直接寫死，如果通過(guò)ajax來(lái)獲取數(shù)據(jù)的話，還要進(jìn)行相應(yīng)的處理

? ? ? ? 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]

? ? }]

});

// 最后初始化世界地圖中的相關(guān)數(shù)據(jù)

var option= ({

? ? backgroundColor: '#404a59',

? ? title: {

? ? ? ? show:'false'

? ? },

? ? geo: {

? ? ? ? map: 'world',? ? ? ?// 與引用進(jìn)來(lái)的地圖js名字一致

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

? ? ? ? itemStyle: {? ? ? ? // 每個(gè)區(qū)域的樣式?

? ? ? ? ? ? normal: {

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

? ? ? ? ? ? },

? ? ? ? ? ? emphasis: {

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

? ? ? ? ? ? }

? ? ? ? },

? ? ? ? regions: [{? ? ? ? // 選中的區(qū)域

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

? ? ? ? ? ? selected: true,

? ? ? ? ? ? itemStyle: {? ?// 高亮?xí)r候的樣式

? ? ? ? ? ? ? ? emphasis: {

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

? ? ? ? ? ? ? ? }

? ? ? ? ? ? },

? ? ? ? ? ? label: {? ? // 高亮的時(shí)候不顯示標(biāo)簽

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

? ? ? ? ? ? ? ? emphasis: {

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

? ? ? ? ? ? ? ? }

? ? ? ? ? ? }

? ? ? ? }]

? ? },

? ? series: series,? ?// 將之前處理的數(shù)據(jù)放到這里

? ? textStyle: {

? ? ? ? fontSize: 12

? ? }

});

/* 然后就沒(méi)有然后了，全劇終！ */