echarts3 迁徙图 迁入迁出

Posted 2020-10-28 土豆儿哥

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