colexiu-website/src/components/map-data.js

const geoCoordMap = {
  '甘肃': [103.73, 36.03],
  '青海': [101.74, 36.56],
  '四川': [104.06, 30.67],
  '河北': [114.48, 38.03],
  '云南': [102.73, 25.04],
  '贵州': [106.71, 26.57],
  '湖北': [114.31, 30.52],
  '河南': [113.65, 34.76],
  '山东': [117, 36.65],
  '江苏': [118.78, 32.04],
  '安徽': [117.27, 31.86],
  '浙江': [120.19, 30.26],
  '江西': [115.89, 28.68],
  '福建': [119.3, 26.08],
  '广东': [113.23, 23.16],
  '湖南': [113, 28.21],
  '海南': [110.35, 20.02],
  '辽宁': [123.38, 41.8],
  '吉林': [125.35, 43.88],
  '黑龙江': [126.63, 45.75],
  '山西': [112.53, 37.87],
  '陕西': [108.95, 34.27],
  '台湾': [121.30, 25.03],
  '北京': [116.46, 39.92],
  '上海': [121.48, 31.22],
  '重庆': [106.54, 29.59],
  '天津': [117.2, 39.13],
  '内蒙古': [111.65, 40.82],
  '广西': [108.33, 22.84],
  '西藏': [91.11, 29.97],
  '宁夏': [106.27, 38.47],
  '新疆': [87.68, 43.77],
  '香港': [114.17, 22.28],
  '澳门': [113.54, 22.19]
}

function convertData(data) {
  const res = []
  for (let i = 0; i < data.length; i++) {
    const geoCoord = geoCoordMap[data[i].name]
    if (geoCoord) {
      res.push({
        name: data[i].name,
        value: geoCoord.concat(data[i].value)
      })
    }
  }
  return res
}

let convert = (data) => {
  let res = [];
  for (var i = 0; i < data.length; i++) {
    var dataItem = data[i];
    var from = geoCoordMap[dataItem[0].name];
    var to = geoCoordMap[dataItem[1].name];
    if (from && to) {
      res.push({
        fromName: dataItem[0].name,
        toName: dataItem[1].name,
        coords: [from, to]
      });
    }
  }

  return res;
}

const randomData = () => {
  return Math.round(Math.random() * 1000)
}

const getItemStyle = (opacity) => {
  return {
    normal: {
      areaColor: '#96CFC6',
      borderColor: '#fff',
      borderWidth: 1,
      show: false,
      opacity,
    },
    emphasis: {
      areaColor: '#96CFC6',
      opacity: 1,
    }
  }
}

