echarts3 遷徙圖 遷入遷出

geoCoordMap = {
  '上海': [121.4648,31.2891],
  '佛山': [112.8955,23.1097],
  '保定': [115.0488,39.0948],
  '蘭州': [103.5901,36.3043],
  '包頭': [110.3467,41.4899],
  '北京': [116.4551,40.2539],
  '天津': [117.4219,39.4189],
  '常州': [119.4543,31.5582],
  '廣州': [113.5107,23.2196],
};
// 航班線路
var BJData = [
  [{name:'北京',value:90}, {name:'廣州',value:90}]
];
// 航班線路
var GZData = [
  [ {name:'廣州',value:90},{name:'北京',value:90}]
];
// 箭頭的svg
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';
// push進去航班線路開始-結束地點-經緯度
var convertData = function (data) {
  var res = [];
  for (var i = 0; i < data.length; i++) {
      var dataItem = data[i];
      var fromCoord = geoCoordMap[dataItem[0].name];
      var toCoord = geoCoordMap[dataItem[1].name];
      if (fromCoord && toCoord) {
          res.push({
              fromName: dataItem[0].name,
              toName: dataItem[1].name,
              coords: [fromCoord, toCoord]
          });
      }
  }
  return res;
};
//航班顏色
var color = ['#a6c84c', '#ffa022', '#46bee9'];
//航班數據
var series = [];
// 遍歷航班
[['廣州', GZData]].forEach(function (item, i) {
  // 打印航班線路
  console.log(convertData(item[1]))
  // 配置
  series.push({
      // 系列名稱，用於tooltip的顯示
      name: item[0] + ' Top10',
      type: 'lines',
      //用於 Canvas 分層，不同zlevel值的圖形會放置在不同的 Canvas 中
      zlevel: 1,
      //出發到目的地 的白色尾巴線條
      // 線特效的配置
      effect: {
          show: true,
          // 特效動畫的時間，單位為 s
          period: 6,
          // 特效尾跡的長度。取從 0 到 1 的值，數值越大尾跡越長
          trailLength: 0.7,
          // 特效標記的顏色
          color: '#fff',
          // 特效標記的大小
          symbolSize: 3
      },
      //出發到目的地 的線條顏色
      lineStyle: {
          normal: {
              color: color[i],
              width: 0,
              //fu度
              curveness: 0.2
          }
      },
      //開始到結束數據
      data: convertData(item[1])
      // data:
  },
  //出發地信息
  {
    name: '廣州',
    type: 'lines',
    coordinateSystem: 'geo',
    zlevel: 2,
    rippleEffect: {
        brushType: 'stroke'
    },
      label: {
          normal: {
              show: true,
              position: 'right',
              formatter: '{a}'
          }
      },
      effect: {
          show: true,
          period: 6,
          trailLength: 0,
          symbol: planePath,
          symbolSize: 15
      },
      lineStyle: {
          normal: {
              color: color[i],
              width: 1,
              opacity: 0.4,
              curveness: 0.2
          }
      },
      data: convertData(item[1])
  },

  // 目的地信息
  {
      name: '北京',
      type: 'effectScatter',
      coordinateSystem: 'geo',
      zlevel: 2,
      rippleEffect: {
          brushType: 'stroke'
      },
      label: {
          normal: {
              show: true,
              position: 'right',
              formatter: '{b}'
          }
      },
      symbolSize: function (val) {
          return val[2] / 8;
      },
      itemStyle: {
          normal: {
              color: color[i]
          }
      },
      data: item[1].map(function (dataItem) {
          return {
              name: dataItem[1].name,
              value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
          };
      })
  });
});

//標題和風格參數
option = {
  backgroundColor: '#404a59',
  title : {
      text: '北京到廣州',
      subtext: '可否顯示北京這個出發地點？',
      left: 'center',
      textStyle : {
          color: '#fff'
      }
  },
  tooltip : {
      trigger: 'item'
  },
  legend: {
      orient: 'vertical',
      top: 'bottom',
      left: 'right',
      data:['廣州 Top10'],
      textStyle: {
          color: '#fff'
      },
      selectedMode: 'single'
  },
  geo: {
      map: 'china',
      //鼠標移入是否顯示省份
      label: {
          emphasis: {
              show: true
          }
      },
      roam: true,
      itemStyle: {
          normal: {
              areaColor: '#323c48',
              borderColor: '#404a59'
          },
          emphasis: {
              areaColor: '#2a333d'
          }
      }
  },
  series: series
};