const areas = [
  { name: '北京', value: randomData(), itemStyle: getItemStyle(.5) },
  { name: '天津', value: randomData(), itemStyle: getItemStyle(.8) },
  { name: '上海', value: randomData(), itemStyle: getItemStyle(.4) },
  { name: '重庆', value: randomData(), itemStyle: getItemStyle(.3) },
  { name: '河北', value: randomData(), itemStyle: getItemStyle(.3) },
  { name: '河南', value: randomData(), itemStyle: getItemStyle(.2) },
  { name: '云南', value: randomData(), itemStyle: getItemStyle(.37) },
  { name: '辽宁', value: randomData(), itemStyle: getItemStyle(.85) },
  { name: '黑龙江', value: randomData(), itemStyle: getItemStyle(.8) },
  { name: '湖南', value: randomData(), itemStyle: getItemStyle(.71) },
  { name: '安徽', value: randomData(), itemStyle: getItemStyle(.21) },
  { name: '山东', value: randomData(), itemStyle: getItemStyle(.4) },
  { name: '新疆', value: randomData(), itemStyle: getItemStyle(.37) },
  { name: '江苏', value: randomData(), itemStyle: getItemStyle(.6) },
  { name: '浙江', value: randomData(), itemStyle: getItemStyle(.8) },
  { name: '江西', value: randomData(), itemStyle: getItemStyle(.5) },
  { name: '湖北', value: randomData(), itemStyle: getItemStyle(.47) },
  { name: '广西', value: randomData(), itemStyle: getItemStyle(.8) },
  { name: '甘肃', value: randomData(), itemStyle: getItemStyle(.73) },
  { name: '山西', value: randomData(), itemStyle: getItemStyle(.3) },
  { name: '内蒙古', value: randomData(), itemStyle: getItemStyle(.56) },
  { name: '陕西', value: randomData(), itemStyle: getItemStyle(.4) },
  { name: '吉林', value: randomData(), itemStyle: getItemStyle(.54) },
  { name: '福建', value: randomData(), itemStyle: getItemStyle(.7) },
  { name: '贵州', value: randomData(), itemStyle: getItemStyle(.56) },
  { name: '广东', value: randomData, itemStyle: getItemStyle(.3) },
  { name: '青海', value: randomData, itemStyle: getItemStyle(.37) },
  { name: '西藏', value: randomData, itemStyle: getItemStyle(.57) },
  { name: '四川', value: randomData, itemStyle: getItemStyle(.58) },
  { name: '宁夏', value: randomData, itemStyle: getItemStyle(.5) },
  { name: '海南', value: randomData, itemStyle: getItemStyle(.5) },
  { name: '台湾', value: randomData, itemStyle: getItemStyle(.4) },
  { name: '香港', value: randomData, itemStyle: getItemStyle(.2) },
  { name: '澳门', value: randomData, itemStyle: getItemStyle(.6) },
  { name: '南海诸岛', value: randomData, itemStyle: getItemStyle(1) },
]

const formatLines = (name = '北京') => {
  return areas.map(item => ([{ name }, { name: item.name, value: 100 }]))
}

export default activeName => ({
  tooltip: {
    show: false,
  },
  geo: {
    map: 'china',
    label: {
      normal: {
        show: false
      },
      emphasis: {
        show: false
      }
    },
    itemStyle: {
      normal: {
        areaColor: '#96CFC6',
        borderColor: '#fff',
        opacity: 0,
      },
      emphasis: {
        areaColor: '#96CFC6',
        opacity: 0,
      }
    },
    regions: [{
      value: 0,
      itemStyle: {
        normal: {
          opacity: 0,
        }
      },
      emphasis: {
        itemStyle: {
          areaColor: '#96CFC6',
          opacity: 0,
        }
      }
    }],
  },
  series: [
    {
      type: 'lines',
      zlevel: 1,
      symbol: ['none'],
      symbolSize: 10,
      animationDuration: 2500,
      animationDurationUpdate: 1000,
      lineStyle: {
        normal: {
          color: '#93C8BE',
          width: 2,
          opacity: 1,
          curveness: 0.05
        }
      },
      data: convert(formatLines(activeName))
    },
    {
      type: 'map',
      coordinateSystem: 'geo',
      geoIndex: 1,
      mapType: 'china',
      showLegendSymbol: false,
      showEffectOn: 'render',
      rippleEffect: {
        brushType: 'stroke'
      },
      roam: false,
      label: {
        normal: {
          show: false,
          areaColor: '#96CFC6',
          color: '#808080',
        },
        emphasis: {
          areaColor: '#96CFC6',
          opacity: 1,
          show: false
        }
      },
      regions: [{
        value: 0,
        itemStyle: {
          normal: {
            opacity: 0,
          }
        },
      }],
      data: areas.map(item => {
        item.selected = item.name === activeName
        return item
      }),
    },
    {
      type: 'effectScatter',
      coordinateSystem: 'geo',
      data: convertData(areas),
      symbolSize: 5,
      showEffectOn: 'render',
      rippleEffect: {
        brushType: 'stroke',
        scale: 6,
        period: 6,
      },
      hoverAnimation: true,
      label: {
        show: true,
        normal: {
          formatter: '{b}',
          position: 'left',
          show: true,
          color: '#808080',
          opacity: 1,
        }
      },
      itemStyle: {
        show: true,
        normal: {
          color: '#52C88D',
        }
      },
      zlevel: 9
    }
  ]
})